Многим сайтам (и темам) требуется пользовательский переключатель языка, который будет внедрен в общий дизайн. В этом руководстве показано, как создавать пользовательские переключатели языка только при помощи HTML-шаблонов, без написания на PHP.

Введение в шаблоны Twig для переключателей языка

Twig – движок для создания шаблонов, позволяющий формировать дизайн при помощи HTML и псевдокода.

Ниже приведен пример шаблона Twig:




<div class="[ css_classes ] my-custom-switcher">



<ul>

   {% for code, language in languages %}



<li class="[ language.css_classes ] my-custom-switcher-item">

           <a href="[ language.url ]">

               {% if language.flag_url %}

                   <img src="[ language.flag_url ]" alt="[ language.code ]" title="[ language.flag_title ]">

               {% endif %}

               [ language.native_name ]

               ([ language.display_name ])

           </a>

       </li>



   {% endfor %}

   </ul>



</div>



Он выполняет следующее:

  1. Открывает контейнер DIV и теги UL для переключателя языка.
  2. Повторяет это для разных языков.
  3. Выводит элемент списка (LI) для каждого языка.
  4. Внутри элемента списка выводит ссылку на язык.
  5. Если у языка есть флажок выводит его.
  6. Выводит название языка.
  7. Закрывает все вложенные теги.

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

Добавление шаблона переключателя языка к теме

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

Шаблон переключателя языка располагаться под следующей структурой папок:

my-theme/wpml/templates/language-switchers/my-template

Структура каталогов для файлов ваших переключателей языка

Структура каталогов для файлов ваших переключателей языка

Это значит, что вам необходимо создать папку с именем «wpml» в корневом каталоге вашей темы (или дочерней темы). Создайте в ней папки templates/language-switchers. Внутри каталога language-switchers можно создать подкаталоги для различных шаблонов, которые вы создаете (в нашем примере «my-template»).

Внутри каталога шаблона («my-template») должны находиться следующие файлы со следующими именами:

  • файл template.twig (обязательно)
  • файл config.json (обязательно)
  • файлы CSS (необязательно)
  • файлы JS (необязательно)
  • каталог флажков (необязательно)

Создание файла template.twig

Файл template.twig – сам шаблон, который вы создаете. В нем используется синтаксис Twig. В шаблоне можно использовать следующие переменные:

current_language_code (строка)

css_classes           (строка)

languages             (массив)

code          (строка)

url           (строка)

flag_url      (строка)

flag_title   (строка)

native_name   (строка)

display_name  (строка)

is_current    (булев)

css_classes   (строка)

Задание параметров в файле config.json

В каждом переключателе языка должен быть файл с именем config.json, который предоставляет WPML информацию о переключателе.

Ниже перечислены поля для этого файла:

  • name (обязательно): Имя шаблона. Нет необходимости добавлять к нему префикс – WPML добавит в качестве префикса имя темы или плагина. Это единственное обязательное поле.
  • version (необязательно): Версия вашего шаблона. Рекомендуется использовать это поле, так как оно будет принудительно обновлять таблицы стилей и ресурсы javascript.
  • css (необязательно): По умолчанию поле будет проверять наличие и ставить в очередь все существующие CSS-файлы в каталоге шаблона. Но вы можете передать JSON-массив CSS-файлов внутри каталога шаблона. Пример: «css»: [«style.css», «responsive.css»] .
  • js (необязательно): По умолчанию поле будет проверять наличие и ставить в очередь все существующие JS-файлы в каталоге шаблона. Но вы можете передать JSON-массив JS-файлов внутри каталога шаблона.

    Пример: «js»: [«script.js», «click-script.js»] . Обратите внимание, что сценарий должен быть написан исключительно на Javascript, только если тема или плагин сами по себе не содержат другую библиотеку.

  • flags_dir (необязательно): По умолчанию поле будет проверять наличие существующего каталога «флажков» внутри папки шаблона или указанного каталога, если таков был определен.
  • flag_extension (необязательно): Файловое расширение флажков (png, svg, jpg, gif).
  • for (необязательно): По умолчанию шаблон будет доступен для всех объектов сайта («menus», «sidebars», «footer», «post_translations», «shortcode_actions»). Но вы можете указать один или несколько этих объектов в JSON-массиве.

    Пример: «for»: [«sidebars», «post_translations»] .

  • settings (необязательно): Настройки пользователя можно переопределить в графическом интерфейсе администратора, принудительно применив определенные настройки. Просто передайте объект JSON с необходимым значением (0 или 1) для display_flags, display_names_in_native_lang, display_names_in_current_lang или display_link_for_current_lang.

    Пример: «settings»: {«display_link_for_current_lang»: 1} .

Вот простейший пример файла config.json:


{

"name":           "My custom switcher",

}

А вот еще более подробный пример с дополнительными (необязательными) полями:


{

"name":           "Vertical List",

"version":         "1.0",

"css":            ["style.css"],

"js":             ["script.js"],

"flags_dir":      "super-flags",

"flag_extension": "png",

"for":            ["sidebars", "shortcode_actions"],

"settings":       {"display_link_for_current_lang": 1}

}

Примеры переключателей языка

Переключатель языка в меню

Допустим, вы хотите создать пользовательский язык, который будет отображаться в меню, как этот:

Пользовательский переключатель языка с кодами ISO

Пользовательский переключатель языка с кодами ISO

Меню будет включать только код ISO каждого языка (прописными буквами).

  1. Создадим в нашей теме новую папку шаблона: mytheme/wpml/templates/language-switchers/menu-iso-codes/
  1. В нее добавим файл config.json следующего содержания:


{

"name" : "ISO codes for menus",

"for": ["menus"]

}

По сути, мы определяем имя шаблона (которое будет включено в список доступных вариантов), а также контекст, в котором этот шаблон будет доступен (только для меню).

  1. Теперь добавим файл template.twig следующего содержания:


[ code|upper ]

Поскольку это шаблон меню, просто нужно вывести контент элемента пункта меню. Здесь мы выводим код языка после его обработки twig-фильтром upper (см. документацию здесь http://twig.sensiolabs.org/doc/filters/upper.html).

Примечание. В интерфейсе администрирования WordPress все еще можно изменить параметры отображения (флажок, родной язык…) но они не повлияют на вид во внешнем интерфейсе, потому что наш пользовательский шаблон не обрабатывает его. Чтобы не запутать пользователя, мы можем принудительно отключить эти настройки. Вот пример расширенного файла config.json:


{

"name" : "ISO codes for menus",

"for": ["menus"],

"settings": {

   "display_flags": 0,

   "display_names_in_native_lang": 0,

   "display_names_in_current_lang": 0

 }

}

Вот как это будет выглядеть в интерфейсе администратора:

Пользовательский переключатель языка в серверной части

Пользовательский переключатель языка в серверной части

Источник: файлы для этого примера можно загрузить с нашей выделенной страницы на GitHub.

Горизонтальный переключатель языка в виде списка

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

Горизонтальный переключатель языка только с флажками

Горизонтальный переключатель языка только с флажками

  1. Создайте свою папку шаблона в mytheme/wpml/templates/language-switchers/custom-flags-with-titles/
  1. Импортируйте свой набор флажков в папку mytheme/wpml/templates/language-switchers/custom-flags-with-titles/flags/.

(источник https://github.com/lipis/flag-icon-css)

Примечание. Набор флажков должен включать по одному файлу на каждый код языка, например: «en.svg», «fr.svg», «es.svg», «pt-pt.svg», …

  1. Создайте файл config.json, как в примере ниже:


{

"name": "Custom flags with titles",

"for": ["sidebars"],

"flag_extension": "svg",

"settings": {

  "display_flags": 1,

  "display_names_in_native_lang": 1,

  "display_names_in_current_lang": 1

 }

}

Просто определите файловое расширение для флажков («SVG»), а папку с флажками определять не нужно, поскольку мы используем имя папки по умолчанию («flags»).

  1. Создайте файл template.twig, как в примере ниже:




<div class="[ css_classes ] custom-flags-with-titles">



<ul>

     {% <b>for</b> code, language <b>in</b> languages %}



<li class="[ language.css_classes ] item-custom-flags-with-titles">

           <a href="[ language.url ]">

              <img src="[ language.flag_url ]" title="[ language.flag_title ]">

           </a>

        </li>



     {% <b>endfor </b>%}

  </ul>



</div>



  1. Чтобы использовать стили CSS, также необходимо создать файл style.css, как в примере ниже:


.custom-flags-with-titles li {

  list-style: none;

  float: left;

  margin: 0 3px;

}



.item-custom-flags-with-titles img {

  max-width: 32px;

  height: auto;

}

Источник: файлы для этого примера можно загрузить с нашей выделенной страницы на GitHub.