Меню Рубрики

Установка двух языков на сайте

Как создать многоязычный сайт на WordPress

Здравствуйте, друзья! Сегодня мы поговорим с Вами о том, как создать многоязычный сайт на WordPress. Если Вы хотите сделать несколько языковых версий сайта, тогда этот урок сможет Вам в этом помочь.

Мультиязычность на сайте мы будем делать с помощью бесплатного и достаточно нового плагина WPGlobus — Multilingual Everything!.

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

Сразу хочу сказать, что из достаточно огромного количества плагинов для создания нескольких языковых версий сайта, именно WPGlobus мне понравился больше всех, в связи с чем, я Вам его и рекомендую!

Как создать несколько языковых версий сайта WordPress

1. Устанавливаем и активируем плагин WPGlobus — Multilingual Everything!.

2. После активации плагина переходим в WPGlobus -> Языки.

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

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

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

Если же Вы хотите убрать какой-то язык — просто снимите флажок c языка который хотите убрать, и нажмите кнопку «Сохранить изменения».

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

6. Далее указываем меню, в котором будет отображаться переключатель языковых версий сайта. Для этого в выпадающем списке выбираем нужное меню. Обычно меню на сайте одно, так что сложностей в выборе быть не должно 🙂

Не забудьте нажать кнопку «Сохранить изменения». После этого можно считать, что настройка плагина завершена.

7. После такой простой и быстрой настройки плагина, можно смело приступить к переводу наполнения сайта на другие языки. Что для этого нужно сделать?

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

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

Вот таким образом выглядит переключатель языков в меню:

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

Замечу, что для плагина WPGlobus есть несколько полезных бесплатных и платных дополнений, но это уже совсем другая история.

Как видите, создать мультиязычный сайт на WordPress достаточно просто. В случае если у Вас возникли вопросы или что-то не получилось — смело пишите в комментариях.

Читайте также:  Установка vmware tools gentoo

источник

Простой способ добавить несколько языков на сайт

Введение

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

Поиск в интернете показал, что существующие варианты создания мультиязычного сайта крайне громоздки и неэффективны. Подключать сторонние библиотеки зачастую проблемно, а советы по написанию своего решения связаны с большим объёмом однотипной работы.

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

Исходные файлы примера сайта с автоматическим переводом можно скачать на github

Существующие альтернативы

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

    Создание дублирующих html блоков с текстом на разных языках, из которых только один оставляется активным для пользователя, а остальные прячутся (display: none).

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

Подключение стороннего сервиса машинного перевода (такого как google translate) с большим количеством встроенных языков и минимальными изменениями в исходном коде страницы.

Когда задача только появилась в task list мы использовали этот способ как самый очевидный и удобный, однако опыт работы с клиентами – носителями языка из соединённых штатов и Израиля показал, что машинный перевод часто допускает ошибки при смене локали, а пользователи сайтов крайне резко реагируют на подобные ошибки перевода. В конце концом стратегические партнеры настойчиво посоветовали сменить способ изменения локали, и от этого способа пришлось отказаться.

Смена языка при помощи возможностей js или сторонних библиотек/фреймворков, таких как jQuery, основанных на поиске и прямом изменении DOM элементов.

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

Альтернативное решение

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

Читайте также:  Установка webasto на ford explorer

В изменении локали при альтернативном подходе выделяются три основных игрока:

  • html страница с установленным правилом оформления селекторов блоков с текстом
  • общий js сервис, основная задача которого состоит в замене textContet DOM элементов согласно правилу оформления селекторов
  • JSON файл локали, содержащий в себе структуру с содержанием html блоков на всех языках, используемых при смене локали

Соблюдение правила оформления селекторов изменяемых элементов позволяет избавиться от необходимости менять js код сервиса смены локали, что является большим плюсом с точки зрения масштабируемости проекта.

Правило построения селекторов

