Руководство по реализации мультиязычности сайта

На одном из проектов была поставлена задача локализации сайта с английского на другие языки (около девяти). Задача распространённая, путей к её решению несколько.

Перед вами статья-руководство, где рассказывается о средствах решения задачи с подробным гайдом по работе с языковым плагином и проблемах, с которыми пришлось столкнуться при внедрении. Сайт базируется на CMS WordPress.

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

1. Polylang

Polylang — не совсем инструмент для перевода, но позволяет создавать сайт с возможностью публикации контента на разных языках. Можно опубликовать один пост на 5 языках, или создать разделы сайта для каждого языка.

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

Страница плагина wordpress.org/plugins/polylang

Сайт плагина polylang.wordpress.com

Сайт облачного сервиса переводов lingotek.com

Плюсы:

• Выбор языка для постов и области редактирования поста.
• Создание постов на разных языках.
• Действительная мультиязычность сайта.
• Оптимизированная под поисковые системы структура URL для разных языков.
• Переключатель языков в виджете или меню навигации.
• Добавляйте столько языков, сколько хотите.
• Поддержка стандартов локализации и интернационализации, работает хорошо с локализованными и многоязычными темами и плагинами WordPress.
• Автоматически скачивает языковые файлы WordPress.
• Поддерживает RTL языки, такие как арабский, урду, иврит.
• Расширенная документация к плагину, активная поддержка сообщества.
• Удобный и простой интерфейс администратора плагина на 10 разных языках.
• Обширная документация на английском языке.
• Один из самых известных и поддерживаемых плагинов для WordPress, более 100 тысяч загрузок в магазине WordPress, рейтинг 5 звёзд из 5.
• Базовые и необходимые функции плагина бесплатны (возможно расширение до PRO версии, хотя и бесплатной версии хватает «с головой»).

Минусы:

• Не осуществляет автоматического перевода.

2. Ajax Translator Revolution

Платный плагин для автоматического перевода, использующий ресурсы системы машинного перевода Google Translate (написан с использованием Microsoft Transalte API). В автоматическом режиме поддерживается 63 языка.

Сайт плагина codecanyon.net.

Демо плагина preview.codecanyon.net (справа в углу переключатель языков, можно увидеть качество перевода).

Плюсы:

• Можно перевести все элементы или делать исключения для страниц, записей и разделов.
• Можно редактировать автоматически переведенный текст или задавать собственные значения.
• Автоматический перевод.
• Плавные переходы между переводами на AJAX.
• Панель администратора с большим количеством настроек, которая дает администратору сайта полный контроль за разными аспектами плагина.

Минусы:

• Автоматический перевод неточен, перевод больших текстов становится сложной задачей.
• Стоимость плагина $25.
• Создаётся псевдо-мультиязычность сайта (в отличие от Polylang не создаёт копии страниц для публикации контента).

3. WPML

Платный премиальный плагин. Не является плагином автоматического перевода.

Сайт плагина wpml.org.

Плюсы:

• Присутствует полная и четкая документация по использованию данного плагина.
• Простота использования.
• Можно использовать для локализации служб поисковой оптимизации (SEO). WPML позволяет создать настройки поисковой оптимизации (SEO) отдельно для каждого языка при использовании плагина WordPress SEO от Yoast или других плагинов для SEO.
• Включает плагин управления переводом, оснащенный интерфейсом XLIFF. Можно найти фрилансера для перевода сайта, не покидая админ.панель системы WordPress.
• Лицензия поддерживает неограниченное количество сайтов.

Минусы:

• Коммерческий плагин стоимость $29 версии «Многоязычный блог» (стоимость ежегодного продления лицензии — $15) и $79 «Многоязычная CMS» (стоимость ежегодного продления лицензии $39). Пожизненная лицензия обойдется вам в $195.
• Создание дополнительных таблиц в базе данных иногда затормаживает работу панели администратора.

Из вышеперечисленных плагинов клиенту был рекомендован Polylang: требовалось надёжное бесплатное решение для ручного перевода.

Рассмотрим работу плагина Polylang при добавлении контента на другом языке (в данном случае на русском), перевод строк, дублирование существующего контента (статьи блога, видео, документы и т. д.).

