Вебдизайн и Техническая поддержка
Skype: disbb.ru
Контакты: обратная связь
Часы работы:
Пн-Пт 10:00-18:00
* по московскому времени
Главная страница блога » Мультиязычный сайт на Ucoz - это реально!

Мультиязычный сайт на Ucoz - это реально!


Реализуем мультиязычность на ограниченном движке при помощи скрипта смены стилей...
Когда мне поступил заказ на интернет-магазин Boost 4 gamers я уговаривала заказчиков не садиться на Ucoz, так как эта платформа очень ограничена в своих возможностях. Однако они решили "только Ucoz, только хардкор" - и понеслась... Собственно, сделать сайт в стиле игрового магазина близард на любом движке можно при желании, однако через некоторое время передо мной поставили задачу сделать перевод сайта на английский с возможностью переключения языков - вот тут заказчики и осознали, как они оплошали с выбором движка.
Если погуглить информация по этой теме, то выясняется, что на укозе нет мультиязычности ни в каком виде. Скрипты, позволяющие это реализовать либо не рабочие, либо сводятся к тому, что сайт прогоняется через google translater - сами понимаете, какое качество будет у такого "перевода". Единственный метод нормального перевода сайта, который даже рекомендуется в официальном блоге разработчиков платформы - это оплата второго аналогичного сайта на английском языке. То есть вам придется платить в два раза больше за свой сайт, чтоб иметь второй языковой пакет. А если помимо английского, потребуется потом прикрутить немецкую версию?...
Но, как я люблю говорить, почти ничего невозможного нет, и вышеупомянутая мультиязычность реализована, посмотреть можно здесь: boost4gamers.com.
Никакого второго сайта мы не прикручивали. Для реализации нескольких языков на убогом движке вам потребуется:
• доступ к шаблону страниц (на укозе он есть);
• в идеале - возможность замены любых стандартных надписей (на укозе она есть частично);
Скрипт смены стиля для переключения языков;
Универсальный скрипт Замены для изменения стандартных надписей там, где этого не позволяет движок.

Шаг 1. Внедряем переключатель языков.
Устанавливаем куда-нибудь наверх сайта Скрипт смены стиля и располагаем кнопки переключения стиля.
В данном случае их понадобилось две: русский и английский язык, но при желании их можно сделать хоть десять - все зависит только от того, сколько вы готовы убить времени и сил на перевод.
Кнопки также могут быть расположены где угодно и как угодно, скрипт позволяет. При желании кнопки могут быть выполнены текстом или их можно засунуть в выпадающее меню - короче, изменяйте скрипт под себя, колдуйте. :) Исходный материал предоставлен по ссылке на скрипт.
Цитата
<div id="changeStyle">
<img src=".../Russian.png" alt=".../rus.css"/>
<img src=".../UK.png" alt=".../eng.css"/>
</div>

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

Шаг 2. Переключаем языки при помощи css-файлов.
Что же должны содержать файлы, отвечающие за переключение?
Вкратце, все просто. На английской версии (eng.css) мы включаем все английское и отключаем все русское:
Код
.rus {display:none !important;}
.eng {display:block !important;}

На русской - наоборот:
Код
.rus {display:block !important;}
.eng {display:none !important;}

Также необходимо определиться, какой язык на сайте будет по умолчанию, и добавить в таблицы стилей сайта выключение второго языка, только без !important:
Код
.eng {display: none;}

если этого не сделать, то пока пользователь не потыкает кнопки, будут отображаться сразу оба языка.

Шаг 3. Изменяем шаблоны и дополняем css-файлы.
Теперь необходимо в шаблоне страниц все русское обернуть чем-либо с классом "rus", а все английское обернуть классом "еng" - то есть у каждого элемента сайта, содержащим русский текст, необходимо сделать "дубликат" на английском языке.
Например:
Код
<div class="rus">Тут код русского меню</div>
<div class="eng">Тут код английского меню</div>

Или вот, например, шаблон корзины интернет-магазина с двумя языками:
Код
<div id="site-cart">
  <div class="cart-inner">
  <?if($NUM_ENTRIES$)?>
  <div id="cart-total" class="cart-txt">
<span class="rus">В Корзине: <b>$ORDER_NUM$</b> товаров - <b>$ORDER_AMOUNT$</b></span>
<span class="eng"><b>$ORDER_NUM$</b> items in cart: <b>$ORDER_AMOUNT$</b></span>
  </div>

  <div id="cart-content">
  <?if($BODY$)?><ul>$BODY$</ul><?endif?>

  <div class="cart-sum">
<span class="rus"><b>Итого:</b> $ORDER_AMOUNT$</span>
<span class="eng"><b>$ORDER_AMOUNT$</b> in total</span>
  </div>

  <div class="cart-links">
<span class="rus"><a class="basketclear" href="javascript://" rel="nofollow" onclick="return clearBasket();">Очистить</a> | <a class="basketorder" href="/shop/checkout">Оформить заказ</a></span>
<span class="eng"><a class="basketclear" href="javascript://" rel="nofollow" onclick="return clearBasket();">Clear</a> | <a class="basketorder" href="/shop/checkout">Checkout</a></span>
  </div>
  </div>
  <?else?>
  <div class="empty cart-txt rus">Ваша корзина пуста</div>
  <div class="empty cart-txt eng" style="display: none;">Your cart is empty</div>
  <?endif?>
  </div>
</div>

Ну, и напоследок: дополняйте по ходу текстирования css-файлы переключения. Например, на B4G потребовалось изменить некоторые фоновые картинки в английской версии, где были надписи и "вырубить" часть элементов сайта, которые невозможно было перевести:
Код
#goods_cont .empty {display:none}
.shMain {background: transparent url("/design/lang/sh-main-eng.jpg") no-repeat scroll center top !important;}


