Мультиязычность сайта

Мультиязычность сайта можно обеспечить несколькими способами: ручной перевод, автоматический перевод, либо с помощью системы мультисайт. В данной статье рассмотрим первые 2 способа.

Ручной перевод сайта — Polylang

Для того чтобы сделать на сайте поддержку нескольких языков (контента и элементов шаблона) — устанавливаем плагин Polylang.

В настройках добавляем необходимые языки: Русский (ставим порядок 1), Английский (en_GB, порядок 2) и другие необходимые языки.

Переходим в закладку Перевод строк и переводим элементы сайта.

Помощь в переводе от Google.

Переходим в закладку Настройки, выбираем вид английского сайта (eng.site.ru или site.ru/eng).
Ставим галочку в пункте — Спрятать название языка по-умолчанию из URL (чтобы в основном сайте не было приставки RU).

Первое время может все сбоить. В настройках плагина появится предупреждение, что-то типа есть записи/страницы/категории/метки без указания языка, и ссылка назначить основной язык. После нажатия у всех подобных элементов сайта язык станет русским и они начнут работать.

Вставляем переключатель языков

<div id="langswitch"><ul><?php pll_the_languages(array('show_flags'=>1,'show_names'=>0)); ?></ul></div>

Переход сайта на английскую версию

Чтобы все корректно работало надо периодически обновлять постоянные ссылки

Если на сайте уже существует некоторое количество записей, категорий, меток. То придется создавать английские дубли всех элементов.

При добавлении английских дублей обязательно нужно нажимать + в соответствующей русской строке, чтоб не было путаницы.

При дублировании записей произвольные поля ACF ведут себя корректно. Дублируются 1:1, надо только делать перевод

Перевод элементов шаблона

В шаблоне вместо текста, который должен меняться в зависимости от версии ставим

<?php pll_e('Подвесные системы'); ?>

В fuctions.php прописываем

pll_register_string('Suspension systems','Подвесные системы');

После этого переходим в Перевод строк (в настройках плагина Polylang) и в появившихся строках прописываем необходимый текст.

В некоторых выводах, например в функциях требуется чистый вывод перевода. В этом случае выводим так:

pll__('Каталог');

Проверка версии

Для перевода и для других целей может помочь проверка версии.

<?php if( 'ru' == pll_current_language() ) : ?>
//содержимое, если версия русская  
<?php else : ?>
//содержимое, если версия не русская  
<?php endif; ?>

Шорткод для переключателя языков

function custom_polylang_langswitcher() {
	$output = '';
	if ( function_exists( 'pll_the_languages' ) ) {
		$args   = [
			'show_flags' => 0,
			'show_names' => 1,
			'echo'       => 0,
			'hide_current' => 1
		];
		$output = '<ul class="polylang_langswitcher">'.pll_the_languages( $args ). '</ul>';
	}

	return $output;
}

add_shortcode( 'polylang_langswitcher', 'custom_polylang_langswitcher' );

[polylang_langswitcher]

Либо просто вывод:

<?php $translations = pll_the_languages( array( 'raw' => 1 ) ); ?>

<div id="glinks" style="display: flex;">
	<?php foreach ($translations as $item) : ?>
	<a <?= ($item['current_lang']) ? 'class="activ"' : '' ?> href="<?= $item['url'] ?>"><?= $item['slug'] ?></a>
	<?php endforeach; ?>
</div>

Медиафайлы для разных версий сайта

Можно добавить разделение медиафайлов для разных языковых версий. Чтобы при загрузке файлов в одной версии они не отображались в другой. Но это актуально в том случае, если файлы действительно раздельные, если есть общие то лучше это не использовать. Включается в настройках плагина Polylang Медиафайлы.

Ссылка на главную для текущей версии

<?php echo pll_home_url(pll_current_language()); ?>

Чтобы в url главной страницы не основного языка не было ничего кроме домена/кода языка, нужно включить чекбокс URL главной страницы содержит код языка вместо названия или ID страницы в настройках Модификации URL.

WPML Multilingual CMS

Еще одним мощным решением многоязычного сайта с ручным заполнением является WPML Multilingual. Плагин платный от 29$ (с простейшим функционалом) до 79$ (с расширенным набором функций). WPML, как и предыдущий плагин, создает несколько версий документа (записи, страницы, записи произвольного типа (какие типы переводить — определяется в настройках плагина)). Есть меню массового изменения переводов (нужен в основном для дублирования переводов, в те версии, где он отсутствует).

Довольно удобно работать с переводами. Можно создать например английскую версию документа, далее копировать ее на другие версии (итальянский, испанский) и уже потом постепенно переводить.

