Как правильно добавлять Javacript-скрипты и CSS-стили в WordPress

Недавно мы сделали обзор кода для плагина, написанного одним из наших пользователей. Плагин прекрасно работал, однако его разработчик не придерживался устоявшейся практики загрузки внешних JavaScript-скриптов. В WordPress имеется специальная система для добавления внешних скриптов и стилей, которая помогает избежать конфликтов среди плагинов. Поскольку у большинства пользователей запущено более одного плагина на сайте, разработчикам всегда важно следовать устоявшимся практикам написания кода. В данной статье мы покажем вам, как правильно добавлять JavaScript и стили в WordPress. Это будет особенно полезно для тех, кто только начинает изучать разработку плагинов и тем WordPress.

Ошибочное использование

В WordPress есть функция wp_head, которая позволяет загружать что-либо в разделе head сайта. Разработчики, которые не знают лучшего решения, просто добавляют свои скрипты следующим образом:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

Это довольно простой способ подключения скриптов, однако он является неправильным в WordPress. К примеру, если вы загружаете jQuery вручную, и другой плагин загружает jQuery надлежащим образом, то в таком случае у вас будет две загруженные копии библиотеки. Возможно, что эти две разные версии библиотеки могут приводить к конфликтам.

Давайте взглянем на правильное решение.

Зачем подключать скрипты в WordPress?

Система WordPress отличается широким сообществом разработчиков. Тысячи людей во всем мире создают темы и плагины для WP. Чтобы убедиться в том, что все работает правильно, в WordPress есть специальная функция подключения скриптов. Функция обеспечивает систематический способ загрузки JavaScript и стилей. Используя wp_enqueue_script, вы говорите WordPress, когда загружать скрипт, где загружать его и какие у него имеются зависимости.

Функция позволяет использовать встроенные JavaScript библиотеки, которые поставляются в комплекте с WordPress, чтобы не загружать постоянно сторонние скрипты. Это также помогает снизить время загрузки страницы обойти конфликты с другими плагинами и темами.

Как правильно подключать скрипты в WordPress?

Корректная загрузка скриптов в WordPress происходит достаточно просто. Ниже приведен пример кода, который вам нужно вставить в файл вашего плагина или в файл functions.php вашей темы, чтобы правильно подключить скрипты в WP.

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Объяснение:

Регистрация скрипта начинается с функции wp_register_script(). Эта функция принимает пять параметров:

• $handle – уникальное название вашего скрипта. В нашем случае это my_amazing_script.
• $src – расположение вашего скрипта. Мы используем функцию plugins_url  для получения правильного URL нашей папки с плагинами. Как только WP найдет папку, затем он будет искать файл amazing_script.js в этой папке.
• $deps – зависимости плагина. Поскольку наш скрипт использует jQuery, мы добавим jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если библиотека не была уже загружена ранее.
• $ver – версия скрипта. Этот параметр не является обязательным.
• $in_footer – Мы желаем загрузить наш скрипт в футер, потому мы установим значение переменной true. Если вы хотите загрузить скрипт в хэдере, то в таком случае вам достаточно установить переменную в false.

После передачи всех этих параметров в wp_register_script мы можем просто вызвать скрипт в wp_enqueue_script().

Некоторые могут задаться вопросом – почему мы сначала регистрируем скрипт, и только потом уже его подключаем? Ответ прост: это позволяет другим людям в случае необходимости дерегистрировать скрипт без редактирования кода вашего плагина.

Как правильно подключать стили

По аналогии со скриптами вы можете подключать и стилевые таблицы. Взгляните на пример, представленный ниже:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Заметьте, что мы использовали в примерах один и тот же хук wp_enqueue_scripts для стилей и скриптов. Невзирая на свое название, эта функция работает и для стилей.

В примерах выше мы использовали plugins_url для указания расположение скрипта или файла стилей, который мы хотим подключить. Однако если вы будете использовать функцию подключения скриптов в своей теме, то используйте вместо plugins_url функцию get_template_directory_uri(). Если вы работаете с дочерней темой, то используйте get_stylesheet_directory_uri(). Пример кода:

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Мы надеемся, что эта статья поможет вам правильно добавить Javascript и стили к своим темам или плагинам WordPress.

Источник: www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/