Шаг 4. Несколько трюков для Ucoz и не только.

Проблемы с Display:block
Во-первых, будьте готовы проверять как ведет себя каждый элемент сайта при переключении.
Вы можете разнообразить css-коды переключения свойствами inline-block, чтоб ничего не "поехало", или изменять общие стили и шаблоны сайта, чтобы русские/английские элементы со свойством "block" смотрелись нормально.
Работа по изменению шаблонов для мультиязычности требует знаний и опыта в области css и html.

Замена стандартный надписей
Если нет возможности заменить текст при помощи редактирования шаблонов, то может помочь Универсальный скрипт Замены.
Например, в гостевой некоторые тексты изменены так:
Код
<script><!--Универсальный скрипт замены. -->
function UniverСhange(selektor,changed,substitute){
$(selektor).each(function(){if ($(this).parent().html()!=null){if($(this).parent().html().indexOf(changed)!=-1){
$(this).parent().html($(this).parent().html().replace(changed,substitute));};};});}

UniverСhange("#pagesBlock1","Страницы","<span><dd class='rus'>Страницы</dd><dd class='eng'>Pages</dd></span>");  
UniverСhange("#gbsbm","- Добавить комментарий -","Добавить комментарий | Add comment");

</script>

Кстати, возможно, это может очень пригодится тем, кто использует стандартное меню Укоза.

Ucoz: два заголовка в стандартном сайд-баре
Небольшой трюк о том, как выкрутится с сайдбаром укоза.
В каждый блок добавляем во внутрь над контентом английский заголовок:
Код
<div class="sidetitle eng"><span>Categories</span></div>
$CATEGORIES$

В русской части (rus.css) текст не будет отображаться, благодаря классу "eng". А вот в английскую часть(eng.css) добавляем коды, чтоб вырубить стандартный заголовок и спозиционировать добавленный:
Код
.sidetitle {display:none}
.sidetitle.eng {position:relative; top:-8px}

Ucoz: дублируем модули, вместо перевода
На укоз-сайтах (да и на других движках тоже) вместо перепиливания шаблонов сразу на два языка, можно прикрутить второй модуль для тех же целей, перевести его полностью на второй язык.
Например, на B4G в русской части для русских новостей используется модуль "Блог" - http://boost4gamers.com/blog/, а для английских новостей используется модуль "Новости сайта" - http://boost4gamers.com/news/
В английские новости вставлен такой же дизайн, как и для модуля "блог", он полностью переведен на английский язык, а также в английское меню вставлена другая ссылка. Так сделать гораздо проще, чем

Ucoz: интернет-магазин или другие уникальные модули сайта
С интернет-магазинами большая беда из-за того, что их невозможно "размножить" на два отдельных модуля.
Придется переводить, но всплывают две проблемы: отображаются вперемешку русские и английские товары.
Решается достаточно просто. Во-первых, для английских товаров создаем категории-дубли с английскими названиями.
В русской части (rus.css) вырубаем их (а также добавляем эти же коды в общую таблицу стилей, если русский язык стоит по умолчанию):
Код
/* СКРЫВАЕМ АНГЛИЙСКИЕ КАТЕГОРИИ ТОВАРОВ */
#blocks-rt-17,
#blocks-rt-18,
#blocks-rt-19,
#blocks-rt-20,
#blocks-rt-21,
#blocks-rt-22,
#blocks-rt-23,
#blocks-rt-24 /*последний элемент без запятой*/
{display:none !important;}

В английской части скрываем русские категории и открываем английские:
Код
/* СКРЫВАЕМ РУССКИЕ КАТЕГОРИИ ТОВАРОВ */
#blocks-rt-7,
#blocks-rt-9,
#blocks-rt-10,
#blocks-rt-13,
#blocks-rt-15,
#blocks-rt-16,
#blocks-rt-8,
#blocks-rt-14 /*последний элемент без запятой*/
{display:none !important;}

/* ОТКРЫВАЕМ АНГЛИЙСКИЕ КАТЕГОРИИ ТОВАРОВ */
#blocks-rt-17,
#blocks-rt-18,
#blocks-rt-19,
#blocks-rt-20,
#blocks-rt-21,
#blocks-rt-22,
#blocks-rt-23,
#blocks-rt-24 /*последний элемент без запятой*/
{display:block !important;}

Таким образом мы отделили русскую часть от английской и осталось только решить проблему с товарами на главной.
Делается это при помощи информеров.
Создаем два информера - для русских и английских товарах. В каждом из них задаем обязательно соответствующие категории (только русские или только английские), из которых будут выводится товары.
На главной ставим эти информеры в коды для переключения русского/английского языка:
Код
<div class="goods-list rus">$MYINF_2$</div>
<div class="goods-list eng">$MYINF_4$</div>

Итого.
Работа кропотливая, но вполне осуществимая.
По крайней мере лучше потратить две-четыре недели на полноценный перевод сайта, чем платить за сайт в два раза больше.
Если же вас интересует мультиязычность на Ucoz (или других) сайтах, но нет опыта в редактировании шаблонов, вы можете обращаться к нам, пишите запрос на info@disbb.ru - стоимость зависит от того, насколько "жирный" у вас сайт.

Теги: смена стиля, мультиязычность, Ucoz, Уроки

Дата: 19.12.2015, Просмотров: 1544, Комментарии: 36, Рейтинг: 5.0 (1), Категория: Уроки по дизайну
Всего комментариев: 0
Имя *:
Email *:
Код *:
Сайт создан в системе uCoz