Недавно мы рассматривали код для одного из плагинов, что прислал один из наших пользователей. Плагин работал отлично, но разработчик не учёл некоторых аспектов при загрузке с внешних источников JavaScript. WordPress имеет систему очереди для добавки внешних скриптов и стилей, что помогает предотвратить конфликты плагинов. Так как большинство держит более одного плагина на своём сайте, то будет полезным прочитать данную статью. Мы покажем вам, когда правильно добавлять JavaScript и стили в WordPress. Это будет крайне полезно всем, кто начал осваивать разработку плагинов и тем для WordPress.
Ошибка
У WordPress есть функция wp_head , которая позволяет загрузить что угодно в шапку вашего сайта. Для добавления своих скриптов, многие используют данный код:
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Хоть это и просто, но это неверный способ добавления скриптов в WordPress. Для примера, если вы загружаете jQuery вручную и другой плагин тоже грузит jQuery, то получается, что jQuery загружается дважды. Также две разные версии могут инициировать конфликт.
Давайте посмотрим, как нужно делать.
Зачем ставить скрипты в очередь?
У WordPress имеет большое сообщество разработчиков. Тысячи людей по всему миру придумывают темы и пишут плагины для WordPress. Чтобы убедиться, что всё работает верно и никто не наступает друг другу на ногу, WordPress имеет специальную функцию очереди для скриптом. Функция предоставляет систематическую загрузку JavaScript и стилей. Используя функцию wp_enqueue_script , вы говорите WordPress когда нужно грузить скрипт, где грузить и при каких условиях.
Это позволяет всем использовать встроенные библиотеки JavaScript, которые идут в комплекте с WordPress, а не загружать одни и те же скрипты по нескольку раз. Это также позволяет сократить время загрузки страницы и избежать конфликтов с остальными темами и плагинами.
Как правильно вставить скрипты в очередь в WordPress
Правильная загрузка скриптов в WordPress крайне проста. Внизу дан пример, который вы можете скопировать в файл плагина или в файл темы functions.php , чтобы правильно загружать скрипты в WordPress.
<?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(). Данная функция принимает 5 параметров:
- $handle – Удерживать уникальное имя вашего скрипта. Мы назвали наш скрипт “my_amazing_script”
- $src – src это местоположение вашего скрипта. Мы используем функцию plugins_url чтобы получить правильный URL папки нашего плагина. Как только WordPress найдёт его, он также найдёт скрипт с названием amazing_script.js в этой папке.
- $deps – 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 для уточнения местоположения скрипта или стиля, который мы хотим поставить в очередь. Однако, если вы используете функцию для очередей в вашей теме, то используйте 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. Для вопросов и комментариев пишите нам в комментарии.
Дополнительные ресурсы:
Наша специальность – разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации – [email protected], +371 29394520
