Если вы являетесь WordPress-разработчиком, вы, возможно, уже использовали ранее хук wp_print_scripts для добавления необходимого встроенного JavaScript-кода. В качестве альтернативы вы могли использовать wp_localize_script() для добавления встроенных скриптов. Однако знали ли вы, что не так давно в WordPress появилась новая функция для добавления встроенного JavaScript-кода? Начиная с WordPress 4.5+, вы можете использовать функцию wp_add_inline_script().
Приятная особенность этой новой функции заключается в том, что вы можете связать ее с любым зарегистрированным скриптом и включить не только JavaScript-переменные. В этой статье мы расскажем, как работает wp_add_inline_script(), почему он лучше, чем любой другой метод встраивания, и как поддерживать старые версии (до 4.5) WordPress. Попутно мы приведем пример кода, который вы можете настроить и использовать в своих собственных проектах WordPress.
Встраивание скриптов через wp_print_scripts
В прошлом одним из способов добавления встроенных скриптов во фронтэнд было использование хука wp_print_scripts (и/или admin_print_scripts для области администратора). Вот пример функции:
Эта функция задает три переменные на основе опций плагина, а затем выводит их в области head (во фронтэнде) с помощью хука wp_print_scripts. Чтобы добавить скрипт в область администратора, необходимо заменить wp_print_scripts на admin_print_scripts и вызвать его.
Плюсы
Позволяет добавлять любые скрипты в секцию head ваших страниц. Нет ограничений на добавляемый код; вы можете добавлять JS-переменные, условия, методы, функции и все остальное.
Минусы
Нет способа связать добавленный код с любым зарегистрированным скриптом. Вы можете управлять относительным расположением добавляемого кода через параметр $priority в функции add_action(). Однако выводимый код в основном зависит от других факторов, потому нет никакого реального, последовательного способа управления расположением вывода.
Встраивание скриптов через wp_localize_script()
Еще один распространенный метод для встраивания произвольного JavaScript-кода – функция wp_localize_script(). Эта функция предназначена для локализации переменных JavaScript с целью использования в языковых переводах. Однако многие разработчики применяют ее для добавления встроенных скриптов. Вот пример:
Здесь функция подключает наш JavaScript-файл и задает handle/ID для shapeSpace_script. Затем определяется ассоциативный массив, содержащий наши переменные. И, наконец, переменные передаются в wp_localize_script() для встраивания вместе с зарегистрированным скриптом shapeSpace_script. В итоге мы можем использовать любую из добавленных JS-переменных (shapeSpace.var1 и т.д.).
Плюсы:
Метод хорош тем, что он разрешает (читай: требует) ассоциацию с существующим/зарегистрированным скриптом. Таким образом, он обеспечивает согласованный способ управления относительным расположением вывода нашего произвольного скрипта.
Минусы:
Единственный реальный недостаток данной техники заключается в том, что вы можете добавлять только JavaScript-переменные. Если вам нужно добавить другие типы встроенных скриптов – условные выражения, функции и т.д., — это невозможно сделать с помощью wp_localize_script.
Идеальный вариант: встраивание скриптов через wp_add_inline_script()
Теперь, когда мы рассмотрели плюсы и минусы двух альтернативных техник встраивания скриптов, давайте коснемся лучшего способа, основанного на новой функции wp_add_inline_script(). На практике эта функция похожа на wp_localize_script(), но может гораздо больше. Вот пример:
Мы можем делать следующее:
- Добавлять любой JavaScript-сниппет
- Ассоциироваться с любым зарегистрированным скриптом.
Мы имеем полный контроль над контентом скрипта и его относительным расположением. Также обратите внимание на третий параметр, $position. Он позволяет нам включать $script либо до (before), либо после (after) $handle, shapeSpace_script.
Плюсы:
Полный контроль над выполнением скриптов.
Минусы:
Нет.
Пример встроенного скрипта
Мы можем создать технику добавления встроенных скриптов, которая будет работать с любой версией WordPress. К примеру, я использую следующую методику с 3 функциями в своем плагине:
В итоге мы имеем три простых функции. Сначала мы подключаем наш JavaScript-файл. Затем мы вызываем нашу вторую функцию, которая добавляет наш встроенный скрипт с помощью wp_add_inline_script() для WordPress 4.5 и выше. Наконец, третья и последняя функция – fallback для старых версий WP. Если версия WP ниже 4.5, то в таком случае будет использоваться добавление встроенных скриптов через wp_print_scripts. Эта функция прекрасно работает вплоть до версии 2.1.
Источник: https://digwp.com