Добавляем на форум Google Translate

HDTechVideo

Проверенные
Сообщения
46
Реакции
60
Баллы
8,115
Put this code in the place where you want to put your translate option. I have put it in Logo Header region so that it is easily accessible to all users.

Login to Admin Control Panel
Go to Appearance
Select Template
Edit logo_block
Add this code
Код:
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
Edit EXTRA.css
Add this code
Код:
/* google translate */
.google {
float: right;
margin-top: -35px;
}

Для просмотра этого контента нам потребуется ваше согласие на установку файлов cookie третьих лиц.
Более подробную информацию можно найти на нашей странице cookie.
 
Добавляем на форум Google Translate.

В удобное место шаблона logo_block добавляем:
Код:
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>


В шаблон EXTRA.css добавляем:
Код:
/* google translate */
.google {
float: right;
margin-top: -35px;
}
 
Чтобы не захламлять форум, добавлю в данную тему еще один вариант встраивания панели Google Translate. Сразу отмечу, что использую на своем сайте стиль Velour, но, думаю, и для стандартного стиля подойдет.

Выглядит это вот так:
Снимок экрана 2014-04-09 в 23.53.42.png Снимок экрана 2014-04-09 в 23.53.54.png

Открываем шаблон Breadcrumb и находим в нем следующие строчки:
Код:
<fieldset class="breadcrumb">
<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>
Добавляем после него следующий код:
Код:
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Примечание:
Так как у себя я убрал меню быстрого перехода (маленькая иконка вызывающая всплывающее окно со ссылками на все разделы форума), мой код выглядит следующим образом:
Код:
    <fieldset class="breadcrumb">
        <!--<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>-->
  
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
*Строка "includedLanguages: 'de,en,fr,it'" ограничивает количество доступных языков перевода страницы.

Теперь идем в шаблон EXTRA.css и вставляем туда следующий код:
Код:
/* google translate */
.google {
display: inline-block;
float: right;
margin: 4px 0;
overflow: hidden;
}

Чтобы не захламлять форум, добавлю в данную тему еще один вариант встраивания панели Google Translate. Сразу отмечу, что использую на своем сайте стиль Velour, но, думаю, и для стандартного стиля подойдет.

Выглядит это вот так:
[ATTACH]15210[/ATTACH] [ATTACH]15211[/ATTACH]

Открываем шаблон Breadcrumb и находим в нем следующие строчки:
[CODE]<fieldset class="breadcrumb">
<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>
Добавляем после него следующий код:
Код:
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Примечание:
Так как у себя я убрал меню быстрого перехода, мой код выглядит следующим образом:
Код:
    <fieldset class="breadcrumb">
        <!--<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>-->
     
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
*Строка "includedLanguages: 'de,en,fr,it'" ограничивает количество доступных языков перевода страницы.

Теперь идем в шаблон EXTRA.css и вставляем туда следующий код:
Код:
/* google translate */
.google {
display: inline-block;
float: right;
margin: 4px 0;
overflow: hidden;
}

#google_translate_element .goog-te-gadget-simple {
font-size: 11px;
border-width: 0;
font-family: "tahoma","verdana","arial",sans-serif;
background-color: #DEE5ED;
}

#google_translate_element .goog-te-gadget-simple A:hover {
text-decoration: none;
}
Класс #google_translate_element добавил с целью переназначения стандартных классов Google, и тем самым несколько адаптировать внешний вид панели к стилю форума.

Собственно это все, что требуется сделать. Перевод прекрасно работает, переводит все, включая сообщения в чате TaigaChat. Рабочий вариант можно посмотреть тут - I-SRC.Ru

Надеюсь, кому-то мой вариант пригодится.
 
Последнее редактирование:
carliker, что-то сообщение как-то поломалось у Вас. Какие-то куски кода внизу. ))
 
carliker, что-то сообщение как-то поломалось у Вас. Какие-то куски кода внизу. ))
Вы имеете ввиду куски кода в посте или на сайте? :-)
В посте действительно какой-то косяк образовался, вероятно при редактировании вылез.
 
