WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта

 21 января 2018      
 JAVA & PHP / WordPress      
 Комментариев еще нет      
 478

Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все было хорошо, скрипты нужно подключать используя функцию wp_enqueue_script(). Это в дальнейшем позволит без лишних проблем объединять несколько JS файлов в один. А также обезопасит вас от конфликтов скриптов, когда зависимый скрипт подключается после того от которого он зависит.

Устаревший вариант подключения JavaScript файлов в WordPress

Раньше в WordPress файлы скриптов подключались классических методом путем размещения кода в теге HEAD или перед закрывающим тегом /BODY. Например так:

<script src="<?php echo get_template_directory_uri() . '/path_to/script_name.js'; ?>" type="text/javascript" /></script>

Теперь такой способ считает устаревшим. И использовать его не рекомендуется по описанным выше причинам. Но по моему опыту «ручное» подключение файлов скриптов позволяет лучше оптимизировать сайт в части скорости загрузки, ведь вы сами определяете где будет расположен код вызова в начале сайта или его конце.

Добавляем скрипт с помощью wp_enqueue_script()

Сейчас в WordPress, чтобы зарегистрировать и подключить скрипт JavaScript достаточно воспользоваться всего одной функцией — wp_enqueue_script(). Для подключения JavaScript в файл functions.php вашей темы добавьте следующий код:

function mytheme_scripts_method(){
 wp_enqueue_script( 'script-name', get_template_directory_uri() . '/path_to/script_file_name.js');
}

add_action( 'wp_enqueue_scripts', 'mytheme_scripts_method' );

Здесь script-name — рабочее название скрипта.

Предполагается, что файл скрипта JavaScript расположен в одной директории (папке) с вашей темой.

Благодарности

При написании статьи были использованы следующие источники:

  1. Правильно подключает скрипт (JavaScript файл) на страницу.
Поделись этой страницей с друзьями!

Прочтите это обязательно

Новые тарифы Digital Ocean 2018

16 января 2018 года у популярного хостинга ...

Домены и хостинг digital ocean Далее

Обзор возможностей панели управления хостингом FastPanel SE Edition

Компания FastVP ...

VestaCP & ISPmanager fastpanel ispmanager vestacp Далее

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 66 | 0,119 сек. | 8.42 МБ
доступность сайта