Using javascript in wordpress plugin

Как добавить пользовательский 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 – это использовать тег в файл шаблона header.php или footer.php . Но лучше этого не делать. Так как WordPress использует определенную последовательность загрузки ресурсов, которую необходимо соблюдать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы добавить скрипт в хедер, нужно определить собственный дескриптор (‘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 для вывода скрипта в шаблоне хедера:

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

Скрипты, добавленные с помощью этих хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования 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 является рекомендуемым методом. Эти плагины гарантируют, что скрипты будут загружаться в правильном порядке.

Источник