В зависимости от выбранной версии 29$ (только первый — WPML Media Translation) / 79$ (все перечисленные) WPML снабжается сопутствующими плагинами:

WPML Media Translation — Этот плагин позволяет пользоваться галереей WordPress на различных языках. Вы можете выбирать изображения отдельно для каждого языка.
WPML String Translation — Плагин перевода строк позволяет переводить строки интерфейса прямо в WordPress без использования файлов с расширением .mo. Он дает возможность переводить не только надписи, но также созданные пользователем тексты вне записей и страниц. Например, ключевые слова и данные SEO.
WPML Translation Management — Когда ваши клиенты получают свой новый многоязычный сайт, ваша работа заканчивается, а их начинается. Плагин управления переводами позволяет администраторам управлять работой с переводами. Они делают обычных пользователей переводчиками, отправляют им задания и следят за продвижением перевода сайта.
WPML Sticky Links — Плагин «вязких» ссылок не допускает разрывов внутренних ссылок. Он автоматически отслеживает связанные страницы вашего сайта и обновляет принимаемые ссылки. После изменений в структуре постоянных ссылок, иерархии и даже кратких заголовках страниц все принимаемые ссылки обновляются автоматически.
WPML CMS Navigation — Плагин навигации CMS добавляет элементы навигации, которые можно использовать при создании сайта. Например, «хлебные крошки», раскрывающиеся меню и навигацию в боковой панели.
WooCommerce Multilingual — Помогает создавать многоязычные сайты электронной коммерции с помощью WooCommerce и WPML.
Gravity Forms Multilingual — Позволяет переводить формы Gravity. Вы сможете создать форму на родном языке и перевести ее на другие языки. Нет необходимости использовать несколько форм по одной на язык.
BuddyPress Multilingual — Помогает управлять многоязычной социальной сетью с помощью BuddyPress и WPML.

У плагина есть множество сторонних дополнений, вот часть из них:

WooCommerce Multilingual – пользуйтесь WooCommerce с WPML (70 000 загрузок). Отдельно без самого плагина от него естественно нет никакого смысла. Но удобно то, что можно приобрести версию WPML за 29$ и добавить к нему это решение.
WPML Widgets (30 000) — изменение версий виджетов, в зависимости от языка
WPML to Polylang (1000) — Для импорта многоязычных данных из WPML в Polylang.

Условия вывода при конкретном языка

Синтаксис следующий:

if ( ICL_LANGUAGE_CODE=='fr' ) :

Объединение комментариев WPML

WPML также разделяет комментарии в зависимости от выбранного языка, чтобы объединить их в одну ленту нужно воспользоваться плагином WPML comment merging (400+).

Объединение комментариев не сработало

Автоматический перевод сайта

Если нам нужен не ручной а автоматический перевод сайта — то нужно использовать плагин GTranslate. Настройки довольно просты: выбор необходимых языков для перевода, внешний вид виджета для переключения. Для работы плагина необходимо вставить шорткод (сам код есть в настройках плагина) в нужном месте. Плагин будет автоматически переводить весь текст сайта на выбранный язык. При переходе с одной страницы на другую выбранный язык сохраняется. В строке браузера изменений нет.

Всё здорово, но если выставить например 2 языка в виде RU EN то при переключении стилистически никак не выделяется активный язык. Чтобы это исправить, нужно сделать следующее:

Вставить переключатель не в виде шорткода, а виде верстки со скриптами (все это есть на странице настроек плагина)
Прописать ссылкам RU и EN классы rus и eng соответственно
Включить на сайте поддержку jquery.cookie
Вставить скрипт

$(document).ready(function() { 

    var googtrans = $.cookie('googtrans');

	if(googtrans != null) { $('.eng').addClass("lang-activ"); }
	else { $('.rus').addClass("lang-activ"); }
	
}); 

$('a.glink.nturl.notranslate.rus').click(function() {
        $('.eng').removeClass("lang-activ");
	$('.rus').addClass("lang-activ");
});

$('a.glink.nturl.notranslate.eng').click(function() {
        $('.eng').addClass("lang-activ");
	$('.rus').removeClass("lang-activ");
});

Стили

/* Переключение языков */

a.glink.nturl.notranslate {
    border: 1px solid #eee;
    padding: 5px;
    width: 20px;
    height: 30px;
    text-align: center;
    display: inline-block;
}

