Мультиязычность сайта можно обеспечить несколькими способами: ручной перевод, автоматический перевод, либо с помощью системы мультисайт. В данной статье рассмотрим первые 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>
Переход сайта на английскую версию
Если на сайте уже существует некоторое количество записей, категорий, меток. То придется создавать английские дубли всех элементов.
При добавлении английских дублей обязательно нужно нажимать + в соответствующей русской строке, чтоб не было путаницы.
Перевод элементов шаблона
В шаблоне вместо текста, который должен меняться в зависимости от версии ставим
<?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 то при переключении стилистически никак не выделяется активный язык. Чтобы это исправить, нужно сделать следующее:
- Вставить переключатель не в виде шорткода, а виде верстки со скриптами (все это есть на странице настроек плагина)
- Прописать ссылкам 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.
Оптимизация 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");
});
Только при таком способе, при переходах по страницам, будет текст визуально переключаться с русского на английский.