Як додати декілька мовних версій на сайт Wordpress: покрокова інструкція

Стаття орієнтована на людей, знайомих зі структурою файлів Wordpress. Всі правки можна зробити, маючи доступ до адміністративної панелі сайту.

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

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

Для сайтів в Україні, які наразі не мають версії державною мовою, її впровадження може викликати певні технічні труднощі. Саме тому у цій статті ми вирішили розповісти, як додати другу мову на сайт на прикладі CMS Wordpress, яка є найпопулярнішою системою управління контентом у світі.

Що необхідно для додавання багатомовності?

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

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

Покрокова інструкція додавання багатомовності

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>
   
   

   У такому випадку, ми реєструємо це словосполучення за допомогою функції pll_register_string(), вносимо її на сторінці Strings translations (як було описано вище), а потім заміщуємо її в файлі викликом функції перекладу Polylang:

   
   <span><?php pll_e( 'Go home' ) ?></span>
   
   

7. Перекладіть контент

Після того, як ми переклали тему та плагіни, наступним кроком є переклад контенту. Для цього в адміністративній панелі сайту ми обираємо будь-яку сторінку, допис, категорію чи товар, який хочемо перекласти, і натискаємо кнопку додавання перекладу цього матеріалу на іншу мову. Вона має вигляд плюса. Якщо ж ви хочете не додати, а відредагувати раніше створений переклад для певної статті, тоді потрібно натискати кнопку, що має вигляд олівця.

І нарешті, якщо альтернативні мовні версії сторінки вже створені, але вони між собою не зв’язані (система сприймає їх як дві окремі сторінки, написані різними мовами), то варто об’єднати їх вручну. Для цього зайдіть на сторінку редагування матеріалу і у правій панелі у блоці Polylang почніть вносити назву сторінки альтернативної мовної версії у відповідне поле. Коли вона з’явиться у випадаючому списку під полем, то оберіть її, натиснувши лівою кнопкою миші.

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

8. Налаштуйте навігацію

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

Потрібно створити нові меню для кожної мови і внести до них посилання на сторінки відповідної версії.

Також у меню потрібно додати перемикач мов.

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

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