Для добавления интерактивности на сайт в основном используются скрипты 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().
