[![Как правильно добавить скрипты и стили в WordPress 1](https://coma.lv/wp-content/uploads/2016/08/enqueue.webp)](https://coma.lv/wp-content/uploads/2016/08/enqueue-1030x368.webp)

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

Aug 28, 2016/by [Vadim Pavlovich](https://coma.lv/ru/author/djcoma/)

Недавно мы рассматривали код для одного из плагинов, что прислал один из наших пользователей. Плагин работал отлично, но разработчик не учёл некоторых аспектов при загрузке с внешних источников 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. Для вопросов и комментариев пишите нам в комментарии.

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

- [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
- [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)
- [wp_enqueue_scripts](https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/)

---

*Наша специальность – разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации – [vadim@coma.lv](mailto:vadim@coma.lv), [+371 29394520](tel:+37129394520)*

---