Что такое wp_enqueue (очередь скриптов) в WordPress

Для добавления интерактивности на сайт в основном используются скрипты JavaScript. Они же используются и на сайтах WordPress. Если у вас небольшой сайт, таких скриптов может быть очень мало, но по мере роста сайта их может быть очень большое количество. Когда вы начинаете добавлять все больше и больше JavaScript, ваш сайт становится все медленнее и медленнее. Плюс их обновление занимает все больше времени. Этот «клубок» становится сложно распутать.

К счастью, в WordPress вы можете использовать функцию постановки в очередь скриптов (wp_enqueue), чтобы правильно добавлять CSS-стили и JavaScript скрипты. После этого CMS WordPress наведет порядок в этом хаосе. В сегодняшней статье мы рассмотрим данный функционал и посмотрим на практическое применение функции wp_enqueue_script.

Основные моменты функции wp_enqueue_script

Основной причиной, по которой важно использовать функционал очереди скриптов (wp_enqueue) в WordPress – это обеспечение бесперебойной и быстрой работы вашего сайта, а также правильное подключение скрипта (JavaScript файла) на странице. Все что нужно, это написать небольшой фрагмент кода, а затем использовать wp_enqueue для вызова нужного скрипта.

Использование метода очереди заставляет WordPress автоматически вставлять теги <script> в нужном месте. Это также позволяет правильно объединять JavaScript файлы в один файл скриптов, а также помогает избавляться от конфликтов скриптов (когда нарушается их порядок подключения).

Синтаксис и параметры метода wp_enqueue_script

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

Для этого вам достаточно использовать функцию wp_enqueue_script, знать ее синтаксис, а также правильно использовать основные ее параметры.

Синтаксис функции очереди скриптов выглядит так:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Здесь используются следующие параметры:

wp_enqueue_script() – это функция, которая помещает скрипт на нужную страницу.
$handle – это уникальное имя (системное название) для самого JavaScript скрипта.
$src – это ссылка на файл .js, который вы ставите в очередь.
$deps – это массив системных имен скриптов, от которых зависит подключаемый скрипт. Т.е., здесь указываются скрипты, которые должны быть загружены до подключаемого скрипта.
$ver – это номер версии скрипта. Если вы ничего не укажете для этого параметра, будет автоматически использована текущая версия WordPress.
$in_footer – этот параметр сообщает WordPress, куда поместить ваш скрипт: если указать true, тогда скрипт подключится в футере (подвале) сайта, если false, тогда скрипт подключится в шапке (хедере) сайта.

В дополнение к wp_enqueue, в WordPress используется метод, который называется wp_register. Оба метода используют одни и те же параметры и синтаксис. С помощью второй функции вы регистрируете скрипт в системе, а с помощью wp_enqueue ставите этот скрипт в очередь подключения. Правильное подключение скриптов подразумевает сначала регистрацию их в системе, а затем вызов. Как только скрипт зарегистрирован с помощью wp_register_script, вы можете поставить его в очередь с помощью функции wp_enqueue_script по его параметру $handle, как вы увидите в примере ниже.

Этап №1: регистрация скрипта в системе:

wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.0.0.min.js', false, null, true);

Этап №2: вызов скрипта по его системному имени с использованием функции очереди скриптов:

wp_enqueue_script( 'jquery' );

Практический пример подключения jQuery в WordPress

Реализация кода проста. Просто вставьте фрагмент кода, который представлен ниже, в файл functions.php активной темы, и WordPress обработает все остальное.

Правильное подключение jQuery через CDN репозиторий выглядит так:

add_action('wp_enqueue_scripts', 'add_jquery_script');
function add_jquery_script(){
 // регистрируем скрипт в системе
 wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.0.0.min.js', false, null, true);
 // ставим скрипт в очередь на подключение
 wp_enqueue_script( 'jquery' );
}

Подобным образом подключаются и CSS стили, только здесь используются методы wp_register_style() и wp_enqueue_style().

Теги: WordPress