Вставка переключателя языков на мультиязычном wordpress блоге qtranslate

В данной статье я расскажу как добавить красивые флаги для переключения между языками на мультиязычном блоге wordpress созданном с помощью плагина qtranslate. В общем-то всё это изложено на официальном сайте плагина qtranslate, если владеете английским можете почитать. Для того чтобы добавить флаги-переключатели необходимо добавить код в файлы header.php и style.css вашей темы. Результат вставки кодов можно видеть на этом блоге. Перед любыми действиями делаем бэкап.

Есть два варианта вставки переключателя: используя изображения флагов встроенные в плагин qtranslate (прямоугольнички 18х12) и используя собственные изображения флагов (скачанные или нарисованные самостоятельно).

Вариант 1. Встроенные изображения

Вмешиваемся в header.php. Вставляем код  для отображения флагов установленных языков (вот куда именно зависит от установленной темы, придётся поэкспериментировать).

<!?php qtrans_generateLanguageSelectCode($type='image'); ?> 

Вариант 2. Собственные изображения

Данное решение подсказал в комментарии John Morton, за что ему огромное спасибо. Прежде всего ищем подходящие изображения в формате png - здесь Гугл в помощь. Затем отбираем необходимые нам (у меня это флаги России, Великобритании и ФРГ). Переименовываем их так, как они называются в папке плагина wp-content/plugins/qtranslate/flags - ru.png, gb.png, de.png. Меняем их размеры в графическом редакторе. У меня, например, это 32х32. Забрасываем их по FTP в папку flags. Осталось только изменить файл qtranslate_hooks.php, в котором в строке 27 заданы размеры флагов:

$css .=".qtrans_flag { height:12px; width:18px; display:block }n";

И меняем на свои, например, 32 и 32

$css .=".qtrans_flag { height:32px; width:32px; display:block }n";

Удаление данной строчки у меня приводило к тому, что флаги вообще переставали выводиться. Размеры флагов лучше указывать точно, но можно и ставить значения больше, так сказать "с запасом". Учтите также что при каждом обновлении плагина все изменения которые Вы внесли в файлы плагина будут "затираться" и необходимо заново их редактировать. Это же касается Ваших собственных изображений флагов.

Выравниваем горизонтально.Чтобы флаги отображались горизонтально (по умолчанию флаги выводятся один под другим) и в правой части страницы  вставляем в style.css следующий код:

.qtrans_language_chooser li { float:right; margin-right:8px }

За выравнивание по правому краю отвечает параметр float:right, можете поменять на left, тогда будет слева. Чтобы сделать отступ сверху, например, 40рх:

.qtrans_language_chooser li { float:right; margin-right:8px; margin-top:40px }

и так далее. Можно выставить любое расстояние относительно края экрана... Надеюсь смысл ясен. Один ньюанс - разрешение у мониторов разное и соотвественно вид вашего сайта будет разным. Учитывайте это.

Переключатель всегда у правой части экрана.  Можно сделать так, чтобы переключатель был всегда "пристёгнут" к правой части экрана в независимости от прокручивания страницы. Для этого коду, который вставляли в header.php присваиваем свой стиль qt1:

<div class="qt1"> </div>

А в  style.css добавляем:

 .qt1 {position: fixed; right: 0px; top: 428px;}

В этом случае флаги будут ориентированы вертикально, у правой части экрана с отступом сверху  428px.

Оформляем в красивом блоке.Если Вы хотите выводить флаги в блоке-прямоугольнике, можно сделать следующее. Задать стиль блока, в который вставляете переключатель, например:

<div class="block1"> </div>
А затем добавить этот стиль "block1" в style.css:
.block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
    float: left;
   }

В примере ширина блока 200рх, фон серый и есть рамочка, но немного подредактировав код Вы, я думаю, получите желаемый результат.

Что ещё можно вставить кроме флагов? Можно изменить в строчке   параметр "image" на "both", "dropdown", "text" и получить флаги + текст, выпадающий список или текст. Чтобы флаги обвело в рамочки (улучшается общее эстетическое восприятие) вставляем в style.css код:

