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

Для реализации данной инструкции на собственном сайте необходимо
приобрести премиум-пакет «Про».

Одно мгновение – и Ваш веб-сайт будет доступен более чем на 100 языках.

В этой инструкции мы рассмотрим установку Google переводчика на Ваш сайт, для автоматического перевода текста на Вашем сайте.

Шаг 1: настройка Google переводчика

Первым делом необходимо перейти на страницу настройки Google переводчика по ссылке https://translate.google.com/manager/website/?hl=ru. На этой странице, нажмите кнопку Добавить на сайт:

Главная страница Google переводчика

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

Настройка информации о сайте

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

Языки перевода

Настраивая языки перевода Вы можете выбрать два варианта:

  • Все языки - в этом случае сайт может быть переведен на сотни имеющихся языков;
  • Выбранные языки - в этом случае откроется дополнительная панель, на которой Вам будет предложено выбрать языки, на которые можно переводить Ваш сайт:
Выбор языков для перевода

Формат отображения

Настраивая формат отображения, Вы можете выбрать три варианта:

  • Прямо в тексте;
  • Вкладка;
  • Автоматический показ.

При выборе варианта Прямо в тексте, панель с предложением перевода будет отображаться на Вашем сайте. Ниже Вам будет предложено выбрать три варианта оформления выпадающего списка:

  • Вертикально - вертикальное отображение панели;
    Вертикальный вид панели перевода
  • Горизонтально - горизонтальное отображение панели;
    Горизонтальный вид панели перевода
  • Только раскрывающийся список - только выпадающий список для выбора перевода.
    Панель перевода в виде выпадающего списка

При выборе варианта Вкладка, панель с предложением перевода будет отображаться на Вашем сайте. Ниже Вам будет предложено выбрать четыре варианта расположения вкладки:

  • Справа внизу
  • Слева внизу
  • Справа вверху
  • Слева вверху

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

Дополнительные настройки

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

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

Если Вам необходимо отслеживать статистику переводов в Google Analytics, установите галочку в пункте Отслеживать трафик на переведенных страницах с помощью Google Analytics и в появившемся поле укажите свой Вставьте идентификатор веб-ресурса Google Analytics (пример, UA-12345-12).

По окончанию всех настроек, нажмите кнопку Получить код:

Настройка панели перевода

У Вас откроется страница с текстовым полем, в котором необходимо скопировать код. Скоро он нам понадобится:

Копирование сгенерированного кода

Шаг 2: добавление Google переводчика на сайт

По всем правилам, нам необходимо добавить скопированный код на все страницы нашего сайта в то место, где мы желаем видеть отображение панели с предложением перевода. Мы рассмотрим два варианта:

  • Добавление на сайт в указанное нами место;
  • Закрепление в верхней части сайта - реализация нестандартного подхода, позволяющий создать фиксированную панель или статическую.

Добавление на сайт в указанное нами место

Перейдите в редактор своего сайта.

Разместите в нужном месте Вашего сайта виджет HTML-код:

Виджет HTML-код

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

Сохранитесь и опубликуйте свой сайт.

Закрепление в верхней части сайта

Перейдите в панель управления сайтом.

В панели управления сайтом нажмите в виджетах сайта на Свой код:

Виджет Свой код

Далее, создайте новую вставку кода, назовите её, например, Стили и добавьте в неё следующий код:

<style>
 #google_translate_element {
 position: fixed;
 top: 0;
 right: 100px;
 background: #fff;
 padding: 5px 10px;
 border-bottom: 1px solid;
 border-right: 1px solid;
 border-left: 1px solid;
 border-color: #cdcdcd;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 }
</style>

Этот стиль зафиксирует панель перевода в верхней части (при прокрутке страницы, панель будет следовать за Вами). Если Вам необходимо, чтобы панель отображалась сверху, но не следовала за Вами при прокрутке, измените в параметре position: fixed; значение fixed на absolute.

Фон панели Вы можете изменить в параметре background: #fff;, где значение #fff - код Вашего цвета.

Сохраните добавленный код. В настройках укажите В head и добавьте ко всем страницам в разделе Применить к страницам.

Настройка добавления стилей

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

Настройка добавления кода панели перевода

Вернитесь обратно и опубликуйте Ваш сайт.

Понравился материал?
Вы можете воспользоваться услугами автора материала – исполнителя Divly!