Примечание: в проекте выводимые на фронт в блоках видео, документы, цитаты и пр. реализованы с помощью небезызвестных в WordPress Custom Post Types вкупе с не менее известным плагином Advanced Custom Fields.

После установки плагина Polylang задаем минимальные настройки, переходим во вкладку «Настройки» в панели администратора Настройки — Языки:

Модификации URL

1. выбираем пункт The language is set from the directory name in pretty permalinks, чтобы аббревиатура языка автоматически добавлялась в URL-строку. Например, mysite.com/ru/ или mysite.com/de/;
2. ставим галочку Спрятать название языка по-умолчанию из URL;
3. отмечаем Remove /language/ in pretty permalinks, дабы убрать лишнее слово из URL;
4. ставим галочку The front page url contains the language code instead of the page name or page id;
5. обновляем пермалинки в разделе Настройки — Постоянные ссылки — Сохранить.

Внимание! Структура постоянных ссылок отличается от стандартной: может быть произвольной или в виде Название записи. В нашем проекте используется произвольный вид /blog/%post_id%.

В дальнейшем вы можете столкнуться с проблемой невозможности иметь ссылки mysite.com/ru/docs и mysite.com/de/. Виной всему — особенности ядра WordPress, которое делает невозможным создание страниц сайта с одинаковыми слагами (slug).

Для решения этой проблемы устанавливаем плагин Polylang Slug.

Чтобы попасть на главную страницу плагина, заходим в панель администратора, далее Настройки — Языки. Справа отображается список активных языков сайта, а слева предоставляется возможность добавить очередной язык:

Звёздочка напротив языка (в данном случае, английского) указывает на то, что язык установлен основным на сайте. Это значит, что при создании любого контента (статьи блога, видео, документа и т.д.) по умолчанию будет выбран английский язык. Если плагин по какой-либо причине не смог определить язык браузера посетителя, то он выведет англоязычную версию сайта. Если же посетитель из Норвегии, например, а у сайта нет норвежской локализации, то будет также выведена англоязычная версия сайта.

Поле Порядок определяет расположение языка в переключателе языков на фронтальной части сайта:

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

Переводы строк

Прежде чем рассматривать перевод строк, нужно сказать пару слов:

1. Чтобы строка стала доступна для перевода в соответствующем разделе в панели администратора, её необходимо зарегистрировать в файле functions.php внутри вашей темы:

pll_register_string( $name, $string, $group, $multiline );
$name — имя строки, которое отображается в разделе переводов строк
$string — собственно, строка для перевода
$group — группа, для которой зарегистрирована строка, по умолчанию “polylang”
$multiline — является ли мультистрочной, по умолчанию false

2. Для вывода переведённой строки в нужном месте сайта, нужно использовать функцию:

pll__( $string ); или pll_e( $string );.

Более подробную информацию можно найти в документации. Перейдём во вкладку Переводы строк на странице плагина:

В данном разделе представлены в виде таблицы все возможные текстовки на сайте:

Рассмотрим поля таблицы.

1. Строка: здесь представлена строка для перевода. Например, текст «MORE NEWS IN OUR BLOG» с главной страницы сайта:

2. Название: поле носит информационный характер и служит для удобства. Например, из названия «MAIN PAGE — More news» мы узнаём, что строка расположена на главной странице в блоке с краткой новостью. По данному полю доступна сортировка, которая поможет отсортировать строки по страницам, на которых они (строки) расположены.

3. Group (Группа): поле носит информационный характер и предназначено для фильтрации переводов служебных конструкций WordPress от переводов строк на фронтальной части сайта. По данному полю доступна сортировка.

4. Переводы: поле с перечнем переводов строки на разные языки.

Внимание! Для отображения всех языков в поле «Переводы» необходимо установить переключатель в верхнем баре в панели администратора в значение Показать все языки.

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

Внимание! Необходимо помнить, что во избежание проблем крайне не рекомендуется исправлять англоязычную локализацию строк, которые размещены в качестве опций в разделе Настройки — Custom Options Plus (в проекте для статических строк используется плагин Custom Options Plus).

