Что такое WP Enqueue и как его использовать?

Опубликовано: 2017-10-28

Когда вы впервые изучаете HTML, единственный способ, которым вы знаете, как добавить какой-либо вид интерактивности, - это использовать теги сценария в верхнем или нижнем колонтитуле страницы, чтобы установить тип и источник внешнего файла JavaScript. (Или , если вы действительно только обучение, вся функция JS между тегами скрипта прямо в самом теле. Это хорошо для обучения, но это довольно плохая практика , когда вы двигаетесь в передовые разработки WordPress. Введите функцию Епдиеей.

После того, как вы перейдете к простым одностраничным веб-сайтам, эти практики для начинающих могут создать действительно неприятные ситуации. По мере того, как вы начинаете добавлять все больше и больше JavaScript, ваш сайт становится все медленнее и медленнее. Обновление занимает больше времени. В конце концов, вы сделали большую кучу JavaScript-getti, и как бы вы ни старались, эту кучу лапши не распутать.

К счастью, вы можете использовать функцию постановки в очередь в WordPress для добавления стилей и скриптов, о которых CMS позаботится за вас. Все беспорядки делаются за вас. Хотя это не так просто, как прямая вставка скрипта или стилей, которые вы хотите, в верхний или нижний колонтитул каждой страницы, это правильный способ справиться с этим. WordPress не слишком самоуверен, определенно есть ряд лучших практик, о которых вам следует знать.

И wp_enqueue_scripts находится в авангарде этих практик.

Подумаешь?

Основная причина, по которой вы захотите использовать wp_enqueue, - обеспечить бесперебойную и быструю работу вашего сайта. Скорость страницы важна, и использование одних и тех же скриптов и стилей снова и снова не помогает. Вообще.

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

Это. Потрясающие.

Еще более удивительно то, что использование метода enqueue заставляет сам WordPress вставлять теги _script_ в верхний и нижний колонтитулы, где они находятся, автоматически, загружая их без необходимости вводить их на каждой странице отдельно.

Синтаксис и параметры WP Enqueue

Поставить скрипты в очередь не так уж и сложно. Если вы достаточно сообразительны, чтобы в первую очередь работать с JavaScript, функции PHP, которые вы используете для постановки в очередь, будут легкими.

В типичном теге сценария вы либо напрямую импортируете внешний файл .js, либо вставляете весь длинный фрагмент кода между тегами. (Это также то, что вы делаете, если вставляете что-то в модуль кода Divi или в виджеты WP Custom HTML или Text).

Вам просто нужно знать несколько основных параметров и синтаксис.

Кодекс дает это как базовый код постановки в очередь: 

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

В общем, разбить на полезные биты по параметрам довольно просто.

  • wp_enqueue_script () - это функция, которая помещает весь код на страницу, где он находится.
  • $ handle - это уникальное имя самого скрипта.
  • $ src представляет собой URL-адрес фактического файла .js, который вы помещаете в очередь.
  • $ deps - это дескрипторы $ любых требуемых зависимостей.
  • $ ver будет номером версии. Если ничего не указано, вы автоматически добавите установочную версию WP.
  • $ in_footer или $ in_header сообщает WordPress, куда поместить ваш скрипт.

Полную документацию по постановке скриптов в очередь можно увидеть в Кодексе.

Внимание, студенты: начинается регистрация WP!

Помимо _wp_enqueue__, в WP есть удобный метод под названием _wp_register__. Оба метода используют одни и те же параметры и синтаксис, так что с парой вы действительно получите выгодную сделку. По сути, регистрация скрипта - это то же самое, что присвоение имени функции в JavaScript.

Хотя это и не обязательно, регистрация ваших скриптов может значительно упростить вашу жизнь, потому что вам не придется позже объявлять их как зависимости. Они уже будут зарегистрированы. Следовательно… _wp_register__. После регистрации скрипта вы можете вызвать его по его дескриптору $ , как вы увидите в примере ниже.

Вы зарегистрируете свой код следующим образом: 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

Затем, когда он вам снова понадобится, вы всегда можете перезвонить так:

wp_enqueue_script( 'jquery' );

Кроме того, регистрация означает, что вам не нужно загружать скрипт, даже если он не нужен. В WPMU есть отличный пример создания шорткода: если вы зарегистрируете скрипт в шорткоде, который использует _wp_enqueue__, он будет использоваться только тогда, когда шорткод есть. Однако, если вы вызываете его только путем постановки в очередь, он будет загружен, даже если шорткод не используется.

Вы можете прочитать все о методе в Кодексе.

Кроме того, авторы плагинов должны ставить скрипты в очередь, если они хотят, чтобы они были включены в репозиторий WordPress.org, так что, если это у вас на тарелке ... лучше встать в очередь.

Собираем вместе

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

Обычно вы используете что-то вроде этого: 

<script type="text/javascript" src="jquery.js"></script>

Как только вы узнаете, как использовать enqueue_scripts_ , вы увидите нечто подобное: 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

Теперь обратите внимание на приведенный выше код, как он использует функцию add_scripts () _, которая уже является частью WordPress, для определения порядка следующих нескольких шагов. Сначала функция wp_register_ получает все указанные детали и помещает скрипт в нижний колонтитул страницы, а затем использует wp_enqueue, чтобы, наконец, вызвать его, когда все настроено.

Заключение

Это действительно все, что нужно сделать. Что ж, это неправда - enqueue - довольно прочная часть WP. Но это основы, которые помогут вам делать с WordPress больше, чем вы, возможно, делали раньше.

Основы, которые мы все усвоили, когда начинали разработку веб-приложений, по-прежнему работают, но это не всегда лучший способ делать что-то. Отчасти красота WordPress, построенного на PHP, заключается в том, что вы можете привнести такую ​​логику в свою работу, сохраняя при этом ту же базовую структуру и рабочий процесс, что и в любом случае.

Миниатюра статьи: hanss / shutterstock.com