<2005>itvsm.com</2021>

Добавление языковой версии. Google Переводчик на сайт в 2021 году.

Добавление языковой версии. Google Переводчик на сайт в 2021 году.

Простейшие примеры добавления языковой версии на сайт.

Эти примеры подходят для сайтов на любой CMS (WordPress, OpenCart… и др. )

QR: Добавление языковой версии. Google Переводчик на сайт в 2021 году. | https://itvsm.com/mnogoyazychnyy-sayt-dobavlenie-yazykovoy-versii-na-sayt.html

Первое и самое простое действие — Установить переводчик GOOGLE

Однако на наши запросы типа «Переводчик сайтов – Google Переводчик — Google Translate» нас пошлют (т.е. отправят) по адресу
Содержимое посыла комментировать не будем. Т.е. по сути гугл продвигает свой браузер, в котором встроен переводчик с зависимостью от локации и ваших предпочтений. К примеру — если у вас локация Украина и предпочитаемый язык — украинский, то вам будут предлагать все иноязычные сайты перевести на украинский. Однако не все пользуются браузером Google Chrome. А нам необходимо охватить максимум посетителей.

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

Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода.

Основным нашим требованием будет: Встраиваемый код должен МИНИМАЛЬНО грузить наш сайт. МИНИМАЛЬНО! На страничке https://developers.google.com мы можем проконтролировать загрузку сайта до установки кода и после (до установки кода имеем показатели: 89 Для мобильных и 98 для настольных систем)
Google переводчик
Вставляем код и проверяем снова (после установки кода имеем показатели: 82 Для мобильных и 100 для настольных систем). Т.е. потери составляют всего 7 пунктов для мобильных версий, что не критично и на работе сайта сильно не скажется.

Код вставки Google переводчика для сайта


код вставки:

<div id="google_translate_element" >
</div>

<script type='text/javascript'>
 function googleTranslateElementInit() {
  new google.translate.TranslateElement({
  pageLanguage: 'ru',
  layout: google.translate.TranslateElement
                .FloatPosition.TOP_LEFT,
  autoDisplay: false,
  multilanguagePage: true
    }, 'google_translate_element');
  }
</script>

<script type='text/javascript' 
src='//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit'>
</script>
Как правильно вставить?
DIV вставляем в необходимое место (например в виджет в шапке сайта или возле меню)
<div id="google_translate_element" ></div>
Скрипты желательно в «подвал» — (footer сайта)

И на крайний случай, для тех кто не желает особо заморачиваться, все можно вставить одним блоком. Не совсем правильно, но работать будет также.

Данный Google переводчик использует свои стили по умолчанию. При желании их можно изменить и подогнать под свой сайт по размерам и цветам. Все это можно сделать в style.css своего сайта.

И для желающих иметь свой перевод сайта, не гугловский. Еще один относительно простой способ. Конечно можно использовать готовые плагины. Но мы будем исходить из максимальной простоты и минимальной нагрузки на сайт.

Суть вкратце:
На странице мы будем использовать DIVы к примеру с содержанием на русском и украинском языках
div’s

<div id="ro" class="ro">
 <!--русский / russian//-->  
</div>

<div id="ua" class="ua">
 <!--український/ukrainian//-->    
</div>
Один из DIVов делаем по умолчанию видимым, другой `display:none`

При нажатии на флаг выбранного языка происходить подмена состояния display.

DIV на выбранном языке становится видимым, другой скрытым. И наоборот.

Для осуществления данной функции подключаем к нашему сайту JS скрипт следующего содержания:

lang.js

function myvisibleRu() {
  var x = document.querySelectorAll("div.ua");
  var y = document.querySelectorAll("div.ro");

        var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.display ="none";
    }
       var z;
    for (z = 0; z < y.length; z++) {
        y[z].style.display ="block";
    }
  }
 function myvisibleUA() {
  var x = document.querySelectorAll("div.ua");
  var y = document.querySelectorAll("div.ro");

        var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.display ="block";
    }
       var z;
    for (z = 0; z < y.length; z++) {
        y[z].style.display ="none";
    }
  }

Как это работает на практике можно посмотреть на примере:
Но это только начальная часть. А как же остальное содержание сайта? При выборе содержания на русском нам необходимо, чтобы открытие по всем внутренним ссылкам шло далее на русском, и наоборот. Как этого достичь? Для этого используем PHP и код следующего содержания:
PHP ?lang=ro

  <?php
$lang=$_GET['lang'];
if (empty($lang)) {
$lang='ro';
}else{
$lang=$lang;
}
if ($lang==ro){
$displaRo='block';
$displaUA='none';
}else {if ($lang==ua)
$displaRo='none';
$displaUA='block';
}
?>
Для завершения дополняем наши DIVы
div's
	
<div id="ro" class="ro" 
style="display:<?php echo $displaRo;?>">
<!--русский / russian//-->     
</div>

<div id="ua" class="ua" 
style="display:<?php echo $displaUA;?>">
<!--український/ukrainian//-->     
</div>
Т.е. мы присваиваем DIVам значения display: block или none. И при дальнейшем просмотре сайта мы его видим на выбранном один раз языке. Иначе нам пришлось бы при открытии новой страницы повторно делать выбор отображаемого языка.
Флагам стран, обозначающим языки мы присваиваем следующие значения:
Флажки выбора языка

<a href="?lang=ua" onclick="myvisibleUA();">ua</a>
<a id="en">en</a>
<a href="?lang=ro" onclick="myvisibleRu();">ru</a>
	

На этом все. Остается вопрос меню. Так как при данном способе мы рассмотрели только внутреннее содержание страниц и статей. Но это отдельная тема.

6 комментариев: Добавление языковой версии. Google Переводчик на сайт в 2021 году.

Пожалуйста будьте внимательны! Комментарии:
  • С рекламой - удаляются автоматически,
  • Линки (ссылки) на сторонние ресурсы - удаляются автоматически,
  • Сообщения не по теме удаляются автоматически.

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

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

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