Например, строка с адресом на странице Контактов — «964 Vaughn Spring Apt. 376, San Francisco, California 123» располагается в соответствующей опции Contact Address на странице Настройки — Custom Options Plus. Если исходный адрес поменялся, и его необходимо исправить, то нужно сначала изменить его в разделе Настройки — Custom Options Plus, а затем изменить, например, русскоязычную локализацию.

Почему эту особенность важно принимать во внимание? Потому что плагин Polylang — это всего лишь инструмент для локализации, и не предназначен для управления строками и текстами на сайте. Он управляет переводом строк, которые программно зарегистрированы в коде. Поэтому, в случае внесения изменений в input-поле «English» в поле «Переводы», изменится английская локализация, но не исходная строка на сайте, что может привести к недопониманию в работе плагина и серьёзной путанице при возможном его отключении.

Полезной функцией является Поиск перевода в правой верхней части раздела «Переводы строк»

В поле поиска можно ввести, страницу, на которой необходимо что-то перевести, например:

Результатами поиска будут все строки, размещённые на странице сайта About. Или, например, можно ввести какой-либо конкретный текст, и конкретная строка (или похожие вхождения строк) будет найдена:

Таким образом, в разделе Переводы строк можно перевести любую строку/текстовку/заголовок/подпись на нужный язык (в примере — русский). После изменения какого-либо перевода строки, необходимо сохранить изменения, кликнув на одноимённую кнопку в нижней части таблицы.

Локализация записей в блоге

Для начала необходимо добавить рубрики (категории) для записей в блоге на русском языке. Перейдём в раздел Записи — Рубрики в панели администратора:

Графическое обозначение	Расшифровка
	Рубрика создана на заданном языке.
	У рубрики есть переведённый аналог
	У рубрики нет переведённого аналога, и предлагается его добавить

Исходя из таблицы, мы понимаем, что рубрика «test» создана на английском языке и у неё есть переведённый на русский язык аналог. Рассмотрим категорию «Mobile App»: она создана на английском языке и у неё нет переведённого дубликата. Создадим его, кликнув на иконку с крестиком.

В левой части раздела будет предложено создать новую рубрику. Обратите внимание, что поле «Переводы» автоматически заполнилось значением «Mobile App», а создаваемая рубрика будет привязана к своему англоязычному аналогу.

Язык дублируемой категории автоматически установлен как «Русский» (т. к. кликнули по иконке плюсика под флагом), поле английского перевода в подзаголовке Переводы автоматически приняло значение «Mobile App». Сохраняем рубрику, нажав на кнопку Добавить новую рубрику.

Далее перейдем к добавлению статьи на каком-либо языке. Перейдём в раздел Записи — Добавить новую. В целом, всё как обычно, но в правом верхнем углу на странице создания появился новый блок — Языки. При создании записи выставляется язык по умолчанию, но можно легко из селектора выбрать нужный.

Заполняем поля на странице добавления записи, выбираем недавно созданную рубрику «Мобильные приложения»:

Запись опубликована и появилась в разделе «Блог» на русскоязычной версии сайта. Чтобы добавить англоязычный аналог записи, необходимо нажать на значок плюсика под нужным флагом (принцип работы абсолютно аналогичен приведенному выше при работе с рубриками):

При создании русскоязычной версии статьи будут выведены только русскоязычные рубрики. Аналогично для английского и других языков.

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

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

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

Локализация контента

В данной главе будет рассмотрено добавление и дублирование контента сайта (например, документов, видео, цитат и т. д.).

Рассмотрим дублирование контента на примере в разделе «Документы».

Выставим в переключателе языков в верхнем баре админ панели опцию Показать все языки, увидим список из множества документов в таблице, где отсутствует русскоязычный аналог. Выберем документ, который бы мы хотели локализовать. Скажем, «Our advantages»:

Кликаем по знакомому символу плюсика, что означает создание дубликата на указанном языке:

Вводим перевод названия документа на русском языке. При необходимости загружаем новый документ, выбираем месторасположение (в данном случае, мы хотим опубликовать документ на главной странице в соответствующем блоке). Стоит обратить внимание, что поле Переводы исправлять при правке такого рода контента не обязательно: «Черновик» — это всего лишь условное название, которое нигде не отображается.

