Как правильно добавлять JavaScript и стили в WordPress

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

Ошибки

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

<?php
add_action('wp_head', 'devise_bad_script');
function devise_bad_script() {
echo 'А здесь - jQuery';
}
?>

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

Давайте посмотрим на правильный способ это сделать.

Зачем поочередно подгружать скрипты в WordPress?

У WordPress сильное сообщество разработчиков. Тысячи людей по всему миру разрабатывают тему и пишут плагины под ВордПресс. Для того, чтобы убедиться в том, что все работает правильно, и никто не наступает друг другу на пятки, в WordPress появилась функция последовательной загрузки скриптов. Она предоставляет систематический метод загрузки ява-скриптов и стилей. Используя функцию wp_enqueue_script, вы говорите WordPress когда загружать скрипт, где его загружать и какие у него зависимости.

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

Кака правильно поочередно подгружать скрипты в WordPress

Загружать скрипты в WordPress правильно очень просто. Ниже пример кода, который вы должны будете вставить в файл вашего плагина или в тему в файл functions.php для того, чтобы корректно подгружать скрипт в ВП.

<?php

function devise_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', 'devise_adding_scripts' );  
?>

Пояснение:

Мы начали с регистрирования нашего скрипта с помощью функции wp_register_script(). Она принимает 5 параметров:

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

После указания всех параметров в wp_register_script, мы просто вызываем скрипт в wp_enqueue_script(), что и заставит его выполняться.

Теперь некоторые из вас могут задать вопрос, зачем выполнять дополнительный шаг с регистрированием скрипта сначала, а затем его очередное выполнение. Ну, затем, что это позволит другим владельцам сайта отменить регистрацию скрипта, если это понадобится БЕЗ модифицирования кода вашего плагина.

Как правильно поочередно подгружать стили

Также как и скрипты, вы можете подгружать таблицы стилей. Посмотрите на пример ниже:

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

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

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

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

<?php

function devise_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', 'devise_adding_scripts' );  
?>

Надеемся, что эта статья помогла вам изучить как правильно добавлять JavaScript и стили в темы и плагины WordPress.

Дополнительные ресурсы:

• wp_enqueue_script
• wp_register_script
• wp_enqueue_scripts