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

Функция wp_enqueue_script – лучшее решение для загрузки JavaScript файлов на сайт с WordPress. Если вы разрабатываете тему, которая использует JavaScript или JS библиотеки, тогда функция wp_enqueue_script – то, что вы должны использовать. Она может вызвать замешательство в тех, кто раньше не использовал эту функцию, поэтому сегодня мы научимся правильно загружать скрипты в свои темы или плагины, используя функцию enqueue.

Зачем нам использовать функцию Enqueue?

Как правило, те, кто ранее занимался версткой простых HTML страничек, привыкли загружать Javascript файлы (включая плагины jQuery) напрямую в теге <head> или в футере документа. Это себя оправдывало в ситуации одной-двух HTML-страничек. Однако, когда при установке WordPress потенциально могут загружаться сотни и тысячи скриптов, такая практика вызывает определенные сложности. Наступает ситуация, которую обычно называют «сдерживание толпы» ваших скриптов.

Так почему собственно не загружать ваши скрипты JavaScript в Шапке или Футере документа? Ответ прост: включая на страницу скрипты таким образом, вы рискуете создать конфликтную ситуацию. Представьте себе, что несколько плагинов попытаются одновременно загрузить одни и те же скрипты или их разные версии.

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

Используя функцию wp_enqueue_script, вы получаете контроль над тем, когда и где загружать скрипты JavaScript. Вы можете даже решить будут ли они грузиться в теге <head> или в подвале документа.

Понимание функции wp_enqueue_script

Функция wp_enqueue_script занимается тем, что загружает скрипты на ваш сайт WordPress. Эту функцию необходимо прописать в файле functions.php.

Итак, давайте взглянем на структуру wp_enqueue_script:

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

$handle

Название файла для загрузки. Записывается в нижнем регистре.
Обязательно
По умолчанию: none

$scr

Полный путь или URL к файлу скрипта

Если вы загружаете локально с вашего сервера, то вы не должны жестко прописывать этот путь (с доменом). Наилучшее решение — использовать get_template_directory_uri() для тем и plugins_url() — для плагинов.

1 2	<?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ); /* get_template_directory_uri() / ?> <?php wp_enqueue_script( 'myscript', plugins_url( '/myPlugin/js/myScript.js', __FILE__ ) ); / plugins_url */ ?>

Если вы загружаете ваш скрипт с другого сервера, например, какой-нибудь плагин к библиотеке jQuery, то необходимо вставить URL:

1

<?php wp_enqueue_script( 'myscript', 'https://www.url/of/file/script.js' ); ?>
Опционально
По умолчанию: false

$deps

Это массив, содержащий названия скриптов, от которых зависит наш скрипт. Например, ваш скрипт foo.js требует уже загруженной библиотеки jQuery. Данный параметр поставит foo.js в очередь на загрузку только после jQuery.
Вы должны поставить false, если не хотите использовать этот параметр, но хотите использовать остальные.

1

<?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js', false, '3.1' ); ?>
Все зависимости должны ставиться в очередь до foo.js

Зависимости записываются как массив:

1 2	<?php wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'); ?> <?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ), array( 'jquery') ); ?>

Опционально
По умолчанию: array()

$ver

Версия скрипта
Версия будет дописываться к URL скрипта через знак «?». Может принимать следующие значения: номер версии, false или NULL.
В случае false, будет использоваться версия WordPress
В случае NULL, к URL ничего дописываться не будет (не рекомендуется).
Если вы не используете параметр $ver, по умолчанию будет дописываться версия WordPress.

1

<?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ), false, '1.0' ); ?>
Опционально
По умолчанию: false

$in_footer

От этого зависит, где будет прописываться скрипт на странице.
Принимает логическое значение true или false.

По умолчанию ваш скрипт пропишется в теге <head>. С точки зрения производительности, лучше прописывать загрузку скриптов перед закрывающим тегом <body>, в этом случае функции надо передать аргумент «true«.

<?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js', array(), 'version', false ); /* расположит в head */ ?>

<?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js', array(), 'version', true ); /* расположит перед закрывающим тегом body */ ?>

Опционально
По умолчанию: false

Как видите, кроме параметра $handle, все остальные параметры являются необязательными. На первый взгляд, это может показаться странным, особенно, в случае параметра $scr. Как в таком случае WordPress поставит в очередь скрипт без полного пути к нему?

Причина в том, что WordPress поставляется уже со встроенными скриптами. Например, библиотека jQuery является частью ядра WP, и разработчики движка сделали способ добавления скриптов на страницу невероятно простым. Все, что требуется — передать функции название желаемого скрипта:

1	<?php wp_enqueue_script( 'jquery' ); ?>

Полный список встроенных в WordPress популярных скриптов смотрите в кодексе.

Использование wp_enqueue_script с вашей темой WordPress

Давайте рассмотрим ситуацию использования wp_enqueue_script с вашей темой WordPress.

Самое важное

Есть функции WordPress, о которых вам нужно знать, прежде чем вы сможете начать использовать enqueing должным образом.

wp_register_script