Большинство методов смены локали страницы (среди приведенных альтернатив 1,3 и частично 2) предполагают необходимость каким-либо способом «пометить» изменяемый html блок, как правильно при помощи изменении поля class. Этот же механизм использует и альтернативный вариант.

Первым шагом оформления селекторов является разделение исходной страницы на функциональные блоки верхнего уровня. На странице нашей компании — это блоки:
Каждому блоку даем условное название, например,

Визитная карточка (home)

Пример работы сервиса (example)

Партнеры (clients)

Область применения сервиса (userfulBlock)

Примеры работы сервиса (examples)

Контакты и обратная связь (contacts)

После этого мы далее разбиваем каждый блок на более мелкие функциональные блоки, как это делается при применении библиотеки React.

Выделенным областям присваиваем свои имена и получаем структуру вида:

home main, description, buttons

example statistics, headline, description, buttons

clients buttons

userfulBlock headline, userfulCards, elseBlock

examples headline, cards

contacts headline, description, contacts, form

Далее продолжаем эту процедуру пока не достигнем блоков, содержащих исходный текст.

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

Каждый селектор начинается с ключевого слова locale и далее, согласно стилю dash case добавляются имена всех родительских блоков включая блок, содержащий исходный текст, например, описание примера в первой карточке будем иметь селектор locale-example-cards-description

Пример полученного файла json локали можно увидеть на github

Сервис смены локали

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

с необязательным параметром defLang – язык установленные после загрузки локали (язык по умолчанию), а также основную функцию изменения текущей локали

с указанием требуемого языка.

Функция загрузки локали

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

Читайте также:  Установки для очистки зерновой пыли

Функция изменения локали

Типы данных

Представляет собой рекурсивную функцию, основной задачей которой являет обход объекта, содержащий локаль страницы (используя DFS алгоритм). Использование рекурсии при построении функции позволяет закодировать алгоритм максимально просто и лаконично, однако слишком большая глубина рекурсии может привести к переполнению стека. Особенности обхода данной проблемы можно найти на одноименном форуме, либо же ознакомившись с соответствующими статьями на habr.com.

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

    поле содержащее строку исходного текста, используемого для добавления на страницу.
    Например:

поле содержащее массив строк исходного текста, используемого для добавления на
страницу. Такое поле необходимо для создания списков, элементы которых могут менять
порядок. Например:

Вложенная структура данных, содержащая свой набор полей, необходимая для построения
архитектуры страницы. Например:

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

На сайте это может выглядеть так:

Функции обработки

Обработка типа данных с исходным текстом осуществляется отдельной функцией

Принимающей на вход название поля структуры с исходным текстом, текущий объект локали, содержащий текст, который нужно добавить и текущее имя селектора, необходимое для поиска DOM элемента.

Обработка массива строк с исходным текстом также осуществляется отдельной функцией

Сигнатура и тело этой функции ничем не отличается от прошлой за исключением того, что элементам DOM присваиваются элементы из массива.

Основная рекурсивная функция замены текста занимается классификацией текущего поля локали в один 4 приведенных выше типов и соответствующей реакцией на полученный тип:

На вход эта функция принимает текущую языковую локаль и корневой селектор (в данном случае “locale”). Далее при обнаружении вложенной структуры или массива структур функция будет рекурсивно вызывать саму себя, соответствующе изменяя входные параметры.

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

Заключение

Суть описанного выше подхода заключается в зафиксированном правиле описания селекторов и построения файла локали. Благодаря этому появляется уникальная возможность перевода любых страниц из коробки и переиспользования уже переведенного материала.

Описанный выше алгоритм построения селекторов не является обязательным и критичным для работы сервиса. Сервис является гибким для расширения и добавления новых методов и алгоритмов, а также для построения имен селекторов и структуры json локали. Возможным плюсом будет являться сохранение локали в cookie браузера и изменение локали, в зависимости от местоположения пользователя сервиса.

Исходные файлы примера сайта с автоматическим переводом можно скачать на github.

источник

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

Adblock
detector