Как добавить пользовательский JavaScript на WordPress-сайт

Существует пару методов добавления пользовательского JavaScript в WordPress. В этом руководстве мы рассмотрим каждый из них.

Добавление пользовательского JavaScript на WordPress

Чтобы добавить собственный JavaScript-код на WordPress- веб-сайт, необходимо использовать:

  1. Разные типы плагинов.
  2. Возможности и хуки WordPress в файле functions.php:
  • хуки действий wp_head и wp_footer;
  • хуки действий wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts;
  • функцию WordPress wp_enqueue_script().

Чего не необходимо делать

Самый простой метод добавить пользовательский скрипт в WordPress – это использовать тег <script> в файл шаблона header.php или footer.php. Но лучше этого не делать. Поскольку WordPress использует определенную последовательность загрузки ресурсов, которую надо соблюдать.

Вставка пользовательского JavaScript-кода в шаблон хедера или футера может вызвать сбои в работе тем, плагинов или ядра WordPress.

Так что никогда не добавляйте приведенный ниже код в файл header.php или footer.php:

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

1. Использование плагина для добавления пользовательского JavaScript-кода

Использование плагина рекомендуется, если:

  • не хотели бы прямо редактировать исходные файлы CMS.
  • Необходимо добавить независимый от используемой темы оформления JavaScript-код.

1.1. Плагины для редактирования header.php и footer.php

Первый вариант – использование плагина для редактирования шаблонов header.php и footer.php темы оформления WordPress. Если необходимо добавить скрипты, которые загружаются до содержимого страницы, надо отредактировать шаблон шапки. Скрипты, которые загружаются после содержимого веб-страницы, добавляются в шаблон футера.

Плагин Insert Headers and Footers может редактировать шаблоны хедера и футера. Он добавляет скрипты к хукам действий wp_head или wp_footer соответственно.

Вы можете вставить любой скрипт в два поля ввода ввода. Далее включить скрипты при помощи тега <script></script>. Вы также можете использовать этот плагин для добавления пользовательского CSS кода в шаблон заголовка, заключив его в тег <style></style>.

Как добавить пользовательский JavaScript на WordPress-сайт

1.2. Плагины для добавления пользовательского JavaScript

Также можно без труда использовать плагины добавления пользовательского JavaScript. Большинство из них также используют хуки действия wp_head и wp_footer. Но они предлагают больше настроек конфигурации.

К примеру, плагин Simple Custom CSS and JS может определять постоянную ссылку для пользовательских файлов JavaScript, сохранять их в папку wp-content/, управлять скриптами как пользовательским типом записей и многое иное.

Как добавить пользовательский JavaScript на WordPress-сайт

1.3. Скрипты, специфичные для плагинов

Создатели популярных JavaScript-библиотек часто публикуют бесплатные плагины в репозитории WordPress.org для добавления скриптов. Подобные плагины поставляется со встроенными настройками конфигурации для конкретной JavaScript-библиотеки.

Например, плагин GA Google Analytics может интегрировать Google Analytics на веб-сайт напрямую из панели администрирования WordPress. Он поставляется со встроенными возможностями, специфичными для скрипта Google Analytics.

Как добавить пользовательский JavaScript на WordPress-сайт

2. Редактирование файла functions.php дочерней темы оформления

Также можно использовать встроенные в WordPress возможности и хуки действий. В этом случае надо отредактировать файл functions.php и вручную загрузить скрипт на используемый сервер. Также желательно создать дочернюю тему оформления для сохранения параметров.

Пользовательские скрипты загружаются в корневую папку дочерней темы оформления. Для нескольких скриптов можно легко создать для них папку scripts.

Далее добавьте PHP-код, который ставит в очередь или отображает пользовательский JavaScript-код, в functions.php дочерней темы оформления. Это можно сделать через меню Внешний вид> Редактор тем в панели администрирования WordPress.

Как добавить пользовательский JavaScript на WordPress-сайт

2.1. Добавление собственных скриптов в очередь при помощи возможности wp_enqueue_script()

WordPress Theme Handbook рекомендует использовать для добавления JS-скриптов возможность wp_enqueue_script(). Она ставит пользовательские скрипты в очередь на загрузку в правильном порядке.

