В этой статье мы рассмотрим, как создать классическую шапку и использовать ее на каждой странице без исключения с помощью небольшого куска кода. Это ускоряет создание мультиязычного сайта, особенно если страниц много.
Для начала необходимо создать соответствующий заголовок, который имеет определенное количество блоков. Убедитесь, что есть версии для всех необходимых языков: в нашем случае это русский, украинский и английский.
В настройках сайта подключите шапку и подвал, не забудьте сохранить изменения:
Далее переходим в настройках во вкладку «Еще» — HTML-код для вставки внутрь head — редактировать код.
Сюда вставляем код для всех языковых версий (код под скриншотом).
Для каждой языковой версии есть строка, которая поможет скрыть все блоки, которые не нужны для текущей языковой версии.
<script>
$(document).ready(function(){
var pathname = window.location.pathname;
switch (true) {
/*Английская версия */
case /(\/en\/)|(\/en$)/.test(pathname):
$('#rec258886322').css('display', 'none'); /*скрыть блоки для всех версий отличной от текущей */
$('#rec258886601').css('display', 'none'); /*скрыть блоки для всех версий отличной от текущей */
break;
/*Украинская версия */
case /(\/ua\/)|(\/ua$)/.test(pathname):
$('#rec233983916').css('display', 'none'); /*скрыть блоки для всех версий отличной от текущей */
break;
/*Русская версия (главная)*/
default:
$('#rec258887320').css('display', 'none'); /*скрыть блоки для всех версий отличной от главной */
$('#rec258886322').css('display', 'none'); /*скрыть блоки для всех версий отличной от главной */
}
});
</script>
Так как все три шапки находятся в одном header, в этом коде нам нужно скрыть лишние header. В этой строке вставьте ID блока ненужной шапки (например, для русской версии не нужны будут английская и украинская). Вставьте ID английской версии в первой строке, ID украинской во второй.
Не забудьте сохранить изменения!
Наша шапка подключена, и все, что нам нужно сделать, это указать адрес страницы в настройках для каждой шапки (для русской — просто «/название», для английской — «/en/название», для украинской — «/ua/название») и 3 раза переопубликовать страницу. То есть после каждого раза, как вы указываете адрес версии сайта на другом языке.
6 ответов
Здравствуйте! Все работает на версии для ПК отлично, но на других адаптивах лишние шапки не скрываются и в итоге отображаются все 3. Где я мог допустить ошибку или как это исправить? Использую шапку ME301
Может быть вы используете разные блоки для разных разрешений экранов? Или случайно настроили отображение кода только на ПК версии?
А что за .test в блоке?
Что вместо него нужно подставить?
В теории именно вместо .test ничего подставлять не нужно.)
Добрый день! До сих пор проблема с мобилкой именно в части шапки (футер отлично работает). Может как то можно исправить?
Нужно смотреть именно живой пример, т.к. если работает футер, то и хедер должен работать. Можете пожалуйста поделиться ссылкой на проект?