Мультиязычность сайта aka google_translate API

2204
Многие из вас хотели бы иметь англо-etc язычную копию вашего сайта. Мой пример - не лучшая тому реализация, но как говорится, за не имением лучшего и это подойдет.
Вот как будет выглядеть 2х языковая панелька(можно добавить все возможные)  


Реализовывать, как вы уже наверное поняли перевод сайта мы будем с помощью использования google.translate API.
Нам потребуется 2 js библиотеки: jquery-translate и jquery-cookie(пользователи ведь не попугаи, нужно запоминать их действия). Если хотите - можете взять библиотеки из мест их производства(1ая тут 2ую ищите), а можете скачать всё сразу собранное мной.

Данные библиотеки заливаем в любое удобное для вас место, я выбрал /template/мой_шаблон/js/.

Так же качаем картинки русского и англ. флагов и их аналогично заливаем в удобное для вас место, я залил в /images/

Ну что ж, теперь поиграемся с вашим шаблоном. Открываем /template/ваш_шаблон/template.php и в хедере(<head></head>) подключаем js библиотеки:
Код PHP:
	<script src="/templates/мой_шаблон/js/cookie.js" type="text/javascript"></script>
	<script src="/templates/мой_шаблон/js/lang.js" type="text/javascript"></script>
	<script src="/templates/мой_шаблон/js/translate.js" type="text/javascript"></script>
Далее добавляем css блока с позицией absolute(аналогично в хедер):
Код PHP:
<style>
#flags2 {position:absolute; left:400px; top:0px; width:100px; font:bold 12px Tahoma; color:#fff; text-align:center; background-color:#333; padding:5px 0 7px 0; filter:alpha(opacity=55); opacity:0.55; -moz-opacity:0.55; -webkit-border-bottom-left-radius:7px; -webkit-border-bottom-right-radius:7px; -moz-border-radius-bottomleft:7px; -moz-border-radius-bottomright:7px; border-bottom-left-radius:7px; border-bottom-right-radius:7px;}
#flags2:hover {filter:alpha(opacity=100); opacity:1.0; -moz-opacity:1.0;}
.tops img {margin:0 0 -2px 0;}
</style>
можете конечно вкрутить его в .css файл style.css, как вам удобней.

Ну и финальный шаг, добавляем блок в любое место шаблона(можно сразу после открытия тела[body]):
Код PHP:
	<div id="flags2" class="flags2">
<span id="english"><a href=""><img src="/images/eng.png" alt="Translate to English" border="0" width="18" height="13" /></a></span> 
<span id="russian"><a href=""><img src="/images/rus.png" alt="Translate to Russian" border="0" width="18" height="13" /></a></span>
<span>LANG</span>
</div>
Ну вот и все, наслаждаемся и радуем наших посетителей. Самое главное чтобы на нашем сайте было как можно меньше грам. ошибок, тогда и перевод будет точнымsmile

p.s. кто хочет поглядеть и "потыкать" в живу, смотрите на моем сайте.

Если тема "юзабилити" сайта вам интересна, мы продолжим данную рубрику интересными статьями  smoke
Комментарии (30)
abasia 25 сентября 2011 в 12:48 +1
Очень полезно. Спасибо.
vitalson9 25 сентября 2011 в 12:53 0
а как добавить ещё языков?
Михаил 25 сентября 2011 в 13:17 0
Смотри div-блок где они отображаются.
Код PHP:
<span id="ваш_язык_на_енгл"><a href=""><img src="/images/кнопошкэ.png" alt="Translate to Ваш_язык_на_енгл" border="0" width="18" height="13" /></a></span> 
vitalson9 25 сентября 2011 в 13:21 0
как мне к примеру добавить украинский язык?
Михаил 25 сентября 2011 в 13:30 0
Находите где то укр. флаг, режете до 18x13, заливаете в /images/ua.png
После в <div id='flags2' class='flags2'> добавляете:
Код PHP:
<span id="ukrainian"><a href=""><img src="/images/ua.png" alt="Translate to Ukrainian" border="0" width="18" height="13" /></a></span>
vitalson9 25 сентября 2011 в 17:26 0
спасибо всё работает
picaboo 25 сентября 2011 в 13:05 0
перевод конечно ржачный :)) но плагин хороший. я у себя прикрутил его отдельной кнопкой перевести статью. а сам интерфейс сделал на другом языке переключением шаблона. но ваш способ конечно менее геморойный.
Михаил 25 сентября 2011 в 13:18 0
Ну качество перевода не зависит от меняsmileНо лучше так, чем никак ) Одиночные слова переводит кстати нормально, с шаблонами извращаться незачем )
picaboo 25 сентября 2011 в 14:20 0
там есть свои тонкости с индексациейsmileмне просто надо было именно так.
Михаил 25 сентября 2011 в 15:53 0
Искуственно увеличиваем кол-во уникальных страниц на сайте для сапы? :)
Майкл 25 сентября 2011 в 14:43 0
Выбрасывает на главную и не переводит.
Майкл 25 сентября 2011 в 15:50 0
У Вас авторизация на анг. языке проходит?
Михаил 25 сентября 2011 в 15:53 0
У меня да :)
lezginka.ru 25 сентября 2011 в 14:10 0
+
Майкл 25 сентября 2011 в 14:12 0
Чего то не работает!
Михаил 25 сентября 2011 в 15:51 0
Если все сделаете как я указал будет работать, см. мой сайт )
Майкл 25 сентября 2011 в 16:18 0
Это не ответ:
Тогда я подробно поясню что Вы тут написали:
Это в шаблоне, в файле template.php ставим перед закрывающимся </head>
Код PHP:
<script src="/templates/mermaid/js/cookie.js" type="text/javascript"></script>
<script src="/templates/mermaid/js/lang.js" type="text/javascript"></script>
<script src="/templates/mermaid/js/translate.js" type="text/javascript"></script>
    <link href="/templates/mermaid/css/styles.css" rel="stylesheet" type="text/css" />
