WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах 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 расположен в одной директории (папке) с вашей темой.
Благодарности
При написании статьи были использованы следующие источники:
