переводчик для сайта скрипт
Переводчик для сайта
Многие владельцы сайтов со временем задумываются о возможности предоставления своим посетителям доступности сайта на разных языках. Особенно полезной, такая идея будет для сайтов, на которых есть не только российский трафик, но посетители с других стран. Ведь никому не хочется терять своих посетителей, независимо от их национальности и гражданства.
Сделать сайт доступным на различных языках можно несколькими способами.
Во-первых, можно заказать профессиональный перевод сайта на определенный язык. Этот способ будет наверно самым эффективным, профессиональный переводчик переведет наиболее точно всю информацию, но придется заплатить кругленькую сумму. Хорошо если на сайте не так много страниц, а если страницы исчисляются сотнями?
Во-вторых, можно установить сторонний скрипт для перевода своего сайта. В интернете можно найти приличное количество всевозможных скриптов-переводчиков. Но поставить скрипт на свой сайт под силу не всем владельцам, в виду отсутствия знаний в области установки скриптов.
Самый простой и доступный способ перевести сайт на другой язык, будет установка переводчика от Гугл – Google translate. Этот переводчик поддерживает перевод более 50 языков.
Установить Google-translite к себе на сайт очень просто. Всего лишь надо вставить этот код, в то место страницы где Вы желаете видеть выпадающий список выбора языка:
Вот и всё, делается это очень просто и быстро. Можете поэкспериментировать с настройками на странице скрипта. Правда настроек там ни так много, но можно попробовать кое-какие варианты.
Кастомный виджет googleTranslate для сайта
Получить доступ к переводчику сайтов больше нельзя. Это никак не отразится на тех, кто уже установил соответствующий плагин.
Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода.
Не сложно догадаться какой браузер имеет ввиду Google, но речь не об этом. Самое главное, что плагин все также остается рабочим и мы можем им пользоваться. Кроме того, за неимением возможности генерировать виджет, данная тема становиться еще более актуальной, ведь потребность в машинном переводе никуда не исчезла, а Google Translate, на мой взгляд, один из самых мощных инструментов для этого.
Как будет выглядеть наш пример:
Для корректной работы нашего кастомного виджета необходимо подключить файлы:
Разметка кастомного виджета:
При смене языка добавляется куки с ключом googtrans и значением вида /ru/en
Это стандартное поведение, поэтому я им и воспользовался для кастомизации виджета. Кликая по флажкам необходимых языков, из атрибута data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг:
Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут.
Функции добавления и очисти куки я вынес отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах. Важный момент, куки необходимо менять для основного домена и всех поддоменов.
Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны:
Скрипт перевода текста (Google, Yandex) с определением исходного языка
Предлагаю вашему вниманию небольшой скрипт перевода текста через системы переводов Google и Yandex на различные языки с автоопределением исходного языка. Данный скрипт разрабатывался для удобного быстрого перевода выделенного текста по хоткеям.
Результат: 
Собственно сам скрипт:
Запуск скрипта производится следующим образом:
# script.sh язык
примеры:
# scipt.sh ru
# script.sh en
Для включения возможности перевода через яндекс необходимо получить API ключ по ссылке api.yandex.ru/key/form.xml?service=trnsl и назначить его переменной ykey.
Включать или отключать соответствующие сервисы поиска можно через переменные google_enable и yandex_enable.
Переменные window_width и window_height управляют размерами итогового окна.
После выполнения скрипта, в окошке с результатом перевода можно нажать «ОК», в результате чего будет выполнен переход на сайт переводчика google с заполненным текстом для перевода.
Пример назначенных хоткеев через xbindkeys (
/.xbindkeysrc):
«2kseltr.sh ru»
Mod4 + r
«2kseltr.sh en»
Mod4 + e
«2kseltr.sh th»
Mod4 + t
«2ksearchya.sh»
Для работы скрипта должны быть установлены следующие программы:
xsel
zenity
google-translate-cli
Кастомный виджет Яндекс.Переводчик для сайтов
Когда-то я предложил свое решение по кастомизации виджета googleTranslate, тема оказалась действительно полезной и актуальна по сей день. Репозиторий с проектом на gitHub набрал немного звезд, а я рад тому, что мои труды не напрасны. И вот недавно мне понадобилось сделать пользовательский выпадающий список с выбором языков, но уже с виджетом яндекс переводчика. Вообще сам по себе виджет вполне устраивал заказчика, но проблема заключается в том что в нем по умолчанию находится более 90 языков и этот список нельзя никак ограничить. Нельзя выставить 2-3 или 5 необходимых вам языков, будут показаны все 90+, но проблема еще и в том, что виджет не адаптивен, он занимает 1221 пиксель в ширину и никак не подстраивается под размер экрана:
В отличии от виджета гугл переводчика, в котором вся разметка находилась в iframe, в яндекс переводчике можно переопределить стили, но это все не то чего хотелось бы.
На сайте, где генерируется виджет есть ссылка на документацию, и конечно же я её начал изучить, но документация на самом деле об API и никакой информации по работе с виджетом не имеет. Я решил написать в тех. поддержку яндекса:
Текст обращения
Здравствуйте. Виджет переводчика, ведет на документацию в которой вообще о виджете не слова. В частности, как для виджета выбрать для перевода не весь список из 80 языков, а например 5, которые необходимы. И как используя виджет запретить переводить определенные слова в html разметке. Например гугл виджет для этого использует класс notranslate и все что в нем не будет переведено.
И довольно быстро получил ответ:
Текст ответа
Такой возможности в нашем виджете сейчас нет.
Спасибо за желание сделать Яндекс.Переводчик удобнее! Я передал ваше предложение команде разработки.
И теперь окончательно убедившись, что готового решения нет, я принялся за дело.
Как будет выглядеть пример:
Разметка демо-страницы
Для корректной работы виджета необходимо подключить файлы:
Логика виджета довольно простая. При выборе языка в локальное хранилище записывается объект с ключем yt-widget. В объекте хранится язык на который будет переведен сайт:
К локальному хранилищу без проблем можно получить доступ и я применил ту же технику что и с гугл переводчиком. Виджет яндекса прячем, а кликая на свой кастоный флажок с атрибутом data-ya-lang назначаем записаный в нем язык свойству lang и перезагружаем страницу. После перезагрузки страницы язык, который мы сами установили, будет подхвачен виджетом и сайт будет на него переведен. В функции yaTranslateHtmlHandler проводим необходимые манипуляции с разметкой, в моем случае я показываю флаг текущего языка перевода и удаляю его из общего списка. В js каждый этап я разбил на функции и добавил описание, чтобы было легче доработать код под себя.
Автоматический перевод Вашего сайта с помощью JS скрипта Google Translate
На многих сайтах можно встретить флаги стран, при нажатии на которые происходит автоматический перевод текущей страницы сайта на выбранный язык. Данная функция очень полезна для не русскоязычной аудитория, которая случайно набрела на оставленную Вами полезную информацию. Помню как-то сам набрел на какой-то Албанский сайт с нужным мне ответом и долго пытался понять смысл написанного.
Ситуация за последние несколько лет сильно изменилась и найти рабочего способа автоматически переводить сайты на другой язык уже не встретишь. Google Translate прикрыл эту возможность, а другие сервисы стали делать это только за деньги.
Но решение нашел Vitalii P, который написал небольшой код, умеющий переводить сайты на автомате. Используется все тот же инструмент от Google Translate. Разрабы из Google прикрыли только добавление новых сайтов в эту систему, а старые сайты все также могут пользоваться скриптом автоматического перевода сайтов. Этим и воспользовался Виталий.
Такие кнопки можно добавить для всех стран, которые поддерживаются сервисом, как и делают это многие вебмастера. Они добавляют все доступные страны. На мой взгляд, следует выбрать только несколько стран, аудитория которых посещает Ваш сайт. Я на своем блоге выбрал 3 языка: английский, немецкий и французский. Но хозяин — барин.
Добавляем автоматический переводчик
На github с проектом Виталия можно потестировать работу и детально изучить возможности.
Рабочий пример
На этой странице реализован этот механизм, поэтому можно попробовать:
В песочницу по типу CodePen добавить не получается, так как они не поддерживают куки.
Как поставить автоматический перевод сайта на JS у себя
Ниже приведен код на чистом JS. У автора идеи можно найти код и JQuery.
Файлы для загрузки:
Подключаем скрипты на странице:
Если Вы хотите внедрить автоматический перевод на поддомен (name.site.ru), то в файле google-translate.js нужно немного подредактировать. Файл хорошо комментирован. Комментарии на русском языке.
Я надеюсь мне удалось пролить свет на проблему автоматического перевода сайтов на другие языки. Если Вы знаете другой способ перевода сайта на другой язык, сообщите.
Есть мнение, что Google умеет индексировать ссылки использующие JS, так что возможно от приведенной информации будет еще больше пользы в будущем. Поживем увидим.
Комментарии
У меня вопрос относительно последствий с дизайном страницы. Понятно, что за “бесплатное” приходится чем то расплачиваться. К примеру фреймом от Гугла. Но я вот полистал на гугле раздел AJAX API для Google Переводчика, там мне кажется есть возможность обойтись без фрейма с верху страницы. Не затруднит вас примером кода для кнопочки? как можно функцию обработки страницы вызвать посредством нажатия кнопки? А то я в скрипте не силен.
Я посмотрю, что можно сделать
Спасибо, все работает! А можно сделать картинки по-крупнее?
Можно конечно. Поискать флаги по крупнее и сделать по аналогии с предложенным. 🙂
Установил перевод от гугл(второй вариант), поработал несколько дней. Теперь выбрасывает на страницу перевода с окном ввода текста или адреса. Почему?
Доброго дня!
Подскажите, не решился ли вопрос убрать фрейм от гугла вверху страницы?
Спасибо
>SergLI
Пока решение не найдено.
Разница очевидна, но как добиться?
Гораздо интересней автоматический перевод – он сохраняет сессии и не меняет адрес страницы.
Спасибо за ссылки. Обязательно посмотрю и отпишусь. Самого заинтересовала эта возможность.
А как насчет взаимодействия с API ключами Яндекс карт? Если вписан скрипт с API ЯндексКарт, Google Translate выкидывает алерт с сообщением “неправильный ключ”
Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально).
Спасибо!
Подскажите каким лучше всего способом переводить сайт!
1.- Есть компонент JoomFish. Для того чтобы он начал работать нужно с начало перевести материалы сайта с русского языка на нужный язык и данные материал загрузить в поле ввода компонента JoomFish. Потом в нужное место выводятся иконки флажков и при нажатии на флажок страны сайт переводиться на язык этой страны. Имеется большая проблема. Эта рутинная работа по переводу каждого текста. Зато переводиться всё.
Однако! По химичив, я обнаружил вот что!
Сайт с фреймом – http://www.google.com/translate. При нажатии на любую ссылочку на сайте ссылка в брузере не изменяется.
Сайт без фрейма – http://translate.googleusercontent.com. При нажатии на любую ссылочку на сайте ссылка в браузере изменяется. Кажется так лучше! Если да, то для удобства пользователей можно на сайт закачать флажки и картинки флажков отметить данными ссылочками. То есть для англоязычного сайта в американский флажок вставить эту ссылку – http://translate.googleusercontent.com. А для грузинскоязычной версии сайта можно воспользоваться этой ссылочкой – http://translate.googleusercontent.com. и вставить эту ссылочку в грузинский флажок. Тут есть тоже проблема. Дополнительные исходящие (внешние) ссылки на сайте. И Яндекс может забанить, думая о том что сайт продаёт ссылки. А также ссылки в браузере в глазах посетителей выглядят не красиво.
Так каким лучше всего способом пользоваться переводом?
Я думая Yandex Вас не забанит за такое, это конечно мое ИМХО, которое основано на личном опыте