Создание темы для WordPress: Подключение скриптов
Доброго времени суток. При создании темы для 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
Скрипт | Название в WordPress |
jQuery Form | jquery-form |
jQuery Color | jquery-color |
jQuery Masonry | jquery-masonry |
jQuery UI Core | jquery-ui-core |
Это далеко не полный список. Для того, чтобы получить полный список распечатайте глобальную переменную:
$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. Данный способ позволяет избежать конфликтов, при необходимости объединить скрипты в один файл, указывать версию скрипта или файла со стилями.