club762.ru
Если вы являетесь 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 для области администратора). Вот пример функции:
// inline script via wp_print_scripts
function shapeSpace_print_scripts() {
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09var%20var1%20%3D%20%3C%3Fphp%20echo%20json_encode('var1')%3B%20%3F%3E%3B%0A%09%09var%20var2%20%3D%20%3C%3Fphp%20echo%20json_encode('var2')%3B%20%3F%3E%3B%0A%09%09var%20var3%20%3D%20%3C%3Fphp%20echo%20json_encode('var3')%3B%20%3F%3E%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php
}
add_action('wp_print_scripts', 'shapeSpace_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 с целью использования в языковых переводах. Однако многие разработчики применяют ее для добавления встроенных скриптов. Вот пример:
// inline scripts via wp_localize_script()
function shapeSpace_enqueue_scripts() {
wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
$array = array(
'var1' => __('Value for Variable 1', 'shapeSpace'),
'var2' => __('Value for Variable 2', 'shapeSpace'),
'var3' => __('Value for Variable 3', 'shapeSpace'),
);
wp_localize_script('shapeSpace_script', 'shapeSpace', $array);
}
add_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts');
Здесь функция подключает наш 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(), но может гораздо больше. Вот пример:
// inline scripts via wp_add_inline_script()
function shapeSpace_enqueue_scripts() {
wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
$script = 'var1 = '. json_encode('var1') .'; ';
$script .= 'var2 = '. json_encode('var2') .'; ';
$script .= 'var3 = '. json_encode('var3') .'; ';
wp_add_inline_script('shapeSpace_script', $script, 'before');
}
add_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts');
Мы можем делать следующее:
- Добавлять любой JavaScript-сниппет
- Ассоциироваться с любым зарегистрированным скриптом.
Мы имеем полный контроль над контентом скрипта и его относительным расположением. Также обратите внимание на третий параметр, $position. Он позволяет нам включать $script либо до (before), либо после (after) $handle, shapeSpace_script.
Плюсы:
Полный контроль над выполнением скриптов.
Минусы:
Нет.
Пример встроенного скрипта
Мы можем создать технику добавления встроенных скриптов, которая будет работать с любой версией WordPress. К примеру, я использую следующую методику с 3 функциями в своем плагине:
// enqueue scripts
function shapeSpace_enqueue_scripts() {
wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
shapeSpace_inline_script();
}
add_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts');
// inline scripts WP >= 4.5
function shapeSpace_inline_script() {
$wp_version = get_bloginfo('version');
if (version_compare($wp_version, '4.5', '>=')) {
$script = 'var1 = '. json_encode('var1') .'; ';
$script .= 'var2 = '. json_encode('var2') .'; ';
$script .= 'var3 = '. json_encode('var3') .'; ';
wp_add_inline_script('shapeSpace_script', $script, 'before');
}
}
// inline scripts WP < 4.5
function shapeSpace_print_scripts() {
$wp_version = get_bloginfo('version');
if (version_compare($wp_version, '4.5', '<')) { ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09%09var%20var1%20%3D%20%3C%3Fphp%20echo%20json_encode('var1')%3B%20%3F%3E%3B%0A%09%09%09var%20var2%20%3D%20%3C%3Fphp%20echo%20json_encode('var2')%3B%20%3F%3E%3B%0A%09%09%09var%20var3%20%3D%20%3C%3Fphp%20echo%20json_encode('var3')%3B%20%3F%3E%3B%0A%09%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php
}
}
add_action('wp_print_scripts', 'shapeSpace_print_scripts');
В итоге мы имеем три простых функции. Сначала мы подключаем наш JavaScript-файл. Затем мы вызываем нашу вторую функцию, которая добавляет наш встроенный скрипт с помощью wp_add_inline_script() для WordPress 4.5 и выше. Наконец, третья и последняя функция – fallback для старых версий WP. Если версия WP ниже 4.5, то в таком случае будет использоваться добавление встроенных скриптов через wp_print_scripts. Эта функция прекрасно работает вплоть до версии 2.1.
