Правильное подключение скриптов и стилей в WordPress с помощью постановки в очередь
Многие из нас используют стили, чтобы изменить внешний вид своих веб-сайтов, а также скрипты для улучшения функциональности. Стоит заметить, что способ, которым вы подключаете скрипты в WordPress, играет такую же важную роль, как и контент этих файлов. Вместо того, чтобы просто бросать их в заголовок или в футер, вам нужно использовать функциональность постановки в очередь в WordPress.
В этой статье я расскажу вам, как грамотно добавить скрипты и стили к вашим темам и плагинам, вне зависимости от того, проектируете ли вы что-то во фронтэнде или в бэкэнде.
Что значит «поставить в очередь»?
Постановка в очередь – это дружественный к CMS способ добавления скриптов и стилей для WordPress-сайтов. Многочисленные плагины, которые вы имеете, могут использовать jQuery и другие общие скрипты. Если каждый плагин будет отдельно связываться с этими файлами, произойдет хаос, и весь ваш JavaScript-код может перестать работать.
При помощи постановки скриптов в очередь вы говорите WordPress о том, какие файлы вы хотите добавить, и система уже позаботится о подключении их в хэдере или футере. Вы даже можете определять зависимости ваших скриптов и стилей, и WordPress добавит их в правильном порядке.
Система берет их них всю необходимую информацию, которая требуется ядру, теме или плагину, создает список необходимых скриптов и стилей, и затем выводит их в подходящем месте.
Суть метода
Не важно, как именно вы подключаете свои скрипты, конечный результат всегда будет представлен в виде тегов script или link где-то в HTML-коде вашего сайта. В примере ниже показаны три скрипта и две стилевых таблицы, которые загружаются на сайте:
<!DOCTYPE html> <head> <script type='text/javascript' src='jquery.js'> <script type='text/javascript' src='owl.carousel.js'></script> <link rel='stylesheet' type='text/css' href='reset.css'> <link rel='stylesheet' type='text/css' href='styles.css'> </head> <body> Website content here <script type='text/javascript' src='website-scripts.js'></script> </body> </html>
В плане функциональности это хорошо, но давайте вспомним о том, что WordPress выполняет гораздо больше задач, чем то, что показано выше. На сайте может быть гораздо больше разных скриптов и стилевых таблиц. Поскольку порядок подключения скриптов и стилей играет важную роль, ручное подключение их в хэдере или футере быстро приведет к тому, что вы попросту запутаетесь.
Также стоит сказать, что большинство этих скриптов не отображаются в PHP-коде вашей темы. Все скрипты, которые нужны WordPress и плагинам, должны подключаться через функции wp_head() и wp_footer().
Грамотная постановка в очередь
Постановка в очередь – способ сообщить WordPress о ваших скриптах и их зависимостях. На основе этого WordPress определяет расположение скрипта для вас. Все это выполняется в коде, поэтому вам не нужно волноваться об изменении порядка скриптов при добавлении к ним нового. Давайте возьмем скрипты из предыдущего раздела и поставим их в очередь:
function my_assets() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'reset' ) );
wp_enqueue_style( 'reset', get_stylesheet_directory_uri() . '/reset.css' ) );
wp_enqueue_script( 'owl-carousel', get_stylesheet_directory_uri() . '/owl.carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/website-scripts.js', array( 'owl-carousel', 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );
Код должен быть помещен в файл functions.php вашей темы, дочерней темы или в файл плагина. Обратите внимание, что и скрипты, и стили ставятся в очередь путем подцепления функции к хуку wp_enqueue_scripts.
Первое, что я сделал – поставил в очередь наши стили. Сначала я определил стили темы, хотя они и зависят от сбрасываемых стилей (reset). Это не проблема, поскольку я определил эту зависимость в третьем параметре. Первый параметр – это уникальное имя файла, второе – это его расположение.
Далее я добавил скрипт Owl Carousel. В третьем параметре я определил jQuery в качестве зависимости. Мне не нужно подключать библиотеку jQuery самостоятельно, поскольку она уже встроена в WordPress. Взгляните в кодекс WordPress, чтобы увидеть список встроенных скриптов.
Наконец, я добавил скрипт темы. Наш скрипт зависит от jQuery и Owl Carousel. В действительности вы могли бы просто определить Owl Carousel в качестве зависимости. Поскольку jQuery – зависимость для Owl Carousel, она будет добавлена до скрипта темы в любом случае. Однако мне нравится указывать все зависимости полностью, поскольку это позволяет мне понять больше при рассмотрении кода.
Последняя задача для нас – убедиться в том, что наш скрипт темы загружается в футере. Сделать это можно, определив пятый параметр как true. Четвертый параметр (необязательный) – номер версии скрипта, который я установил в 1.0.
Постановка в очередь в деталях
Теперь, когда вы рассмотрели пример, пришло время немного испачкать руки и залезть «под капот». Давайте посмотрим на все функции и параметры, доступные нам.
Мы использовали две функции: wp_enqueue_script() и wp_enqueue_style(). Обе они принимают пять параметров, первые четыре из которых одинаковы:
wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer ); wp_enqueue_style( $handle, $source, $dependencies, $version, $media );
- handle: имя скрипта или стилевой таблицы. Лучше использовать только строчные буквы и тире. Стоит обязательно задавать уникальное имя.
- source: URL вашего скрипта или стилевой таблицы. Убедитесь в том, что вы используете функции, такие как get_template_directory_uri() или plugins_uri().
- Dependencies: массив дескрипторов и файлов, от которых зависит ваша стилевая таблица или ваш скрипт. Они будут загружены перед вашим поставленным в очередь скриптом.
- Version: номер версии, которая будет добавляться к запросу. Это позволяет гарантировать, что пользователь получает правильную версию, вне зависимости от кэширования.
- in_footer: параметр доступен только для скриптов. Если он установлен в true, скрипт будет загружаться с помощью wp_footer() в самом низу вашей страницы.
- Media: параметр для стилевых таблиц, позволяет вам определять тип носителей, для которых должны выводиться стили. К примеру: screen, print, handheld и т.д.
Надеемся, что объяснение параметров сделало наш пример, приведенный в предыдущем разделе, более ясным. Теперь вы можете играться с собственными скриптами и стилями.
Регистрация файлов
Есть два шага по добавлению какого-либо файла (библиотеки, скрипта, стилевой таблицы и т.д.), однако функция постановки в очередь может это сделать сама и сразу. В техническом плане скрипты и стили сначала регистрируются, а потом уже ставятся в очередь. Регистрация позволяет WordPress узнать о ваших файлах, в то время как постановка в очередь фактически добавляет их к странице. Вот альтернативный способ добавления нашего Owl Carousel:
function my_assets() {
wp_register_script( 'owl-carousel', get_stylesheet_directory_uri() . '/owl.carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'owl-carousel' );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );
Итак, почему это делают в два шага, когда достаточно всего одного? Ответ таков: в некоторых случаях вам не нужно регистрировать скрипт в том же самом месте, где вы его вызываете. Хороший пример – шорткоды. Предположим, что шорткод, который вы создаете, требует подключения некоторого JS-скрипта. Если вы поставите скрипт в очередь при помощи подцепления к хуку wp_enqueue_scripts, он будет загружаться при каждом запросе, даже если шорткод не будет использоваться.
Выход следующий: регистрировать скрипт, используя wp_enqueue_scripts, однако ставить его в очередь уже в функции шорткода. Соответственно, он будет загружаться только в том случае, когда шорткод действительно используется. Даже если шорткод используется многократно, скрипт у нас будет подключаться только один раз.
Функции wp_register_scripts() и wp_register_styles() имеют те же самые параметры, что и их собратья по постановке в очередь. Единственная разница между ними состоит в том, что функции постановки в очередь позволяют вам определять только дескриптор, если этот дескриптор был зарегистрирован.
Удаление скриптов и стилей
В WordPress можно исключать из очереди и отменять регистрацию стилей и скриптов, что делается при помощи следующих функций:
- wp_deregister_script()
- wp_deregister_style()
- wp_dequeue_script()
- wp_dequeue_style()
Эти функции позволяют удалять файлы модульно. Следующий пример показывает, как можно легко удалить jQuery и заменить эту библиотеку на более свежую ее версию.
function my_assets() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/jquery-latest.js' );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );
Однако обычно менять jQuery на новую версию не стоит, поскольку WordPress создана так, чтобы максимально гладко работать с той версией, которая добавлена к системе по умолчанию.
Заключение
Надеемся, что теперь вы видите, почему постановка в очередь – это очень важный процесс. Она позволяет снять с ваших плеч бремя управления зависимостями, дает вам возможность добавлять свои скрипты модульным и очень удобным способом. Постановка в очередь рекомендуется для всех плагинов и тем WordPress. Ваш продукт (бесплатный или платный) не будет принят в хранилище WordPress и на многие премиум-рынки без этого. Постановка в очередь формирует правила «хорошей игры», и потому она должна использоваться всеми разработчиками.
Источник: wpmu.org
