агентство по разработке сайтов - 3D иллюстрация, разработка сайта на Tilda, сайт на тильде, компьютер, монитор, руки на клавиатуре - MANUFACT PRO

Cквозная многоязыковая шапка на Tilda с тарифным планом Personal

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

 

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

 

агентство по разработке сайтов - скриншот Тильда, настроить многоязыковую шапку на сайте с тарифным планом Personal - блог MANUFACT PRO

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

агентство по разработке сайтов - скриншот Тильда, настройки, назначить шапку и подвал на сайте - блог MANUFACT PRO

Далее переходим в настройках во вкладку «Еще» — HTML-код для вставки внутрь head — редактировать код.

агентство по разработке сайтов - скриншот Тильда, настройки, вставка HTML-кода в HEAD, кнопка редактировать код - блог MANUFACT PRO

Сюда вставляем код для всех языковых версий (код под скриншотом).

агентство по разработке сайтов - скриншот Тильда, Код для сквозной многоязыковой шапки, вставка кода в HEAD, кнопка сохранить - блог MANUFACT PRO

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

				
					<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 украинской во второй.

 

агентство по разработке сайтов - скриншот Тильда, вставка кода в HEAD, код для сквозной многоязыковой шапки на Tilda - блог MANUFACT PRO

Не забудьте сохранить изменения!

Наша шапка подключена, и все, что нам нужно сделать, это указать адрес страницы в настройках для каждой шапки (для русской — просто «/название», для английской — «/en/название», для украинской — «/ua/название») и 3 раза переопубликовать страницу. То есть после каждого раза, как вы указываете адрес версии сайта на другом языке. 

Спасибо за внимание.
Пишите комментарии, делитесь статьёй в социальных сетях с помощью кнопок выше и подписывайтесь на рассылку в нашем блоге. Мы всегда рады новым гостям!

4 Responses

  1. Здравствуйте! Все работает на версии для ПК отлично, но на других адаптивах лишние шапки не скрываются и в итоге отображаются все 3. Где я мог допустить ошибку или как это исправить? Использую шапку ME301

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Другие интересные материалы в нашем блоге
блог диджитал агентства - сайт-визитка иллюстрация - статья блога MANUFACT PRO
Разработка сайтов
Что такое сайт-визитка

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

Читать »
блог диджитал агентства - адаптивный дизайн иллюстрация - MANUFACT PRO
Дизайн
Что такое адаптивный сайт и адаптивный веб-дизайн

Адаптивный дизайн веб-страниц значит корректное отображение сайта на устройствах с различным соотношением сторон. Такой дизайн динамически (в реальном времени) подстраивается под определенные размеры окна браузера.

Читать »
блог диджитал-агентства - интернет-магазин на тильде иллюстрация - статья блога MANUFACT PRO
Инструкции
Подходит ли Tilda для интернет-магазина

Ещё в начале 2020 года Тильда со скрипом подходила для создания интернет-магазинов. Рассказываем, получается ли создать полноценный интернет-магазин в 2021 году.

Читать »
MANUFACT это Digital Agency состоящее из специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.
Выжимки из наших статей и уникальные материалы мы публикуем в нашем Телгерам-канале. Подписывайтесь, чтобы ничего не пропустить.
Зачитались?

Оставьте свой email и получайте актуальный материал от команды MANUFACT.

НУЖЕН САЙТ ИЛИ РЕКЛАМА?
При заказе сайта в нашей студии, бесплатно настроим эффективную рекламу в Google

Зачитались?

Оставьте нам свой e-mail адрес и получайте актуальный материал от команды MANUFACT