Как в 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 чище. Надеюсь, вы сможете использовать эту функцию в своем коде, и это будет полезно для вас.

Также надеюсь, что вам понравилась эта статья. Я буду очень признателен за любые отзывы, комментарии и предложения.

Будете ли вы использовать приемы, приведенные здесь, в одном из своих ближайших проектов? Поделитесь своими мыслями в комментариях!