Skip Navigation
Обновлено
9 января, 2024

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

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

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

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

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

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

Добавление PHP

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

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

Вот как будет выглядеть полный 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;
}