Этот гостевой пост написан Дааном из wplift.com. Недавно он запустил EasyThemePacks — потрясающую премиум-библиотеку шаблонов Elementor. Он покажет Вам, как именно переводить их с помощью WPML.
Если Вы регулярно используете Elementor, то, вероятно, уже хорошо знаете, как Elementor позволяет создавать красивые дизайны без написания кода. Но может ли Elementor помочь Вам в создании красивых многоязычных дизайнов?
Хорошие новости: с WPML это возможно!
К концу этого руководства Вы будете точно знать, как начать создавать многоязычные сайты на базе Elementor, даже если Вы используете полностью пустой шаблон Elementor Canvas.
Что нужно для создания многоязычного сайта с Elementor
Вот все, что Вам понадобится для выполнения этого руководства:
- Страница, созданная в Elementor — мы используем шаблон Barista Bluegrass от EasyThemePacks, представляющий собой готовый дизайн целевой страницы на основе пустого шаблона Elementor Canvas.
- WPML Multilingual CMS — это то, что поможет Вам создать многоязычный сайт WordPress, включая контент Elementor.
Вам также нужно убедиться, что установлены другие компоненты пакета WPML Multilingual CMS, в частности WPML Перевод строк и WPML Управление переводами.
Как только у Вас появится все самое необходимое, давайте разберемся, как использовать WPML для создания многоязычного сайта на Elementor!
Шаг 1: Установите и активируйте WPML CMS и компоненты
После установки WPML Multilingual CMS и ее компонентов Вы можете запустить мастер настройки WPML, чтобы задать базовые языковые настройки (например, на какие языки Вы хотите перевести свои дизайны Elementor).
В этом примере мы переведем наш шаблон на немецкий язык (с помощью Google Переводчика — извините за возможные ошибки, поборники немецкой грамматики!):
Убедитесь, что Вы также включили менеджера переводов (WPML предложит Вам сделать это в консоли — это трудно пропустить, и Вам нужно будет только нажать кнопку).
Шаг 2: Перейдите на страницу Elementor, которую хотите перевести
После того как Вы задали базовые настройки WPML, перейдите в редактор консоли WordPress для той страницы Elementor, которую хотите перевести (не открывайте редактор Elementor — оставайтесь в обычном редакторе WordPress).
Вот как выглядит шаблон Barista Bluegrass от EasyThemePacks на родном английском языке:
Всего через несколько минут мы сможем перевести его на немецкий!
Шаг 3: Создайте новый перевод для Вашего дизайна Elementor
В редакторе WordPress нажмите на значок +, чтобы создать новый перевод Вашего дизайна Elementor:
Откроется удобный редактор с двумя панелями. С левой стороны Вы увидите всю информацию из оригинального английского перевода. WPML извлекает каждую отдельную строку из Вашего дизайна Elementor, а также другие полезные атрибуты (например, URL-адрес, на который ссылается кнопка, чтобы Вы могли направить пользователей на правильный перевод).
Чтобы начать перевод Вашего шаблона Elementor, Вам просто нужно ввести перевод в соответствующее поле с правой стороны:
В процессе работы не забывайте отмечать каждый перевод как Перевод завершен, чтобы Вы могли быстро определить, что уже сделано, а что еще нужно перевести. Кроме того, хотя Вы всегда можете сохранить частичную работу, Вы не сможете отобразить свой перевод на фронтенде, пока не отметите все как завершенное.
Как только Вы закончите переводы и сохраните их, все готово! Теперь Вы сможете редактировать существующий перевод в любое время:
А если Вы перейдете на фронтенд Вашего сайта, то сможете получить доступ к переведенной версии страницы, изменив URL-адрес в соответствии с Вашими предпочтениями (подробнее о том, как создать переключатель языков, чуть позже!).
Вот как выглядит переведенная версия нашего шаблона EasyThemePacks, включая структуру URL-адреса, чтобы Вы могли увидеть, как все локализовано:
Что если Вы измените оригинальный дизайн Elementor?
В какой-то момент Вы, вероятно, столкнетесь с ситуацией, когда захотите изменить оригинальную версию дизайна Elementor.
Итак, что произойдет в этом случае? Потеряете ли Вы свой переведенный контент после внесения изменений?
Нет!
Если Вы когда-либо воспользуетесь интерфейсом Elementor для редактирования существующего перевода Вашей страницы, WPML просто отметит эти переводы в редакторе и даст Вам возможность показать различия:
WPML ничего не сделает с уже переведенными строками, которые не были изменены. Поэтому все, что Вам нужно сделать, — это обновить отредактированный текст, и все готово!
Как насчет переключателя языков с шаблоном Elementor Canvas?
Все дизайны EasyThemePacks основаны на использовании пустого шаблона Elementor Canvas. И если Вы создаете собственные страницы с помощью Elementor, велика вероятность, что Вы также используете пустой шаблон Elementor Canvas.
Когда Вы используете этот шаблон, в Вашей теме оформления нет навигационного меню или боковой панели — двух мест, куда Вы обычно добавляете переключатель языков с помощью WPML.
Так как же тогда дать посетителям доступ к переведенной версии Вашего шаблона Elementor, когда Вы используете Elementor Canvas?
Хотя Вы можете создать свой собственный переключатель языков WPML с помощью кода, самый простой способ — просто добавить шорткод переключателя языков в Ваш шаблон Elementor.
Для этого разместите виджет шорткода Elementor там, где Вы хотите его отобразить, и добавьте этот шорткод:
{{wpml_language_selector_footer}}
Этот шорткод подтянет настройки для Вашего переключателя языка в футере WPML. Чтобы изменить эти настройки, перейдите в WPML → Языки в консоли WordPress и прокрутите вниз до раздела Переключатель языка в футере :
При нажатии на значок карандаша Вы сможете настроить работу Вашего переключателя языков. Вы можете:
- Изменить макет
- Выбрать, отображать ли названия языков и флаги
- Выбрать новую цветовую схему
- Настроить стили отдельных элементов
Совет: использование названия языка — отличный вариант, поскольку это позволяет людям искать свой родной язык с помощью CTRL + F.
Заключительные мысли о том, как переводить Elementor
С пакетом WPML Multilingual CMS легко перевести любой шаблон страницы Elementor, включая те, что основаны на Elementor Canvas, например, премиум-шаблоны, доступные на EasyThemePacks. Вы можете строка за строкой переводить весь контент, который создаете с помощью визуального конструктора страниц Elementor. А если в будущем Вы внесете какие-либо изменения в свой оригинальный дизайн Elementor, WPML поможет Вам найти эти изменения, чтобы Вы могли обновить и переведенную версию.
Наконец, даже если Вы используете пустой шаблон Elementor Canvas, Вы все равно можете добавить удобный переключатель языков с помощью шорткодов WPML или метода с использованием пользовательского кода, на который мы ссылались.
У Вас остались вопросы о том, как переводить дизайны Elementor? Оставьте комментарий!
