Как реализовать мультиязычность JS сообщений в плагине qTranslate-X Wordpress?

Question

[Александр]

Есть вывод JS-текста на русском при неправильном заполнении формы
(типа "неправильный адрес", "телефон"
if(mailvalid == false) {
jQuery(".fancybox-mailerror p").text('Неверный адрес');
jQuery("#email").addClass("fancybox-mailerror");
}
и т. п.).
Есть хороший плагин qTranslate-X, который прекрасно переводит контент, но не видит JS и JQuery скрипты. Как сделать, чтобы сообщения на JS вывелись на английском при переключении языка на сайте с помощью данного плагина? Можете посоветуете какие-нибудь готовые решения на JS, jQuery? Спасибо

Answer 1

[Денис Янчевский]

Сформируйте массив со строками и обращайтесь к нему в js.
У WordPress есть встроенные инструменты для этого, можно почитать здесь и здесь.

Вариант 1. Сделать сложно и правильно.
Добавить строки и создать .po и .mo файлы с переводами.

function dco_get_language_strings() {
    $strings = array(
        'example' => __( 'My Example String', TEXTDOMAIN_CONSTANT ),
        'foo'   => __( 'My foo string', TEXTDOMAIN_CONSTANT ),
        'bar'   => __( 'My bar', TEXTDOMAIN_CONSTANT )
    )

    return $strings;
}

Затем подключить вывод к любому скрипту в теме

wp_localize_script( 
                       'my_foo', 
                       'my_var_prefix',
                       dco_get_language_strings()
);

В js можно будет обращаться примерно так:
alert(my_var_prefix.example)

Вариант 2. Проще, но не особо правильно.

add_action('wp_head', 'dco_translate_strings');

function dco_translate_strings() { ?>
	<script>
		mystrings = {};
		<?php if (qtranxf_getLanguage() == 'ru') : ?>
			mystrings.example = 'Пример';
			mystrings.example2 = 'Пример2';
		<?php else if (qtranxf_getLanguage() == 'en') : ?>
			mystrings.example = 'Example';
			mystrings.example2 = 'Example2';
		<?php endif; ?>
	</script>
<?php }

Обращаться в js аналогично
alert(mystrings.example)

Answer 2

[Александр]

Сёмка, один код подгружается в отдельном .js файле, другой код(с другими задачами) расположен в подвале.
В любом случае задача решена, большое спасибо за подсказку Денису Янчевскому. Сделал что-то среднее между Вашим первым и вторым вариантом). Работающий код в functions.php привожу ниже:

function true_localize_services() {
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.1.0.min.js');
wp_enqueue_script('ajax-googleapis', 'ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
if (qtranxf_getLanguage() == 'ru') {
$string_serv = array( 'more' => __( 'ПОДРОБНЕЕ' ), 'hide' => __( 'СКРЫТЬ') );
}
else if (qtranxf_getLanguage() == 'ua') {
$string_serv = array( 'more' => __( 'ДЕТАЛЬНІШЕ' ), 'hide' => __( 'СХОВАТИ') );
}
return $string_serv;
}
wp_localize_script('jquery', 'string_serv', true_localize_services());
wp_localize_script('ajax-googleapis', 'string_serv', true_localize_services());

add_action('wp_enqueue_scripts', 'true_localize_services');

В данном случае JS код находится в футере, в нем обращался так:

jQuery(document).ready(function(){
jQuery( ".detailservpage1" ).click(function() {
if ( jQuery(this).next('.servblocks_page_left').height() != 195) {
jQuery(this).next('.servblocks_page_left').css("height","195px");
jQuery(this).css('text-align','center').css('line-height','75px');
jQuery(this).text(string_serv.more);
}
else{
jQuery(this).next('.servblocks_page_left').css("height","100%");
jQuery(this).css('text-align','center').css('line-height','75px');
jQuery(this).text(string_serv.hide);
}
});