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

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

HIT

14.02.2016

5915

Мультиязычность сайта можно обеспечить несколькими способами: ручной перевод, автоматический перевод, либо с помощью системы мультисайт. В данной статье рассмотрим первые 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; ?>

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 то при переключении стилистически никак не выделяется активный язык. Чтобы это исправить, нужно сделать следующее:

  1. Вставить переключатель не в виде шорткода, а виде верстки со скриптами (все это есть на странице настроек плагина)
  2. Прописать ссылкам RU и EN классы rus и eng соответственно
  3. Включить на сайте поддержку jquery.cookie
  4. Вставить скрипт
$(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 id="glinks">
	<a href="#" onclick="doGTranslate('ru|ru');return false;" title="Русский" class="glink nturl notranslate rus">RU</a>
	<a href="#" onclick="doGTranslate('ru|en');return false;" title="English" class="glink nturl notranslate eng">EN</a>
</div>

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

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

Скрипт f.js

Содержимое скрипта (с отключенными лишними стилями):

(function(){var gtConstEvalStartTime = new Date();function d(b){var a=document.getElementsByTagName("head")[0];a||(a=document.body.parentNode.appendChild(document.createElement("head")));a.appendChild(b)}function _loadJs(b){var a=document.createElement("script");a.type="text/javascript";a.charset="UTF-8";a.src=b;d(a)}function _loadCss(b){var a=document.createElement("link");a.type="text/css";a.rel="stylesheet";a.charset="UTF-8";a.href=b;d(a)}function _isNS(b){b=b.split(".");for(var a=window,c=0;c<b.length;++c)if(!(a=a[b[c]]))return!1;return!0}
function _setupNS(b){b=b.split(".");for(var a=window,c=0;c<b.length;++c)a.hasOwnProperty?a.hasOwnProperty(b[c])?a=a[b[c]]:a=a[b[c]]={}:a=a[b[c]]||(a[b[c]]={});return a}window.addEventListener&&"undefined"==typeof document.readyState&&window.addEventListener("DOMContentLoaded",function(){document.readyState="complete"},!1);
if (_isNS('google.translate.Element')){return}(function(){var c=_setupNS('google.translate._const');c._cest = gtConstEvalStartTime;gtConstEvalStartTime = undefined;c._cl='ru';c._cuc='googleTranslateElementInit2';c._cac='';c._cam='';c._ctkk='433523.1240529024';var h='translate.googleapis.com';var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';var b=s+h;c._pah=h;c._pas=s;c._pbi=b+'/translate_static/img/te_bk.gif';c._pci=b+'/translate_static/img/te_ctrl3.gif';c._pli=b+'/translate_static/img/loading.gif';c._plla=h+'/translate_a/l';c._pmi=b+'/translate_static/img/mini_google.png';c._ps=b+'';c._puh='translate.google.com';_loadCss(c._ps);_loadJs(b+'/translate_static/js/element/main_ru.js');})();})();

Подключаем скрипт стандартным способом, но первее основного набора скриптов:

wp_enqueue_script( 'f', get_template_directory_uri() . '/js/f.js' , array( ), '1.0', true );

Вставляем в основной набор скриптов скрипты GTranslate:

// Скрипты Google Translate

function googleTranslateElementInit2() {
	new google.translate.TranslateElement({pageLanguage: 'ru', autoDisplay: false}, 'google_translate_element2');
}

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 (sel[i].className == 'goog-te-combo')teCombo = sel[i];
	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')
	}
}

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

height: auto !important;
min-height: 100vh !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");
});

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Запись на прием

Запись на прием

Внедряем в сайт функционал записи на прием. Данная возможность может пригодится в медицинской сфере, а также в сфере образования (репетиторство). Плагин Booked Appointments Плагин платный (59 $), но если хорошо Читать далее »

/
Изменение формы выбора вариаций

Изменение формы выбора вариаций

По умолчанию вариации товара в Woocommerce выбираются из выпадающего списка. Это не всегда удобно. Доработать формы выбора вариаций в виде: изображений, цветов, надписей (лэйблов) и т.д. помогут плагины. Рассмотрим различные Читать далее »

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

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

Рассмотрим различные плагины дополняющие функционал woocommerce, а также различные нюансы их использования. YITH WooCommerce Wishlist Плагин для добавление в ИМ раздела Избранное. В который можно/нужно помещать товары которые могут понадобится Читать далее »

/

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

Пока нет комментариев. Будь первым!

Мультиязычность сайта Мультиязычность сайта
Вложения записи (Attachment)
Рекомендации для васВложения записи (Attachment)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.