Подключаем правильно скрипты js в шаблоне WordPress
Подключать стили и скрипты в шаблон в файле header.php — неправильно.
Правильная практика — подключать их в файле functions.php используя функцию wp_enqueue_scripts, это позволит избежать конфликтов и без лишних проблем объединять JS файлы в один.
wp_enqueue_script() добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит зарегистрированы. Зависимые скрипты добавляются автоматически.
Подключаем файлы скриптов .js через functions.php
jQuery регистрируется в WP по умолчанию. Поэтому для его подключения достаточно одной строки:
wp_enqueue_script('jquery');
Зарегистрировать и подключить новый скрипт (скрипт подключится в <head>):
wp_enqueue_script('modernizr-js', get_template_directory_uri() . '/libs/modernizr/modernizr.js');
Чтобы подключить скрипт в футере после основного содержимого, можно использовать такой формат:
wp_enqueue_script('modernizr-js', get_template_directory_uri() . '/libs/modernizr/modernizr.js', array(), false, true);
jQuery можно не подключать дополнительно, если один из скриптов указывает на зависимость от jQuery array('jquery'), то есть библиотека jQuery подключится вместе с этим скриптом.
Кстати, библиотека jQuery подключается в <head> из-за того, что много других скриптов и плагинов зависят от нее, и поэтому она должна быть подключена в первую очередь.
Использование
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Шаблон использования
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js');
}
Параметры
$handle (строка) (обязательный)
Название скрипта (рабочее название). Строка в нижнем регистре.
Если строка содержит знак вопроса (?): scriptaculous&v=1.2, то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.
$src (строка)
УРЛ файла скрипта. Например: http://example.com/wp-content/themes/my-theme/my-theme-script.js.
Этот параметр необходим только, когда скрипт не зарегистрирован и WordPress еще не знает об этом скрипте, смотрите функцию wp_register_script().
Не нужно писать УРЛ жестко, он должен определяться динамически. Для этого используйте функции получения URL:
plugins_url() — для плагинов
get_template_directory_uri() — для тем.
Ссылки на внешние скрипты можно указывать без указания протокола: //otherdomain.com/js/their-script.js.
Уже зарегистрированные в WP скрипты смотрите ниже в этой статье.
По умолчанию: false
$deps (массив)
Массив названий скриптов от которых зависит этот скрипт; скрипты которые должны быть загружены перед этим скриптом. Этот параметр необходим только в случае, если WordPress еще не знает об этом скрипте.
По умолчанию: array()
$ver (строка)
Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress.
Если указать null, то никакая версия не будет добавлена.
По умолчанию: false
$in_footer (логический)
Подключить скрипт в подвал?
Обычно скрипт подключается в <head> документа, если указать true, то скрипт будет подключен перед тегом </body>, точнее там где вызывается тег шаблона wp_footer().
Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнорировано.
Для понятного чтения кода, вместо true можно указать любую строку, например 'in_footer'.
По умолчанию: false
Рабочий пример
Примерно в таком формате я подключаю скрипты на своих сайтах.
/* Load Scripts */
function crea_load_scripts()
{
// подключаем скрипт modernizr.js в <head>
wp_enqueue_script('modernizr-js', get_template_directory_uri() . '/libs/modernizr/modernizr.js', array(), NULL, true);
// вместо библиотеки jQuery из состава WordPress подключаем её CDN-копию (только при острой необходимости)
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), NULL, false);
wp_enqueue_script( 'jquery' );
// подключаем bootstrap.min.js с внешнего CDN-хранилища
wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array(), NULL, true);
// подключаем скрипт common.js из нашего локального шаблона и указываем его зависимость от jQuery
wp_enqueue_script('common-js', get_template_directory_uri() . '/js/common.js', array('jquery'), NULL, true);
}
add_action('wp_enqueue_scripts', 'crea_load_scripts', 10);
Число «10» в этой строке add_action('wp_enqueue_scripts', 'crea_load_scripts', 10); позволяет подключать наши скрипты в самую последнюю очередь после всех скриптов других плагинов.
Пример, как подключить скрипт для определенной страницы
add_action( 'template_redirect', 'my_custom_readmore_script' );
function my_custom_readmore_script() {
if ( is_page_template('template-best-reviews.php') ) {
wp_enqueue_script( 'readmore-script', get_template_directory_uri().'/js/readMore.js', array( 'jquery' ), false, true );
}
}
Более подробно — здесь https://wp-kama.ru/function/wp_enqueue_script.
Подключать стили в шаблон в файле header.php — неправильно. Правильная практика — подключать их в…
15 ноября 2017 года был выпущен WordPress версии 4.9, названный в честь джазового музыканта Билли…
Регистрируем панель виджетов, в которую потом будем размещать виджеты на сайте, я обычно использую такие…
Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus)….
4 комментария
Ответить
Спасибо. правильное подключение сразу убивает лишние баги. Например у меня в хедере тусили vue стайлы. После верного подключения все встало как положено
Денис выводите больше таких вот статей))
Спасибо за ответ! И успехов)
При нажатии кнопки заказать на главной странице сайта выполняется редирект на страницу авторизации в панель администратора. какого скрипта не хватает? подскажите
Скорее всего вы в основном файле скриптом неправильно задали какую-то функцию, вряд ли проблема в недостатке скриптов.
Покажите ссылку, можно посмотреть.