Доброго времени суток. При создании темы для WordPress нам необходимо подключать различные js скрипты и css, например, jQuery или bootsrap.js. Вроде бы ничего сложного, но в WordPress есть для этого специальная функция, которая позволяет нам избегать конфликтов и без проблем объединять скрипты в один файл, а также указывать версию css или js (чтобы скрипты и стили у клиента были новые, а не из кеша).

И так. Первое правило: Не подключайте стили и скрипты в файле header.php. Для подключения используйте функцию:

wp_enqueue_script ( $handle, $src, $deps, $ver, $in_footer );

Где:

• $handle – название скрипта
• $src – путь к скрипту, указываем в том случае, если скрипт не зарегистрирован
• $deps – массив зависимостей, перечисляем скрипты от которых зависит наш скрипт (это нужно, для того, чтобы наш скрипт подключился уже после)
• $ver – версия скрипта, необходима для сверки со скриптом вытянутым из кеша.
• $in_footer – булево значение, если true, то скрипт будет подключен в футере. По умолчанию false

Подключение jQuery к теме WordPress

Так как jQuery уже идет в комплекте с WordPress, то для подключения jQuery к теме достаточно вызвать функцию с параметром «jquery»

wp_enqueue_script (‘jquery’);

Список скриптов, которые идут с WordPress

Это далеко не полный список. Для того, чтобы получить полный список распечатайте глобальную переменную:

$GLOBALS['wp_scripts']

Пример подключения скрипта к теме WordPress

Как мы выяснили выше, для подключения скрипта в WordPress используется функция wp_enqueue_script(). Для вызова данной функции, как правило, используются следующие хуки, что такое хуки в WordPress вы можете прочитать «Создание плагина для WordPress: Хуки в WordPpress: action и filter. Часть 3»:

• wp_enqueue_scripts – срабатывает во время подключения скриптов и стилей
• admin_enqueue_scripts – для подключения скриптов и стилей на страницах административной части
• login_enqueue_scripts – для подключения скриптов и стилей на странице авторизации

Давайте подключим файл script.js нашей темы в футере. Для этого в файл functions.php добавим следующий код:

function my_scripts()

{

wp_enqueue_script( 'jquery' );

wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0' , true);

}

add_action('wp_enqueue_scripts', 'my_scripts', 10);

Что мы сделали? Первое создали функцию my_scripts, которая подключает скрипты:

• jquery, которая уже зарегистрирована в WordPress
• script, которая расположена в папке js, которая в свою очередь находится в папке с темой.

Тут мы использовали функцию get_template_directory_uri(), которая возвращает путь к папке с темой.

И дальше мы прицепили к хуку wp_enqueue_scripts нашу функцию.

Вот и все.

Заключение.

Мы с вами рассмотрели правильный способ подключения скриптов и стилей к теме WordPress. Данный способ позволяет избежать конфликтов, при необходимости объединить скрипты в один файл, указывать версию скрипта или файла со стилями.