.lang-activ {border: 1px solid #e85222 !important;}

Помимо неточного перевода у данного метода есть еще один недостаток — трудность при переводе встроенных форм бронирования. Большинство из них заточены под разделенные версии сайтов (/en/ в URL). Но этот недостаток можно устранить с помощью window.location:

$(window).load(function() {
	
var EnVersion = $.cookie('googtrans');

if(EnVersion != null){
window.history.replaceState({}, '', location.origin + '/en' + location.pathname);
}

});

При загрузке страницы скрипт смотрит Cookie. Если есть googtrans (английская версия), то добавляет после домена /en.

Скрипт необходимо доработать: во-первых переключение происходит без перезагрузки и добавлять параметр в url нужно сразу, но при этом нужно понимать сработает ли сразу перевод формы бронирования, иначе смысл отпадает. И во-вторых при переключении на русский — как стереть из URl /en.

Оптимизация GTranslate

Можно немного сократить загружаемые скрипты и стили данного плагина. В шапке оставляем только:

<div class="col" id="header-translate"><div id="glinks">	
			<div style="display:none;" onclick="doGTranslate('ru|ru');return false;" title="Русский" class="glink nturl notranslate rus lang-activ">RU</div>
			<div style="display:none;" onclick="doGTranslate('ru|en');return false;" title="English" class="glink nturl notranslate eng">EN</div>
		</div></div>

В подвале выводим:

<style type="text/css">
    #goog-gt-tt, .goog-te-banner-frame, #google_translate_element2 {display:none !important;}
    .goog-te-menu-value:hover {text-decoration:none !important;}
    body {top:0 !important;} .skiptranslate {display: none;}
</style>

<div id="google_translate_element2"></div>

<script type="text/javascript" defer>
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ru',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2" defer></script>

<script type="text/javascript" defer>
    function GTranslateGetCurrentLang() {var keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
    function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
    function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(/goog-te-combo/.test(sel[i].className)){teCombo=sel[i];break;}if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
    if(GTranslateGetCurrentLang() != null)jQuery(document).ready(function() {var lang_html = jQuery('div.switcher div.option').find('img[alt="'+GTranslateGetCurrentLang()+'"]').parent().html();if(typeof lang_html != 'undefined')jQuery('div.switcher div.selected a').html(lang_html.replace('data-gt-lazy-', ''));});
</script>

У скрипта GT есть один побочный эффект, он добавляет элементу body min-height: 100%; и это может мешать некоторым стилям, например прилепленной шапке. В этом случае нужно прописывать для body свойства:

height: auto !important;
min-height: 100vh !important;

Скрипт переключения языков:

// Переключение языков
jQuery(document).ready(function($) { 

    var googtrans = $.cookie('googtrans');

	if(googtrans === undefined) { 
		// alert(googtrans);
	} else {
		jQuery('.rus').removeClass('lang-activ');
		jQuery('.eng').addClass('lang-activ');
	}

	jQuery('#glinks > *').click(function() {
		jQuery('#glinks > *').removeClass('lang-activ');
		jQuery(this).addClass('lang-activ');
	});
});

Прописываем обязательный стиль:

#glinks *:not(.lang-activ) {display: inline-block !important;}

Принудительное переключение GTranslate

Если сайт например на русском, но нужно чтобы при первом визите (изначально) был на английский (пока специально не переключена версия на русский) то нужно использовать такой скрипт:

jQuery(document).ready(function() { 
	
	var first_vizit = jQuery.cookie('first_vizit');
	
	if(first_vizit == null){
		
		jQuery('.eng').addClass("lang-activ");
		jQuery('#glinks a.eng').click();
		jQuery.cookie('first_vizit','true', { expires: 30, path: '/' } );
		
	} else {
		
		var googtrans = jQuery.cookie('googtrans');
		
		if(googtrans != null) {
			jQuery('.eng').addClass("lang-activ"); // Отображается RU
		} else {
			jQuery('.rus').addClass("lang-activ"); // Отображается EN (изначально) 
		}		
		
	}
	
}); 

jQuery('#glinks a').click(function() {
	jQuery('#glinks a').removeClass("lang-activ");
	jQuery(this).addClass("lang-activ");
});

Только при таком способе, при переходах по страницам, будет текст визуально переключаться с русского на английский.

[site-socialshare]

Мультиязычность сайта

Метки

Ручной перевод сайта — Polylang

Переход сайта на английскую версию

Перевод элементов шаблона

Проверка версии

Шорткод для переключателя языков

Медиафайлы для разных версий сайта

Ссылка на главную для текущей версии

WPML Multilingual CMS

Автоматический перевод сайта

Оптимизация GTranslate

Принудительное переключение GTranslate

Переключение вида вывода товаров

Woocommerce variations image swatch

Плагины для woocommerce (нюансы)

Добавить комментарий Отменить ответ