ZZIZZ.SU Блог- ДмитрияН
Если вы являетесь разработчиком WordPress, возможно, вы использовали крючок WordPress wp_print_scripts для добавления любого необходимого встроенного JavaScript. Кроме того, вы можете использовать эту функцию wp_localize_script()для добавления встроенных скриптов. Но знаете ли вы, что не так давно WordPress добавил новую функцию для добавления встроенного JavaScript? Да, начиная с версии WordPress 4.5 и выше, мы можем использовать улучшенную функцию wp_add_inline_script ()для выполнения этой работы.
Одна из приятных особенностей этой новой функции заключается в том, что вы можете связать ее с любым зарегистрированным скриптом и включить больше, чем просто переменные JavaScript. В этой статье DigWP объясняется, как 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() {
?>
<script>
var var1 = <?php echo json_encode('var1'); ?>;
var var2 = <?php echo json_encode('var2'); ?>;
var var3 = <?php echo json_encode('var3'); ?>;
</script>
<?php
}
add_action('wp_print_scripts', 'shapeSpace_print_scripts');
Эта функция определяет три переменные на основе параметров плагина, а затем выводит их в головной раздел (на интерфейсе) с помощью wp_print_scriptsкрючка. Чтобы вместо этого добавить скрипт в область администратора, мы заменим wp_print_scriptsadmin_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 и дает ему дескриптор/идентификаторshapeSpace_script. Затем определяется ассоциативный массив, содержащий наши переменные. И, наконец, переменные передаются wp_localize_script()для включения в строку вместе с зарегистрированным скриптом shapeSpace_script. Это позволяет нам использовать любую из добавленных переменных JS, таких как shapeSpace.var1и т. д.
Профи
Этот метод хорош тем, что он позволяет (read: requires) ассоциировать с существующим/зарегистрированным скриптом. Таким образом, он обеспечивает согласованный способ управления относительным расположением вывода пользовательского сценария.
Аферы
Единственным реальным недостатком этого иначе надежного метода является то, что вы можете добавлять только переменные JavaScript (т. е. var = ‘value’;). Поэтому, если вам нужно добавить другие типы встроенных скриптов, таких как уравнения, условия, функции или что-то еще, это просто невозможно сделать wp_localize_script().
Лучше всего: встроенные скрипты через wp_add_inline_script()
Теперь, когда мы увидели плюсы и минусы двух альтернативных методов встроенного скрипта, давайте рассмотрим лучший способ использования новой(er) функции WordPress, 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.
Профи
Все плюсы. Добавьте буквально любой встроенный код JavaScript, расположенный до или после зарегистрированного скрипта, который сам может быть включен в верхний или нижний колонтитул. Таким образом, у вас есть полный контроль.
Аферы
Нет. Все благо.
Полный пример: встроенный скрипт с резервной копией
Собрав все вместе, мы можем разработать полную технику для добавления встроенных скриптов, которая работает практически в любой версии WordPress. Например ,я использую следующую 3-функциональную технику в моем интерфейсном плагине posts.
// 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', '<')) {
?>
<script>
var var1 = <?php echo json_encode('var1'); ?>;
var var2 = <?php echo json_encode('var2'); ?>;
var var3 = <?php echo json_encode('var3'); ?>;
</script>
<?php
}
}
add_action('wp_print_scripts', 'shapeSpace_print_scripts');
Это волшебный билет. Три простые функции. Сначала мы ставим в очередь файл JavaScript. Оттуда мы вызываем вторую функцию, которая добавляет наш встроенный скрипт, используя wp_add_inline_script() для WordPress версии 4.5 и лучше. Тогда третья и последняя функция является резервным вариантом для старых версий WordPress. Все, что старше 4.5, добавит наш встроенный скрипт через wp_print_scripts крючок. Итак, суть в том, что вышеупомянутый метод отлично работает, чтобы добавить встроенные скрипты в любую версию WordPress, возвращаясь к 2.1 или чему-то сумасшедшему.
Почему такая разница о домофонов без трубки (UKP-66) белая за полторы тысячи остальные существенно больше двух тысяч, там, что золото применяют в краске?
i am from Italy hello. Can you help me translate? /rardor