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

Миниатюра к статье Как подключать скрипт в WordPress на страницу правильно 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() — для плагинов.
  • Если вы загружаете ваш скрипт с другого сервера, например, какой-нибудь плагин к библиотеке jQuery, то необходимо вставить URL:
  • Опционально
  • По умолчанию: false

$deps

  • Это массив, содержащий названия скриптов, от которых зависит наш скрипт. Например, ваш скрипт foo.js требует уже загруженной библиотеки jQuery. Данный параметр поставит foo.js в очередь на загрузку только после jQuery.
  • Вы должны поставить false, если не хотите использовать этот параметр, но хотите использовать остальные.
  • Все зависимости должны ставиться в очередь до foo.js
  • Зависимости записываются как массив:
  • Опционально
  • По умолчанию: array()

$ver

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

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

$in_footer

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

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

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

Полный список встроенных в 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 с единственным аргументом — названием нового скрипта.

wp_deregister_script

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

wp_dequeue_script

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Оцените статью
Блог БИТ
Добавить комментарий для Сергей Отменить ответ
  1. Коля

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

    1. Володимир

      Все скрипты проверяются, прежде чем публикуются на сайте. Если вы нашли в каком-либо скрипте ошибку, пожалуйста, сообщите об этом.

  2. Роман

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

    1. Роман

      Спасибо за статью, разобрался с подключением.