wp_localize_script() │ WP 2.2.0

Приклад вставки глобальних JavaScript даних перед робочим скриптом (у прикладі робочий скрипт це jquery). Вставляємо цей код у functions.php:

add_action( 'wp_enqueue_scripts', 'action_function_name_7714', 99);

function action_function_name_7714(){

	wp_localize_script( 'jquery', 'object_name', array(
		'some_string' => __( 'Some string to translate' ),
		'some_num' => '10'
	)));
}

Отримаємо в head частини сайту:

<script type='text/javascript'>
/* <![CDATA[ */
var object_name = {"some_string":"Some string to translate","some_num":"10"};
/* ]]> */
</script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

wp_localize_script() рекомендується використовувати тільки для передачі рядків локалізації, а не для передачі даних – об’єкта, який використовуватиме ваш скрипт. Для передачі краще використовувати wp_add_inline_script() .

Розглянемо з прикладу:

Раніше ви могли (і досі можете) зробити наступне:

wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' );

wp_localize_script( 'my-script', 'MYSCRIPT', array(
	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
	'otherParam' => 'some value',
)));

Але краще робити це так, тому що в цьому випадку ми зберігаємо типи переданих даних і, наприклад, числа залишаться числами, а не перетворяться на рядки:

wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' );

$ data = [
	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
	'param_one' => 'some value',
	'param_two' => 25,
];

wp_add_inline_script( 'my-script', 'const myScriptData = ' . wp_json_encode( $data ), 'before' );

Зверніть увагу, що потрібно додати ‘before’ як третій параметр.

Тепер у JS-скрипті ці дані можна отримати так:

console.log(myScriptData.ajaxUrl); // "https://site.com/wp-admin/admin-ajax.php"
console.log(myScriptData.param_one); // "some value"
console.log(myScriptData.param_two); // 25

Додамо скрипт, а потім глобальні дані до нього. Тут ми додаємо Javascript файл з AJAX запитом. У файлі використовується змінна MyAjax.ajaxurl, як URL для направлення запиту AJAX. Цей URL ми визначимо через wp_localize_script():

add_action( 'wp_enqueue_scripts', 'action_function_name_7714');

function action_function_name_7714(){

	wp_enqueue_script( 'my-ajax', get_template_directory_uri() . '/js/custom_script.js' );

	wp_localize_script( 'my-ajax', 'MyAjax', [ 'ajaxurl' => admin_url( 'admin-ajax.php' ) ] ));

}

отримаємо:

<script type='text/javascript'>
/* <![CDATA[ */
var MyAjax = {"ajaxurl":"http://example.com/wp-admin/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://example.com/wp-content/themes/twentyeleven/js/custom_script.js?ver=3.5'></script>

Доступ до змінних Javascript здійснюється так (для прикладу 2):

<script>
// у файлі custom_script.js ми можемо використовувати змінну: MyAjax.ajaxurl
alert (MyAjax.ajaxurl); // виведе http://example.com/wp-admin/admin-ajax.php
</script>