Skip Navigation
Главная » Документация » Руководство по началу работы » Настройки языков » Пользовательский переключатель языка

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

Amir
Обновлено
16 августа, 2021

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

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

Сайт с плавающим переключателем языка

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

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

Добавление PHP

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

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

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

Language switcher 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.

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

Language Switcher Styling 
/*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. Щелкните Сохранить.
Language switcher options
Отображение только флага в плавающем переключателе языка

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

Horizontal language switcher
Переключатель языка во внешнем интерфейсе

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

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

Vertical language switcher
Вертикальный переключатель языка

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

Vertical Language Switcher 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;
}