Подключаем правильно скрипты js в шаблоне WordPress

26.11.2017

Подключать стили и скрипты в шаблон в файле 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); позволяет подключать наши скрипты в самую последнюю очередь после всех скриптов других плагинов.

Более подробно — здесь https://wp-kama.ru/function/wp_enqueue_script.

Полезная инфа:

Оставить комментарий