.qtrans_flag { border:1px solid #b6b6b6 }

Информация отсюда плюс собственные наработки. Рад буду услышать Ваши вопросы, замечания и пожелания по работе плагина qtranslate на wordpress.

55 thoughts on “Вставка переключателя языков на мультиязычном wordpress блоге qtranslate”

  1. John Morton

    У вас флаги перестали отображаться по простой причине.
    файл qtranslate_hooks.php в папке с плагином:
    27 строка добавляет css стиль : $css .=».qtrans_flag { height:12px; width:18px; display:block }\n»;
    поменяйте размеры. либо затрите стиль в своем css-файле.
    .qtrans_flag {
    display: block;
    height: 12px;
    width: 18px;
    }

  2. Иван

    Подскажите пожалуйста, есть стоит шаблон battery2 (_ttp://yowordpress.ru/wordpress-themes/wordpress-tema-battery-2.html) Внем у меня почему то не хотят отображаться флаги, показывает только текст. В чём может быть причина?

    1. Editor Post Author

      Здравствуйте. Дайте ссылку на блог. И перешлите код Вашего отредактированного header.php

  3. Andrey

    Помогите, не прячутся посты для языка, на который пост еще не переведен. Вместо того, чтобы ничего не показывать для данного языка, появляется заголовок типа «(Русский) + название поста на русском», при нажатии на который происходит переход на пост на русском. Что делать, подскажите…

    1. Editor Post Author

      Здравствуйте. То что Вы описываете это нормальное поведение плагина. Он показывает что пост существует и на каком языке есть текст. Но при нажатии на заголовок должна открываться страница без текста на русском. В настройках плагина есть пункт «Скрыть непереведенное Содержимое». Поставьте там отметку. Ещё возможно Вы в соответствующих полях где должен быть английский текст вставили русский. Вы в визуальном редакторе работаете?

  4. Andrey

    Спасибо! Разобрался. Работал в визуальном редакторе, и почему-то не были видны отдельные теги, которых я не ставил. Поэтому языки, для которых текста не было, все-таки отображались. Теперь использую html и все нормально.
    У меня только вопрос: WordPress SEO by Yoast с этим плагином не работает, правильно? Что можно взамен использовать для оптимизации?

    1. Editor Post Author

      Работать он будет. Но просто ключевые слова будут одинаковы для всех языков. Т.е. например Вам придётся вписать и «вордпресс» и «wordpress». Но есть специальный плагин. В этой статье написано. А если конкретно то qTranslate META. Он менее функционален, зато идеально подходит для мультиязычного блога. Там можно с каждым языком задать свои ключевые слова.

      1. Andrey

        Спасибо огромное! Со всем разобрался благодаря вам. Осталась одна проблема, но довольно неприятная.
        Если открыть пост на русском языке, а потом выбрать в qtranslate другой язык, например, английский, то ссылка вида mysite.ru/rustranslit/ не изменяется на mysite.ru/en/nazvanie-na-anglijskom, а остается прежней, хотя название и тексты постов меняют язык. Но если нажать еще раз на название поста (которое уже на английском), то ссылка меняется на английский вариант. У меня стоит 3 языка (ru, eng и de), при переходе с en на de и наоборот проблем нет, а вот после изменения язка с русского на английский или немецкий такая проблема.

  5. Сергей

    Здравствуйте!
    Хочу поставить в навигационное меню сайта флажки. Как это сделать? Флажки должны располагаться после кнопки «Контакты»
    Спасибо.

    1. Editor Post Author

      Здравствуйте. Собственно в статье об этом и написано. Вы хотите чтобы я вам дал готовый код? Как это возможно без доступа в админпанель Вашего сайта?

  6. Eduard

    Здравствуйте, уважаемый.
    Большое спасибо за этот плагин.
    У меня маленькая проблема на сайте.
    Не могли бы Вы мне помочь в этом?
    После установки этого плагина (англ., нем., рус. и укр. языки) немного косяк в ряду темы на Главной получился.
    А именно, если я переключаю на немецкий язык.
    Другие всё нормально.
    Подскажите, пожалуйста, что, где и как можно это исправить.
    Заранее сердечно благодарю Вас за помощь.
    Всего доброго.

    С/у
    Эдуард

      1. Eduard

        Здравствуйте.
        Я его на «ремонт» ставил.
        Теперь открыл.
        Посмотрите, пожалуйста.
        Спасибо заранее.

        1. Editor Post Author

          Проблемы могут быть из-за:
          1. При вводе названия страниц лишние пробелы или символы после тега [:dе]
          2. Общая численность символов в названии страниц в немецком варианте больше, чем для других языков. Замените STARTSEITE на HOME. Сократите количество отображаемых страниц. Или поменяйте тему.

          1. Eduard

            Здравствуйте ещё раз.
            Совпадает первый пункт!
            В Меню, в названиях страниц, после немецкого «Gästebuch» (Гостевая) было прописано так:
            [:de]GÄSTEBUCH<— .
            После проверки всё наладилось.
            Большое Вам спасибо.
            У Вас не голова, а дом советов.
            Дальше так держать!!!
            Буду знать, куда мне обращаться.
            Всего доброго!

            С/у
            Эдуард

  7. Editor Post Author

    Всё должно меняться если Вы правильно настроили. Тут на сайте немало статей про это. Посмотрите может там уже есть ответы на Ваши вопросы.
    Например чтобы менялось название сайта необходимо в админпанели Парамеры > Общие в поле Заголовок сайта написать Знание-сила[:en]Knowledge is power[:de]Wissen ist Macht (соотвественно в Вашем случае пишите своё). В поле Краткое описание написать Открытый интернет-проект [:en]Open Internet Project[:de]Öffnen Sie den Internet-Projekt. Соотвественно таким способом называете страницы. Почему не меняется название пунктов меню — тут надо конкретные примеры. Так заочно ответить сложно.

  8. Эрик

    Здравствуйте! Хочу спросить, как перевести название и описание сайта? Я так понимаю, что для этого нужно сделать развилку в php коде.

  9. rasl

    скажите пожалуйста у меня не получается Выравниваем горизонтально.Чтобы флаги отображались горизонтально (по умолчанию флаги выводятся один под другим) и в правой части страницы вставляем в style.css следующий код:

    .qtrans_language_chooser li { float:right; margin-right:8px }
    вы не смогли бы подробно обьяснить куда именно вставлять код в какую строчку

    1. Editor Post Author

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

  10. Davron

    Здравствуйте!
    Очень нудна помощь в следующей проблеме
    Вот адрес сайта где это можно по смотреть http://laroof.kz/our-menu
    в виджетах перевод типов меню произошел нормально а вот на самой странице отображается так ( 1. Супы[:en]1. Soups)
    Как это исправить подскажите ?

    1. Editor Post Author

      Проблему вижу. Но тут надо код смотреть. Каким образом выводите? Где код вывода? Просто в визуальный редактор в посте вставляете? Или в single.php?
      1. Супы 2. Салаты 3. Закуски 4. Основные блюда 5. Десерты
      Это что рубрики? Метки? Дочерние страницы?

  11. Davron

    этот код 1. Супы[:en]1. Soups я вообще вставлял в рубрике
    в рубрике перевод нормальный а вот на странице вылазиет весь код

    1. Editor Post Author

      Какую тему используете? Выложите на файлообменник тему и сюда добавьте ссылку

      1. Davron

        Тема платная по этому выложить её в открытый доступ не могу к сожалению
        могу дать доступ к компьютеру через teamviewer

        1. Editor Post Author

          Это мне напоминает постановку диагноза больному по телефону. И как я могу понять в чём там проблема?
          Моё мнение если это страница рубрик, то править надо что-то типа category.php или archive.php. А вообще надо разобраться где же происходит вывод «неправильных» названий

    1. Editor Post Author

      Здравствуйте. Как описано в статье там где часть «Переключатель всегда у правой части экрана.»

  12. Чайник

    Добрый день, подскажите, как выделить активный язык? также если нахожусь на внутренней странице англ. при клике на лого переход на стартовую рус. дэфолтного яза, как это исправить? Заранее огромное человеческое спасибо:)

  13. Editor Post Author

    Здравствуйте. Выделение флагов делается через CSS — http://z-force.info/wordpress/vstavka-pereklyuchatelya-yazykov-na-multiyazychnom-wordpress-bloge-qtranslate-chast-2/
    А про переключение на дефолтный язык уже написано немало. Ищете по блогу «Вставка переключателя языков на мультиязычном wordpress блоге.Часть 1» и «Вставка переключателя языков на мультиязычном wordpress блоге.Часть 2»

  14. Сергей

    Подскажите пожалуйста а как это сделать :
    «Для этого коду, который вставляли в header.php присваиваем свой стиль qt1:» Заранее большое спасибо!

    1. Editor Post Author

      Просто wordpress сразу преобразует код. После пересохранения статьи он «затирается». Так случилось и в данной статье. Исправил. Код вывода переключателя нужно обернуть в тег div с указанным стилем qt1

  15. Геннадий

    Доброго дня, налаштовую 3 мову для сайту, хто може допомогти, в мене 2 мови які були раніше в одлному ряду відображаються а третя знизу, мені потрібно перенести перемикач в одинг ряд, що робити, і ще кілька питань стосовно налаштувань, з ким я можу порадитись?

  16. Александра

    Добавила .qtrans_language_chooser li {
    float: left !important;
    margin-left: 8px !important;
    }

    в стили css, но флаги все равно отображаются друг под другом.
    Очень хочется поставить их горизонтально в один ряд. Плагин qtranslate-x. Подскажите, пожалуйста, что не так!

      1. Editor Post Author

        Какой у Вас плагин? qTranslate-X? Если так, то правильнее изменить на префикс qtranxf.

  17. Esil

    Здравствуйте! У меня стоит qTranslate-X. Я хочу поменять положение значков, точнее ссылки-надписи Рус и Каз. Хочу поднять их наверх сайта в бок, поверх изображения фоновой картинки заголовка. Как это сделать, не подскажите, а то что то не получается самому.

    1. Editor Post Author

      Здравствуйте. Это надо к дизайнеру обращаться. В каждом конкретном случае будет своё решение

  18. Алексей

    Добрый день!
    Может, Вы сталкивались с подобной проблемой и решение где-то на поверхности?
    Мне в «наследство» достался сайт, использовавший qtranslate.
    После обновления WordPress (пришлось из-за невозможности управления сайтом) установил qtranslate-X. Появились странные косяки:
    1. При смене языка происходит переход на Главную страницу выбранного языка, но язык меню не изменяется и, соответственно, переход из меню осуществляется на страницу с языком меню…
    2. Язык меню изменяется, если после выбора другого языка сделать обновление страницы в браузере и всё работает корректно… до смены языка.

    1. Editor Post Author

      Здравствуйте. Да уж загадочное поведение. Нахожусь на странице /en/useful-advice/, потом переключаюсь на русский и перекидывает даже не на Главную, а на /ru/technology/ Может просто «косяки» в меню? Выведите в сайдбаре ссылки на страницы, используя шорткоды многоязычности и попробуйте так.

  19. OLEG

    Здравствуйте!
    Подскажите есть ли возможность убрать слова: «Язык», «Language» перед флагами, если переключатель языков встроен в главное меню.

    1. Editor Post Author

      смотря каким плагином делаете мультиязычность. Если qTranslate X — то нужно найти функцию < ?php echo qtranxf_generateLanguageSelectCode(‘both’); ?> и параметр both менять на ‘image’, ‘text’ или ‘dropdown’.

        1. Editor Post Author

          Я не ясновидящий. Диагнозы по фотографиям, угадывание функций. Это не ко мне. Если нужно решить проблему, показывайте сайт, какой стоит шаблон и т.д. Если простая работа — скажу как, сделаете сами. Если работы много — услуга платная.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>