Такова особенность WordPress, если создаётся контент особого типа (к которому, в нашем случае, и относятся документы, видео, цитаты и пр.). Главное — удостовериться, что мы создаём дубликат на нужном языке, а именно, русском. После всех операций, кликаем по кнопке Опубликовать. В результате мы получили дубликат документа «Our advantages» на русском языке, который автоматически отобразился на сайте в нужном нам месте:

Таким образом, можно перевести весь необходимый контент: видео, отзывы, цитаты основателей проекта, цитаты известных людей, ЧаВо — принцип везде одинаков. Стоит отметить, что для раздела Медиафайлы также доступна локализация, т. е. для одной и той же картинки может существовать несколько аналогов на других языках.

Локализация страниц сайта

В этом разделе мы рассмотрим немаловажный этап локализации — перевод страниц сайта, таких, как «Home», «About», «Blog» и т. д. Принцип работы — тот же самый, что и со статьями, контентом, но есть некоторые отличительные особенности.

Разберём локализацию страницы контактов на немецкий язык. Необходимо перейти в раздел Страницы, проверить, что переключатель в верхнем баре панели администратора имеет значение Показать все языки. Важно отметить, что локализацию на другие языки лучше создавать от исходного языка по умолчанию — английского. В списке страниц находим «Contacts»:

Кликаем на иконку плюсика, что означает создание дубликата страницы на указанном языке:

Важно:

1. Обращать внимание, какое значение принимает поле Постоянная ссылка. Оно автоматически генерируется из названия страницы, но необходимо указывать в поле ввода значение, которое корректно будет обрабатываться сайтом, в данном случае — contacts (значение на каждом сайте может быть уникальное, не обязательно указанное). После чего нажать кнопку «ОК».

Помните, в начале статьи, я говорил про плагин Polylang Slug? В этом месте он как раз и пригодится: благодаря ему, мы можем создавать полную копию (вместе со слагом) исходной страницы.

2. В селект поле Шаблон необходимо выбирать шаблон страницы с соответствующим названием (это в том случае, если у вас используется не стандартная тема).

Kontakte — это название конкретной страницы, которое будет отображаться в верхнем меню сайта. Нужно обратить внимание, что название не важно лишь для главной страницы (т. к. она не входит в верхнее меню).

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

Если пренебречь этими пунктами — корректная работоспособность созданной страницы не гарантируется.

Таким образом, можно перевести на другие языки все страницы сайта.

Локализация главного меню сайта

В данном разделе будет описано создание меню сайта для других языков. На данный момент существует два локализованных меню — для английского и русского языков.

Рассмотрим создание меню на примере для немецкого языка. Предположим, уже созданы все необходимые страницы для немецкого языка:

Необходимо перейти в раздел Внешний вид — Меню. Для удобства выставим в переключателе языков в верхнем баре значение Deutsch. Из выпадающего списка выберем пункт Main Menu Deu (Primary Deutsch) и нажмём кнопку «Выбрать»:

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

Необходимо учитывать, что страницы Startseite (Home page), Erzählen Sie Ihre Geschichte (Tell your story Mobile) и Spenden (Donations Page) не нужно отмечать — они не входят в главное меню и подключаются автоматически (это связано с особенностями реализации сайта).

После добавления страницы отобразятся в разделе Структура меню. Чтобы разместить их в нужном порядке, а именно About → Blog → Documents → FAQ → Contacts, необходимо перетащить пункты меню в нужном порядке, начиная сверху:

После расположения элементов в нужном порядке нажимаем на кнопку Сохранить меню. Результат можно сразу же увидеть на сайте:

Аналогичным способом можно перевести меню на другие необходимые языки.

Заключение

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

Например, готовится локализация сайта на итальянский язык. Сначала создаются рубрики, записи, переводятся строки, контент (видео, документы и т. д), и только потом добавляются все страницы (Home, About, Blog etc) и компонуется меню. Таким образом, вы избавите пользователей от посещения пустых или непереведённых страниц.