Добавление языкового меню
Языковое меню — это особый элемент в шапке и подвале сайта, который позволяет вашим посетителям переключаться между разными языками на вашем мультиязычном сайте. При нажатии на языковой компонент в меню, посетители будут перенаправлены на выбранную языковую версию сайта.
Подсказка: узнайте, как создать мультиязычный сайт на нашей платформе в статье Создание мультиязычного сайта.
Сейчас на платформе доступно два варианта этого элемента: это Языковое меню и Языковые ссылки. Далее в статье мы рассмотрим их разницу и ситуации, где лучше использовать тот или иной элемент.
Элемент Языковое меню для ссылок в пределах одного сайта
Элемент Языковые ссылки на сторонние сайты
Чтобы добавить языковое меню на свой сайт, наведите курсор мыши на пустой контейнер и нажмите «плюс», затем выберите один из доступных элементов во всплывающем окне:
Важно: элемент Языковые ссылки можно добавить только в шапку или в строки с горизонтальным потоком в подвале вашего сайта. Элемент Языковое меню пока доступен только для шапки.
Элемент Языковое меню позволяет вам избежать настройки переходов между различными версиями страницы вручную, ведь он синхронизируется с настройками hreflang страниц вашего сайта, которые также проставляются автоматически при добавлении новой языковой версии или копировании страницы из одной языковой версии в другую.
Наведите курсором на элемент и нажмите на "шестеренку", чтобы открыть его Настройки:
В разделе Пункты вы можете видеть активные языки, и, при необходимости, переименовать их для языкового меню:
Подсказка: чтобы ссылка на необходимый язык отображалась в языковом меню, эта языковая версия сайта должна быть видимой - для этого необходимо открыть настройки сайта и в разделе "Мультиязычность" активировать переключатель напротив необходимого языка, чтобы возле него было указано "Видимый". Подробнее вы можете найти в шаге №8 этого раздела инструкции.
В разделе Вид вы можете выбрать структуру вашего языкового меню - будет ли оно горизонтальным или в форме выпадающего списка, а также выбрать присутствующие в нем элементы:
В соответствии с выбранными в предыдущем разделе параметрами, вам будут доступны различные Стили этих параметров, например:
Подсказка: нажав на шестеренку возле настроек цветов, вы откроете дополнительные параметры.
Примечание: подробнее о работе с тенями вы можете узнать в нашей статье.
В разделе Продвинутые вы можете добавлять свои CSS-классы к этому элементу, чтобы при необходимости обращаться к ним в собственном коде. Подробнее о добавлении классов.
Важно: рекомендуем добавлять новые страницы языковых версий сайта путем сначала создания страницы на одном языке, после завершения работы над страницей скопировать ее на необходимые языковые версии, где после этого переводить на нужные языки (см. шаг №7 этой статьи. Этот метод не только ускорит вашу работу, но и таким образом страницы будут автоматически связываться между собой в языковом меню.
Если вы создавали новые страницы языковой версии не путем копирования страниц другой языковой версии сайта, то такие страницы будет необходимо связать вручную. Для этого необходимо перейти в настройки страницы, открыть вкладку SEO и снизу в разделе hreflang нажать кнопку Редактировать и указать другие языковые версии этой страницы.
Примечание: если в настройках страницы не указано hreflang (ссылки на другие языковые версии этой страницы), то на такой странице в языковом меню будут ссылки не на такую же страницу на другом языке, а на главную страницу другой языковой версии сайта.
Подсказка: вы можете узнать больше о hreflang в этой инструкции.
Этот элемент уже не синхронизируется с настройками вашего сайта и страниц - его нужно настраивать полностью вручную, от списка языков до переходов на другие версии страниц.
Важно: данный элемент является менее рекомендованным, ведь он является старой версией языкового меню и сейчас предназначен только для создания многоязычного сайта в пределах различных сайтов (на субдоменах). Это может быть целесообразным только в случае необходимости создания многоязычного интернет-магазина или блога, что сейчас невозможно в пределах одного сайта.
Наведите на элемент и кликните на «бегунок», чтобы открыть его настройки:
В новом окне вы можете выбрать Language menu type — вариант отображения вашего языкового меню на сайте. По умолчанию языковое меню добавляется как Dropdown. Переключитесь на опцию Horizontal, чтобы изменить отображение:
В настройках ниже вы также можете изменить Number of languages — количество языков в меню:
Важно: максимальное количество языков в языковом меню — 8.
Здесь вы также можете настроить Menu style — будет ли компонент отображать только название языка, его иконку или и то, и другое. Помимо этого, вы можете изменить Text hover color — цвет текста при наведении курсора:
Примечание: если ваше языковое меню отображается как Dropdown, вы также можете настроить его фоновый цвет:
Вы можете изменить иконку для определенного языка в меню, нажав на нее. Обратитесь к статье Настройки иконок для более детальной информации.
Чтобы изменить текст в элементе, выделите его и отредактируйте его отображение во всплывающем меню. Нажмите на «цепочку» в конце меню, чтобы добавить к тексту ссылку на нужный вам адрес:
Важно: при добавлении ссылок к тексту в этом элементе, нужно, как и при работе с обычным текстом, сначала выделить его.
После всех изменений, не забудьте опубликовать свой сайт, чтобы они вступили в силу.
Важно: если у вас отсутствует функция добавления языкового меню в шапку или подвал вашего сайта, вы используете устаревшую версию блока. Чтобы получить доступ к новым функциям и избежать непредвиденных проблем с отображением, добавьте блоки wirefrime-series-1-header и wireframe-series-1-footer на ваш сайт.
Подсказка: узнайте, как создать мультиязычный сайт на нашей платформе в статье Создание мультиязычного сайта.
Сейчас на платформе доступно два варианта этого элемента: это Языковое меню и Языковые ссылки. Далее в статье мы рассмотрим их разницу и ситуации, где лучше использовать тот или иной элемент.
Элемент Языковое меню для ссылок в пределах одного сайта
Элемент Языковые ссылки на сторонние сайты
Добавление языкового меню
Чтобы добавить языковое меню на свой сайт, наведите курсор мыши на пустой контейнер и нажмите «плюс», затем выберите один из доступных элементов во всплывающем окне:
Важно: элемент Языковые ссылки можно добавить только в шапку или в строки с горизонтальным потоком в подвале вашего сайта. Элемент Языковое меню пока доступен только для шапки.
Элемент Языковое меню для ссылок в пределах одного сайта
Элемент Языковое меню позволяет вам избежать настройки переходов между различными версиями страницы вручную, ведь он синхронизируется с настройками hreflang страниц вашего сайта, которые также проставляются автоматически при добавлении новой языковой версии или копировании страницы из одной языковой версии в другую.
Наведите курсором на элемент и нажмите на "шестеренку", чтобы открыть его Настройки:
В разделе Пункты вы можете видеть активные языки, и, при необходимости, переименовать их для языкового меню:
Подсказка: чтобы ссылка на необходимый язык отображалась в языковом меню, эта языковая версия сайта должна быть видимой - для этого необходимо открыть настройки сайта и в разделе "Мультиязычность" активировать переключатель напротив необходимого языка, чтобы возле него было указано "Видимый". Подробнее вы можете найти в шаге №8 этого раздела инструкции.
В разделе Вид вы можете выбрать структуру вашего языкового меню - будет ли оно горизонтальным или в форме выпадающего списка, а также выбрать присутствующие в нем элементы:
В соответствии с выбранными в предыдущем разделе параметрами, вам будут доступны различные Стили этих параметров, например:
Подсказка: нажав на шестеренку возле настроек цветов, вы откроете дополнительные параметры.
Примечание: подробнее о работе с тенями вы можете узнать в нашей статье.
В разделе Продвинутые вы можете добавлять свои CSS-классы к этому элементу, чтобы при необходимости обращаться к ним в собственном коде. Подробнее о добавлении классов.
Важно: рекомендуем добавлять новые страницы языковых версий сайта путем сначала создания страницы на одном языке, после завершения работы над страницей скопировать ее на необходимые языковые версии, где после этого переводить на нужные языки (см. шаг №7 этой статьи. Этот метод не только ускорит вашу работу, но и таким образом страницы будут автоматически связываться между собой в языковом меню.
Если вы создавали новые страницы языковой версии не путем копирования страниц другой языковой версии сайта, то такие страницы будет необходимо связать вручную. Для этого необходимо перейти в настройки страницы, открыть вкладку SEO и снизу в разделе hreflang нажать кнопку Редактировать и указать другие языковые версии этой страницы.
Примечание: если в настройках страницы не указано hreflang (ссылки на другие языковые версии этой страницы), то на такой странице в языковом меню будут ссылки не на такую же страницу на другом языке, а на главную страницу другой языковой версии сайта.
Подсказка: вы можете узнать больше о hreflang в этой инструкции.
Элемент Языковые ссылки на сторонние сайты
Этот элемент уже не синхронизируется с настройками вашего сайта и страниц - его нужно настраивать полностью вручную, от списка языков до переходов на другие версии страниц.
Важно: данный элемент является менее рекомендованным, ведь он является старой версией языкового меню и сейчас предназначен только для создания многоязычного сайта в пределах различных сайтов (на субдоменах). Это может быть целесообразным только в случае необходимости создания многоязычного интернет-магазина или блога, что сейчас невозможно в пределах одного сайта.
Наведите на элемент и кликните на «бегунок», чтобы открыть его настройки:
В новом окне вы можете выбрать Language menu type — вариант отображения вашего языкового меню на сайте. По умолчанию языковое меню добавляется как Dropdown. Переключитесь на опцию Horizontal, чтобы изменить отображение:
В настройках ниже вы также можете изменить Number of languages — количество языков в меню:
Важно: максимальное количество языков в языковом меню — 8.
Здесь вы также можете настроить Menu style — будет ли компонент отображать только название языка, его иконку или и то, и другое. Помимо этого, вы можете изменить Text hover color — цвет текста при наведении курсора:
Примечание: если ваше языковое меню отображается как Dropdown, вы также можете настроить его фоновый цвет:
Вы можете изменить иконку для определенного языка в меню, нажав на нее. Обратитесь к статье Настройки иконок для более детальной информации.
Чтобы изменить текст в элементе, выделите его и отредактируйте его отображение во всплывающем меню. Нажмите на «цепочку» в конце меню, чтобы добавить к тексту ссылку на нужный вам адрес:
Важно: при добавлении ссылок к тексту в этом элементе, нужно, как и при работе с обычным текстом, сначала выделить его.
После всех изменений, не забудьте опубликовать свой сайт, чтобы они вступили в силу.
Важно: если у вас отсутствует функция добавления языкового меню в шапку или подвал вашего сайта, вы используете устаревшую версию блока. Чтобы получить доступ к новым функциям и избежать непредвиденных проблем с отображением, добавьте блоки wirefrime-series-1-header и wireframe-series-1-footer на ваш сайт.
Обновлено на: 29/03/2024
Спасибо!