Блог / Статьи14 января 2020

Как добавить несколько языковых версий на сайт Wordpress: пошаговая инструкция

Статья ориентирована на людей, знакомых со структурой файлов Wordpress. Все правки можно сделать, имея доступ к административной панели сайта.

15.05.2019 в Украине принят «Закон об обеспечении функционирования украинского языка как государственного». В статье 23, части 6 этого Закона говорится, что cайты и страницы в соцсетях компаний, продающих товары в Украине и зарегистрированных в Украине, должны быть на украинском языке. На сайтах иностранных компаний, которые продают товары в Украине, украинская версия также должна загружаться по умолчанию. Мобильные приложения, PWA, продающие товары и услуги в Украине, должны иметь украинскую версию.

Норма о переводе сайтов и страниц вступает в силу через 18 месяцев после подписания президентом; следовательно, до 15 ноября 2020 года мы должны запустить украинские версии сайтов, которая работали бы по умолчанию.

Для сайтов в Украине, которые пока не имеют версии на государственном языке, ее внедрение может вызвать определенные технические трудности. Именно поэтому в этой статье мы решили рассказать, как добавить второй язык на сайт на примере CMS Wordpress, которая является самой популярной системой управления контентом в мире.

Что необходимо для добавления многоязычности?

Структура Wordpress в стандартной комплектации не имеет поддержки многоязычности. Но с помощью плагинов ее можно реализовать, создавая записи и описания таксономий (категорий товаров, рубрик) для других языков в базе данных и связывая их между собой. Для реализации многоязычия сайта на Wordpress мы в Arto используем плагин Polylang, о котором речь пойдет дальше.

Кроме того, нам понадобится плагин Loco Translate, который позволяет осуществить перевод тем и плагинов путем внесения изменений в языковые файлы .mo и .po.

Пошаговая инструкция внедрения многоязычности на сайт Wordpress

1. Установите плагины

  • Polylang
  • Loco Translate

Если Ваш сайт использует Woocommerce или Contact Form 7, следует установить также плагины адаптации их под Polylang:

  • Hyyan WooCommerce Polylang Integration
  • Contact Form 7 Polylang Module

2. Добавьте языки

Перейдите на страницу Languages и добавьте все необходимые для сайта языки. После этого отметьте звездочкой язык «по умолчанию» – он должен быть основным для вашего сайта.

Страница добавления языков Polylang. На скриншоте видно, что добавлено два языка – украинский и русский. В данном примере русский отмечен звездочкой, как основной язык сайта.

3. Настройте Polylang

При необходимости выполните дополнительные настройки плагина Polylang. Для этого перейдите на эту страницу:

Доступны следующие опции для настройки.

  • URL modifications. Определяет url-формат языковых версий сайта. Алгоритм формирования альтернативной языковой версии зависит от SEO-стратегии, которую вы выбрали: это может быть размещение альтернативных языковых версий на поддоменах (например, en.site.com, de.site.com) или в поддиректориях (например, site.com/en/, site.com/de/). Оптимальным вариантом считается добавление языковой версии в виде директории, например, https://example.com (основной язык), https://example.com/ru/ (русский язык), https://example.com/en/ (английский язык).
  • Detect browser language. Активация или деактивация автоматического определения языка браузера с последующим автоматическим перенаправлением (редиректом) на пользователя на подходящую языковую версию. Если языка браузера на сайте нет, будет выбран основной язык. Пользователи не всегда верно выставляют настройки в браузере, поэтому мы рекомендуем отключать эту опцию.
  • Media. Активация или деактивация переводов для медиа-файлов. Если активировано, будет доступен перевод метаданных изображения на другие языки. При этом изображения становятся привязанными к определённым языкам. Во время использования медиа-библиотеки при редактировании элемента возможен выбор только из изображений, привязанных к языку элемента, редактирование которого производится. Если после включения плагина у вас "пропали" изображения в медиа-библиотеке, эта настройка может быть основной причиной проблемы. Если же вам не нужен перевод атрибутов alt и title изображений, то эту опцию следует деактивировать.
  • Custom post types and taxonomies. Используя эту опцию, можно настроить, какие типы записей и таксономий следует делать многоязычными, а какие нет. В большинстве случаев стоит отмечать все, чтобы каждая страница на сайте имела альтернативную языковую версию
  • Synchronization. Настройки синхронизации позволяют производить обновление данных при изменении мета-данных в одной из языковых версий. Например, если у вас интернет-магазин на Wordpress и вы изменили цену товара в одной языковой версии, то она автоматически меняется в других языковых версиях соответствующего товара. Желательно отметить все поля.
  • WPML compatibility. Дает возможность использовать языковые пакеты WPML. Стоит включать.
  • Tools. Содержит только одно поле, отвечающее за удаление данных работы Polylang после удаления плагина. Стоит оставить неотмеченным.

4. Определите язык по умолчанию

После осуществления настроек стоит воспользоваться предложением Polylang о назначении языка «по умолчанию» для всех существующих на данный момент страниц и таксономий. Сообщение с этим предложением вы увидите в верхней части экрана на странице Languages.

После нажатия кнопки подтверждения все ваши существующие страницы, записи и товары автоматически «свяжутся» с основным языком сайта.

5. Переведите тему и плагины

Для этого нам понадобится Loco Translate. Ссылка на него находится на левой панели. Сначала выберите, что вы хотите перевести в первую очередь – тему или плагины (см. скриншот ниже).

Например, давайте выберем Woocommerce из списка установленных плагинов. Перейдем на него и увидим список доступных языковых файлов, куда следует вносить перевод. В большинстве случаев, вы найдете здесь все языки, которые вам нужны. Но если определенного языка, с которым вы хотите работать, нет в списке, то нужно его создать, нажав на кнопку «Новый язык» (см. скриншот ниже).

Например, добавим греческий, который отсутствовал в списке языков плагина Woocommerce (см. ниже).

После того, как новый язык успешно добавлен, вы увидите его в общем списке языковых файлов. Выбираете его и переходите на страницу редактирования, где осуществляете перевод всех необходимых строк (см. скриншот ниже).

Переводы такого типа не обязательно делать вручную. В интернете существует большое количество уже готовых переводов для популярных плагинов или тем, и вы, вероятно, без проблем их сможете найти и скачать. Далее загрузите файл перевода в виде .mo или .po файлов, воспользовавшись кнопками, как на скриншоте ниже.

6. Воспользуйтесь php-функциями Polylang для точечного перевода строк

