Я вважаю, що це корисна практика закладати всі дані на статичні рядка 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 щось на зразок цього:

(function( $ ) {
«use strict»;
$(function() {
myLibraryObject.home = «;
myLibraryObject.pleaseWaitLabel = «;
});
}(jQuery));

І це спрацює; однак 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 запускатися більше нічого не буде, тому ми можемо вільно видалити вміст тега .

Ми також можемо видалити додаткові властивості скрипта 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 чистіше. Сподіваюся, ви зможете використовувати цю функцію в своєму коді, і це буде корисно для вас.

Також сподіваюся, що вам сподобалася ця стаття. Я буду дуже вдячний за будь-які відгуки, коментарі та пропозиції.

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

Переклад статті «How to Pass PHP Data and Strings to JavaScript in WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here