<style>
#flags2 {position:absolute; left:400px; top:0px; width:100px; font:bold 12px Tahoma; color:#fff; text-align:center; background-color:#333; padding:5px 0 7px 0; filter:alpha(opacity=55); opacity:0.55; -moz-opacity:0.55; -webkit-border-bottom-left-radius:7px; -webkit-border-bottom-right-radius:7px; -moz-border-radius-bottomleft:7px; -moz-border-radius-bottomright:7px; border-bottom-left-radius:7px; border-bottom-right-radius:7px;}
#flags2:hover {filter:alpha(opacity=100); opacity:1.0; -moz-opacity:1.0;}
.tops img {margin:0 0 -2px 0;}
</style>
далее, там же, после
Код PHP:
<body>
вставляем
Код PHP:
<div id="flags2" class="flags2">
<span id="english"><a href=""><img src="/images/eng.png" alt="Translate to English" border="0" width="18" height="13" /></a></span> 
<span id="russian"><a href=""><img src="/images/rus.png" alt="Translate to Russian" border="0" width="18" height="13" /></a></span>
<span>LANG</span>
</div>
Бросаем файлы сюда:
/template/мой_шаблон/js/
и сюда:
/images/

Ну вот и всё!
Это не работает!
У меня ни один модуль не переводится и при клике на картинку, выбрасывает на главную.
Где тут ошибка?
Михаил 25 сентября 2011 в 16:26 -1
Не можете - не ставьте, идите читайте книжки по html/css/js.
Майкл 25 сентября 2011 в 16:33 0
:) Ну Вы даете!
Пока ставить преждевременно.
Тем кто поставил рекомендую проверить авторизацию на англ. варианте,
раньше авторизацию пройти было нельзя.
И похоже у хака возникают конфликты с чем то, пока понять не могу с чем,
надо смотреть коды.
vitalson9 25 сентября 2011 в 21:22 0
вот смотрите поставил и всё работает и на английском и на украинском
vitalson9 25 сентября 2011 в 21:24 0
прошу прощения ссыль поправил смотрите
Михаил 25 сентября 2011 в 21:42 -1
Не ставьте, я вас не заставляю ... Можете даже instant cms не ставить, тоже никто не заставляет )
Telema93 25 сентября 2011 в 15:56 0
не работало только потому, что переводило 1 модуль: хочу общаться. Отключил - и заработало
SP 26 сентября 2011 в 02:25 0
Все работает! Спасибо!
imprint 26 сентября 2011 в 14:19 0
у меня вообще ничего не отображается
Михаил 26 сентября 2011 в 16:07 0
Это прескорбно, берите книжки и учитесь )
Ne OS 27 сентября 2011 в 07:34 0
У меня на сайте тоже ничего не появлялось но метод ТЫКА и МАТА дал свои плоды!
У меня кнопки спрятались за графикой в header!
Поставьте код кнопки не сразу после тега <body> а например сюда
Код PHP:
<body>
<div id="wrapper">
<div id="page">
        <div id="header">
            <div class="container_12">
                <div class="grid_3">
                    <div id="sitename"><a href="/"></a></div>
                </div>
                <div class="grid_9">
[b][u]<div id="flags2" class="flags2">
<span id="english"><a href=""><img src="/images/eng.png" alt="Translate to English" border="0" width="18" height="13" /></a></span> 
<span id="russian"><a href=""><img src="/images/rus.png" alt="Translate to Russian" border="0" width="18" height="13" /></a></span>
<span>LANG</span>
</div> [/u][/b]
                    <?php if (!$inUser->id){ ?>
                        <div id="mod_user_menu">
                            <span class="register"><li><a href="/registration">Регистрация</a></li></span>
                            <span class="login"><li><a href="/login">Вход</a></li></span>
                        </div>
                    <?php } else { ?>
                        <?php cmsModule('header'); ?>
                    <?php } ?>
                </div>
            </div>
        </div>
и все будет путем!

P.S. Если код неправильный то напишите правильный вариант а то я в этом ни фига не разбираюсь!
Ne OS 27 сентября 2011 в 07:36 -1
думал код выделить жирным шрифтом и подчеркнуть ))
Ne OS 27 сентября 2011 в 07:36 -1
думал код выделить жирным шрифтом и подчеркнуть ))
PolarOne 10 октября 2013 в 02:27 -1
26 мая 2011 был официально закрыт Google Translate API