Функция wp_register_script используется для регистрации ваших скриптов в WordPress. Что это означает? Благодаря регистрации в системе скриптов, вы сможете использовать их с функцией wp_enqueue_script, как если бы они были встроены в систему изначально.
Параметры функции wp_register_script такие же как и у wp_enqueue_script, поэтому нет нужды их повторять.
Просто вызовете функцию wp_register_script, передав ей в качестве параметров те же аргументы, что и для wp_enqueue_script.

Зарегистрировав таким образом новый скрипт в системе, вызовите функцию wp_enqueue_script с единственным аргументом — названием нового скрипта.

1 2	<?php wp_register_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ), array(), 'version', false ); ?> <?php wp_enqueue_script( 'myscript' ); ?>

wp_deregister_script

Функция wp_deregister_script, наоборот, «снимает» регистрацию скрипта.
Все, что надо сделать — передать название скрипта.

1

<?php wp_deregister_script( 'myscript' ); ?>

wp_dequeue_script

Функция wp_dequeue_script убирает скрипт из очереди загрузки.
Все, что надо сделать — передать название скрипта.

1

<?php wp_dequeue_script( 'myscript' ); ?>

Загрузка ваших скриптов

Самый простой способ загрузить ваш скрипт — это вызвать функцию wp_enqueue_script в файле шаблона.

1 2	<?php wp_enqueue_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ), false, '1.0' ); ?> <?php wp_head(); ?>

Данный способ прост, но не элегантен. Лучшей практикой считается воспользоваться файлом function.php для регистрации и постановки в очередь скриптов. Для этого создайте пользовательскую функцию, а затем используйте add_action для инициализации этой функции.

<?php

function load_my_scripts() {

wp_register_script( 'myscript', get_template_directory_uri().'/js/myScript.js'), false, '1.0', true );

wp_enqueue_script( 'myscript' );

}

add_action( 'wp_enqueue_scripts', 'load_my_scripts' );

В строке 2 создаем пользовательскую функцию load_my_scripts
В строке 3 регистрируем скрипт myscript
В строке 4 ставим в очередь myscript
В строке 6 инициализируем функцию load_my_scripts

Допустим, наш новый скрипт зависит от новейшей версии библиотеки jQuery, а в поставляемой версии WordPress содержится устаревшая версия библиотеки. Тогда мы:

<?php

function load_my_scripts() {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');

wp_enqueue_script( 'jquery' );

wp_register_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ), array( "jquery" ), '1.0', true );

wp_enqueue_script( 'myscript' );

}

add_action( 'wp_enqueue_scripts', 'load_my_scripts' );

В строке 3 снимаем регистрацию устаревшей версии jQuery, поставляемой с WordPress по умолчанию
В строке 4 регистрируем новую или другую версию jQuery
В строке 5 ставим в очередь новую версию jQuery

Хорошей практикой разработки тем и плагинов под WordPress считается проверка на существование пользовательской функции. Это на случай, если такая функция уже существует, чтобы мы ее случайно не переопределили:

<?php

if ( !function_exists( 'load_my_scripts' ) ) {

// наш код выше

function load_my_scripts() {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');

wp_enqueue_script( 'jquery' );

wp_register_script( 'myscript', get_template_directory_uri().'/js/myScript.js' ), array( "jquery" ), '1.0', true );

wp_enqueue_script( 'myscript' );

}

add_action( 'wp_enqueue_scripts', 'load_my_scripts' );

Данный код проверит, существует ли функция с таким же названием, и, если — нет, создаст её.

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

Мы должны проверить, с помощью функции is_admin(), является ли загружаемая страница административной и, если нет, — загрузить скрипт.

<?php

if ( !is_admin() ) {

// наш код выше

}

Теперь функция выглядит следующим образом:

<?php

if ( !function_exists( 'load_my_scripts' ) ) {

function load_my_scripts() {

if ( !is_admin() ) {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' );

wp_enqueue_script( 'jquery' );

wp_register_script( 'myscript', get_template_directory_uri().'/js/myScript.js'), array("jquery"), '1.0', true );

wp_enqueue_script( 'myscript' );

}

add_action('wp_enqueue_scripts', 'load_my_scripts');

Теперь все в порядке. Это готовый шаблон для постановки в очередь пользовательских скриптов с вашей темой WordPress.

Заключение

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

4 комментария

Коля:

30.09.2015 в 23:11

Напишу, дабы другие не мучились. В скриптах куча ошибок, типа лишних скобок и тд. Автор или полный ноль или тупо спер статью у кого-то не проверив данные. Не тратьте время.

Войдите, чтобы ответить
- Сергей:
  
  17.10.2015 в 20:32
  
  Все скрипты проверяются, прежде чем публикуются на сайте. Если вы нашли в каком-либо скрипте ошибку, пожалуйста, сообщите об этом.
  
  Войдите, чтобы ответить
Роман:

21.01.2016 в 00:53

Одна скобочка в этой строке, после myScript.js’) явно лишняя:
wp_register_script( ‘myscript’, get_template_directory_uri().’/js/myScript.js’), array(«jquery»), ‘1.0’, true );

Войдите, чтобы ответить
- Роман:
  
  21.01.2016 в 00:56
  
  Спасибо за статью, разобрался с подключением.
  
  Войдите, чтобы ответить