При помощи wp_enqueue_script() можно добавить собственный JavaScript в шаблоны хедера и футера. По умолчанию функцию размещает скрипты в раздел <head> страницы.

Чтобы добавить скрипт в хедер, необходимо определить собственный дескриптор(‘custom’ в примере, приведенном ниже) и путь к скрипту. А также использовать возможность get_stylesheet_directory_uri() для получения URI каталога дочерней темы оформления.

функцию add_action() добавляет пользовательскую возможность tutsplus_enqueue_custom_js() в хук действия wp_enqueue_scripts. Он ставит в очередь пользовательские скрипты.

/* Пользовательский скрипт без зависимостей, включенный в хедере */add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');function tutsplus_enqueue_custom_js() { wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');}

Функцию WordPress wp_enqueue_script() и хук действия wp_enqueue_scripts имеют почти одинаковые имена. Но это различные способы.

Возможность wp_enqueue_script() можно без проблем использовать для добавления пользовательского JavaScript-кода в шаблон футера. Для этого потребуется определить дополнительные настройки:

  1. зависимости: array(), поскольку у нас пока нет никаких зависимостей;
  2. версия скрипта: false, поскольку мы не хотим добавлять номера версий;
  3. true, поскольку мы переключаемся на шаблон футера, который не будет настройкою по умолчанию.
/* Пользовательский скрипт без зависимостей, включенный в футере */add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');function tutsplus_enqueue_custom_js() { wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array(), false, true);}

Если пользовательский скрипт имеет в себя зависимости, надо добавить их в настройка array() возможности wp_enqueue_script(). Есть пару популярных скриптов и библиотек, которые зарегистрированы ядром WordPress. Их можно добавить, используя зарегистрированный дескриптор (‘jquery’ в примере ниже).

/* Пользовательский скрипт с jQuery в виде зависимости, включенный в футере */add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');function tutsplus_enqueue_custom_js() { wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array('jquery'), false, true);}

Для добавления зависимости, которая не зарегистрирована в WordPress, необходимо использовать собственный дескриптор. Но перед данным надо зарегистрировать его и поставить зависимость в очередь при помощи возможности wp_enqueue_script().

Чтобы запустить скрипт в панели администрирования, используйте хук действия admin_enqueue_scripts в возможности add_action(). Для страницы входа в систему надо использовать хук login_enqueue_scripts. Он добавляет пользовательские скрипты в очередь только для страницы входа.

2.2. Отображение встроенного скрипта при помощи хуков действий wp_head и wp_footer

Также можно легко добавить скрипты на WordPress-сайт при помощи хуков действий wp_head и wp_footer. Они отображают пользовательские шрифты только в шаблоне хедера или футера. Данные хуки можно без проблем использовать для добавления встроенных скриптов, но не для внешних.

Пример использования хука wp_head для вывода скрипта в шаблоне хедера:

<?php/* Встроенный скрипт отображается в хедере */add_action('wp_head', 'tutsplus_add_script_wp_head');function tutsplus_add_script_wp_head() {?> <script>           console.log("I'm an inline script tag added to the header.");        </script>    <?php}

Пример использования wp_footer для вывода скрипт в шаблоне футера:

<?php/* Встроенный скрипт отображается в футере */add_action('wp_footer', 'tutsplus_add_script_wp_footer');function tutsplus_add_script_wp_footer() {?>        <script>            console.log("I'm an inline script tag added to the footer.");        </script>    <?php}

Скрипты, добавленные при помощи данных хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования WordPress, надо использовать хуки действия admin_head и admin_footer в возможности add_action().

Чтобы запускать скрипты на странице входа в систему, используйте хуки действия login_head и login_footer.

Рассмотренные плагины Insert Headers and Footers и Simple Custom CSS and JS могут использовать wp_head и wp_footer не только для встроенных скриптов, но и для внешних файлов .js. Но данные плагины запускают дополнительные проверки, обеспечивающие соблюдение последовательности загрузки WordPress. Чтобы добавить скрипты вручную, лучше использовать возможность wp_enqueue_script().

Заключение

Использование плагина для добавления пользовательского JavaScript будет рекомендуемым способом. Данные плагины гарантируют, что скрипты будут загружаться в правильном порядке.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *