Як у WordPress передати переклад рядків із PHP в JavaScript

Привіт:) У цій статті покажу як, відповідно до мови сайту, передати переклад рядка з PHP в JavaScript.

Проблема виникає тоді, коли потрібно в коді JavaScript отримати та відобразити текстовий рядок відповідно до мови WordPress сайту (локалі).

Нехай десь у коді WordPress-теми зустрічаються текстові рядки "Title" та "Description", для яких у файлах локалізації (.po та .mo) вказані відповідні переклади.

Припустимо, що ресурс доступний 2-ма мовами — англійською та українською. Якщо відвідувач сайту обере українську мову, то повинен побачити перекладений текст цих рядків ("Назва" та "Опис" відповідно). У WordPress є вбудовані інструменти для автоматичного відображення вказаного рядка відповідно до мови (локалі) сайту. Зазвичай у коді тем та плагінів можна побачити наступний код

esc_html_e( 'Title', 'text-domain' );
esc_html_e( 'Description', 'text-domain' );

Але що робити якщо перекладену текстову фразу потрібно відобразити у коді JavaScript? Наприклад, змінити текст повідомлення форми про невірно введену адресу email відповідно до локалізації (мови) сайту. Може статися так, що розробнику не вдалося знайти та отримати доступ до цього рядка через PHP (наприклад, за допомогою хука). А тому він може спробувати це зробити через JavaScript.

Розгляну на прикладі WordPress-теми. Нехай у файлі functions.php активної теми під'єднується JavaScript-файл frontend-script.js, у якому повинен відображатися переклад того чи іншого рядка.

if ( ! function_exists( 'theme_scripts' ) ) {
	add_action( 'wp_enqueue_scripts', 'theme_scripts' );
	function theme_scripts() {
		wp_enqueue_script( 'frontend-script', get_template_directory_uri() . '/assets/js/frontend-script.js', array(), '1.0.0', true );
		wp_localize_script( 
			'frontend-script', 
			'frontend_script_object',
			array( 
				'title' => esc_html__( 'Title', 'text-domain' ),
				'description' => esc_html__( 'Description', 'text-domain' ),
			)
		);
	}
}

Передачу рядка можна забезпечити за допомогою функції wp_localize_script(). Перший її параметр — назва (дескриптор) скрипта, якому буде передаватися переклад. Цей скрипт повинен бути зареєстрований перед викликом wp_localize_script(). У другому параметрі вказується унікальна назва об'єкту, що буде містити дані перекладу. Третій параметр функції — це власне масив рядків з перекладом. Ключем є унікальна назва рядка, значенням — переклад.

Щоб перевірити чи передалися переклади, у файлі frontend-script.js можна використати код

console.log(frontend_script_object.title);
console.log(frontend_script_object.description);

У коді через рядок frontend_script_object відбувається звернення до об’єкту з перекладами. Значення після крапки — елемент масиву, який відповідає конкретному рядку.

Функція wp_localize_script(), згідно офіційної специфікації, призначена виключно для передачі локалізованих (перекладених) рядків із PHP у JavaScript. Але часто з її допомогою передають й інші дані. Це зв’язано з тим, що спочатку це був єдиний офіційний спосіб. Але, починаючи із WordPress 4.5.0, була представлена окрема функція wp_add_inline_script(). Саме вона тепер є найкращою практикою для передачі даних із PHP у JavaScript.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *