Как в WordPress передать данные и строки в JavaScript
Я считаю, что это полезная практика закладывать все данные в статические строки PHP-файлов. Если позже вам нужно будет использовать некоторые данные в JavaScript, вы также можете уложить данные как атрибуты data-* в HTML-код.
Но в некоторых определенных сценариях у вас нет другого выбора, кроме как передать строки непосредственно в код JavaScript.
Если вы включаете библиотеку JavaScript и решили инициировать объект JavaScript в файле header.php при назначении данных свойствам, то эта статья для вас.
Она поможет вам понять, как правильно передать данные PHP и статические строки в библиотеку JavaScript.
Зачем нужно передавать данные в JavaScript
Позвольте мне описать некоторые типичные сценарии, при которых требуется передача данных в JavaScript.
Например, иногда нам нужно получить следующие значения в код JavaScript:
- URL-адреса главной страницы, панели администрирования, плагинов, темы или Ajax;
- Переводимые строки;
- Тему или опцию WordPress.
Стандартные способы передачи данных
Допустим, что у нас есть файл JQuery под названием myLibrary.js, который мы хотим подключить к нашему сайту на WordPress:
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
home: '', // populate this later
pleaseWaitLabel: '', // populate use this later
someFunction: function() {
// code which uses the properties above
}
}
});
Мы подключаем его в файле functions.php с помощью следующего кода:
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
Теперь вопрос в том, как нам заполнить свойства home и leaseWaitLabel? Возможно, вы по привычке захотите добавить в файл header.php что-то вроде этого:
<script>
(function( $ ) {
"use strict";
$(function() {
myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait...', 'default' ) ?>';
});
}(jQuery));
</script>
И это сработает; однако WordPress предоставляет нам более простой и короткий способ, чтобы сделать это.
Способ, предлагаемый WordPress
Рекомендуемым способом передачи данных в JavaScript является использование функции wp_localize_script. Эта функция предназначена для использования после подключения скрипта через wp_enqueue_scripts:
wp_localize_script( $handle, $objectName, $arrayOfValues );
Вот параметры, которые она может принимать:
- $handle. Обработка подключенного скрипта для привязки к нему значений;
- $objectName. Объект JavaScript, который будет содержать все значения массива $arrayOfValues;
- $arrayOfValues. Связанный массив, содержащий имена и значения, передаваемые скрипту.
После вызова этой функции внутри указанного скрипта станет доступна переменная $objectName.
Реализация wp_localize_script
Давайте настроим предыдущий пример таким образом, чтобы использовать наш новый метод передачи данных. Во-первых, мы подключаем скрипт, когда вызывается функция wp_localize_script в файле functions.php:
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
$dataToBePassed = array(
'home' => get_stylesheet_directory_uri(),
'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );
Теперь к значениям home и pleaseWaitLabel можно получить доступ внутри нашей библиотеки JQuery через переменную php_vars.
Так как мы использовали wp_localize_script, из файла header.php запускаться больше ничего не будет, поэтому мы можем свободно удалить содержимое тега <script>.
Мы также можем удалить дополнительные свойства из скрипта JQuery. Упрощенно он теперь будет выглядеть так:
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
someFunction: function() {
// code which uses php_vars.home and php_vars.pleaseWaitLabel
}
}
}(jQuery));
Заключение
При использовании wp_localize_script наш код будет проще, а файл header.php чище. Надеюсь, вы сможете использовать эту функцию в своем коде, и это будет полезно для вас.
Также надеюсь, что вам понравилась эта статья. Я буду очень признателен за любые отзывы, комментарии и предложения.
Будете ли вы использовать приемы, приведенные здесь, в одном из своих ближайших проектов? Поделитесь своими мыслями в комментариях!