Подскажите пожалуйста как добавить панельку переводчика правее Оповещений
17-10-2014_21-29-38.png
 
navigation_visitor_tab
 
  • Мне нравится
Реакции: A1ex
Чтобы не захламлять форум, добавлю в данную тему еще один вариант встраивания панели Google Translate. Сразу отмечу, что использую на своем сайте стиль Velour, но, думаю, и для стандартного стиля подойдет.

Выглядит это вот так:
Посмотреть вложение 15210 Посмотреть вложение 15211

Открываем шаблон Breadcrumb и находим в нем следующие строчки:
Код:
<fieldset class="breadcrumb">
<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>
Добавляем после него следующий код:
Код:
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Примечание:
Так как у себя я убрал меню быстрого перехода (маленькая иконка вызывающая всплывающее окно со ссылками на все разделы форума), мой код выглядит следующим образом:
Код:
    <fieldset class="breadcrumb">
        <!--<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>-->

<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
*Строка "includedLanguages: 'de,en,fr,it'" ограничивает количество доступных языков перевода страницы.

Теперь идем в шаблон EXTRA.css и вставляем туда следующий код:
Код:
/* google translate */
.google {
display: inline-block;
float: right;
margin: 4px 0;
overflow: hidden;
}

Чтобы не захламлять форум, добавлю в данную тему еще один вариант встраивания панели Google Translate. Сразу отмечу, что использую на своем сайте стиль Velour, но, думаю, и для стандартного стиля подойдет.

Выглядит это вот так:
[ATTACH]15210[/ATTACH] [ATTACH]15211[/ATTACH]

Открываем шаблон Breadcrumb и находим в нем следующие строчки:
[CODE]<fieldset class="breadcrumb">
<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>
Добавляем после него следующий код:
Код:
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Примечание:
Так как у себя я убрал меню быстрого перехода, мой код выглядит следующим образом:
Код:
    <fieldset class="breadcrumb">
        <!--<a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}">{xen:phrase jump_to}...</a>-->
   
<div class="google">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ru', includedLanguages: 'de,en,fr,it',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
*Строка "includedLanguages: 'de,en,fr,it'" ограничивает количество доступных языков перевода страницы.

Теперь идем в шаблон EXTRA.css и вставляем туда следующий код:
Код:
/* google translate */
.google {
display: inline-block;
float: right;
margin: 4px 0;
overflow: hidden;
}

#google_translate_element .goog-te-gadget-simple {
font-size: 11px;
border-width: 0;
font-family: "tahoma","verdana","arial",sans-serif;
background-color: #DEE5ED;
}

#google_translate_element .goog-te-gadget-simple A:hover {
text-decoration: none;
}
Класс #google_translate_element добавил с целью переназначения стандартных классов Google, и тем самым несколько адаптировать внешний вид панели к стилю форума.

Собственно это все, что требуется сделать. Перевод прекрасно работает, переводит все, включая сообщения в чате TaigaChat. Рабочий вариант можно посмотреть тут - I-SRC.Ru

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

1.jpeg

Так же вопрос, как сделать так что бы было не "выбрать язык", а по английскому эти слова.
 
Последнее редактирование:
Эти все вопросы к гуглу, какой код они дали, такой и есть. :)
 
Put this code in the place where you want to put your translate option. I have put it in Logo Header region so that it is easily accessible to all users.
Пришел иноземец опять со своим самоваром. На их сайтах принципиально не поддерживаются другие языки, тем более русский. Так пусть учат русский
 
Эти все вопросы к гуглу, какой код они дали, такой и есть. :-)
Спасиб) Просто такое видимо только у меня) И на каких то страницах форума одно окошко, на каких то два))

Спасиб) Просто такое видимо только у меня) И на каких то страницах форума одно окошко, на каких то два))
Парни может есть мысли?)
 
я добавлял сначала туда и было то же самое, если про дублирование панельки, поэтому переделал, но не разбирался почему так. Кроме того места и того что я указал, есть и другие.
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу