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

При разработке мультиязычных сайтов с помощью WPML Вам может понадобиться пользовательский переключатель языков. Узнайте, как это сделать с помощью простого PHP- и CSS-кода.

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

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

Выполните три основных шага:

1. Добавьте PHP-код, который выводит переключатель языков
2. Стилизуйте переключатель языков с помощью CSS
3. Обновите настройки переключателя языков

Часть с PHP

Первый шаг — добавить PHP-код, отвечающий за вывод переключателя языков на странице. Для этого нужно создать функцию, которая добавляет контейнер div с переключателем языков внутри. Для вывода переключателя языков можно использовать хук wpml_add_language_selector.

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

Полный PHP-код будет выглядеть так.

//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Вы можете скопировать и добавить его в файл functions.php Вашей (дочерней) темы оформления.

Стилизация

Благодаря предыдущему коду в футер нашего сайта уже добавлен новый переключатель языков. Теперь пришло время настроить его так, чтобы он оставался плавающим в правом нижнем углу сайта. Это можно сделать с помощью CSS-свойства position: fixed.

Выполните следующие шаги, чтобы добавить CSS-код:

1. Перейдите в WPML → Настройки → Переключатели языков.
2. В карточке Параметры переключателя языков разверните Дополнительный CSS.

Также Вы можете добавить этот CSS-код, перейдя во Внешний вид → Настроить и нажав Дополнительный CSS.

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

/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

Настройки

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

Выполните следующие действия:

1. Перейдите в WPML → Настройки → Переключатели языков → Пользовательские переключатели языков.
2. Прокрутите вниз до раздела Пользовательские переключатели языков и нажмите Включить.
3. Нажмите кнопку Настроить.
4. В разделе Что включить в переключатель языков оставьте галочку Флаг и снимите галочки Название языка на родном языке, Название языка на текущем языке и Текущий язык.
5. Нажмите Сохранить.

Вот и всё! Теперь на Вашем сайте должен появиться красивый пользовательский переключатель языков:

Бонус: вертикальный плавающий переключатель языков

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

Для этого просто замените предыдущий CSS-код на следующий:

/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}