В идеальном случае, после внесения переводов в Loco Translate, на сайте не должно остаться непереведенных слов или словосочетаний. Но, к сожалению, не все плагины могут быть переведены с помощью Loco Translate. Некоторые из них просто не имеют .po файлов для перевода. Для таких случаев можно использовать php-функции плагина Polylang. Чтобы понять, как это работает, рассмотрим следующий пример. Допустим, мы осуществляем перевод сайта с английского на украинский, и у нас остались непереведенные строки “Product” (Товар) и “Price” (Цена). Чтобы перевести их, сделаем следующее:

  1. Открываем файл functions.php темы в административной панели сайта.
  2. Проводим регистрацию строк в базе плагина Polylang с помощью функции pll_register_string() (более подробно о ней можно прочитать здесь):
    
    pll_register_string('Price', 'Price');
    pll_register_string('Product', 'Product');
    
    
  3. После этого заходим на страницу Strings translations, которая находится на левой панели навигационного меню.
  4. Над таблицей перевода воспользуемся полем поиска, которое расположено над ней, чтобы найти непереведенное слово или словосочетание, которое мы зарегистрировали с помощью pll_register_string(). Найдя его, вносим перевод и сохраняем изменения. На скриншоте показан пример такого поиска по слову «Продолжить».
  5. После сохранения изменений возвращаемся к файлу functions.php и создаем ассоциативный массив с переводом, где ключом является слово или словосочетание, которое следует перевести, а значением – его перевод, возвращенный вызовом функции pll __ () (подробнее о работе функции можно прочитать здесь).
    
    $to_translate = array(
        'Product' => pll__('Product'),
        'Price' => pll__('Price'),
    );
    
    
  6. Ниже под массивом добавляем фильтр функции gettext(), который будет перехватывать попытку перевода определенной строки и возвращать перевод из ассоциативного массива $to_translate. Детали по работе данного фильтра можно найти здесь.
    
    add_filter('gettext', function($translation, $text) {
    
        global $to_translate; 
    
        if(!empty($to_translate[$text])) { 
            // если по выбранному ключу есть значение в массиве, то возвращаем его
            return $to_translate[$text]; 
        }
    
        // если значение не было найдено, возвращаем исходный текст
        return $translation; 
    
    }, 10, 3);
    
    
    После добавления этого фильтра в functions.php дочерней или основной темы, вы можете перехватывать вывод конкретных фраз из плагинов, разработчики которых не заложили возможности многоязычности.
  7. Если и после этих действий у вас на сайте остались непереведенные слова, есть вероятность того, что они были внесены непосредственно в код плагина или темы. Такая практика, как правило, отсутствует в официальных плагинах, но изредка может встречаться в самописных скриптах, например:
    
    <span>Go home</span>
    
    
    В таком случае, мы регистрируем это словосочетание «Go home» с помощью функции pll_register_string, вносим ее на странице Strings translations (как было описано выше), а затем замещаем ее в файле вызовом функции перевода Polylang:
    
    <span><?php pll_e( 'Go home' ) ?></span>
    
    

7. Переведите контент

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

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

Подобные поля имеют все типы записей и таксономий.

8. Настройте навигацию

Финальным этапом перевода сайта на Wordpress является локализация меню, чтобы навигация отвечала языковой версии. Для этого перейдите на страницу «Внешний вид» (Appearance) и выберите «Меню» (Menu)

Нужно создать новые меню для каждого языка и внести в них ссылки на страницы соответствующей версии.

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

В настройках нового меню нужно указать расположение (позицию) этого меню в шаблоне сайта.

Наконец-то! Мы успешно настроили многоязычность на сайте Wordpress, что не только соответствует новому законодательству Украины, но и делает его более удобным для пользователей.

Ярослав Ясинский
Веб-разработчик
Занимаюсь веб-разработкой с 2015 года. Специализируюсь на создании, модификации и поддержке сайтов на различных CMS. Интересуюсь электроникой и современными технологиями, для вдохновения организовываю туристические походы в Карпаты. Если у вас есть вопросы относительно этой статьи, пожалуйста, напишите на электронный адрес yaroslav@arto.agency.

Узнавайте о важном первыми!

Учебные материалы, важные новости, обзоры. Мы пишем вам тогда, когда действительно есть что сказать
КОММЕНТАРИИ
КОММЕНТИРОВАТЬ
ВОЙТИ
  • Facebook
  • Twitter
ДЕНИС
27 июля 2020, 17:48
По локализации/переводу изображений - Вы написали, что можно иметь разные изображения для разных языков, но это не так. Можно менять их атрибуты альт, и проч. для разных языков, но не само изображения
НИКОЛАЙ АШПИН
28 июля 2020, 12:57
Денис, спасибо за ваш комментарий! Вы правы, исправили соответствующий абзац в статье.
ЭТОТ САЙТ ИСПОЛЬЗУЕТ COOKIES
Мы используем cookies для анализа трафика, обеспечения функций социальных сетей и работы системы комментирования на сайте. Список устанавливаемых cookies находится на этой странице. Согласны ли вы на установку cookie?