Как создать пользовательский переключатель языков в 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.

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

/* Удаление некоторых CSS по умолчанию из нашего переключателя языков */
.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 {
  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. Прокрутите вниз до Custom language switchers и нажмите Enable.
  3. Нажмите кнопку Настроить.
  4. Для параметра Что включать в переключатель языков выберите Флаг и снимите флажки с остальных опций.
  5. Нажмите кнопку Сохранить.
Отображение только флага в плавающем переключателе языков

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

Переключатель языков на фронт-энде
Переключатель языков на фронт-энде

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

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

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

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

/*Удаление некоторых CSS по умолчанию в нашем переключателе языков*/
.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;
}
  
/*Настройте это по своему усмотрению*/
.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;
}

WordPress просит доступ к FTP при обновлении и установке темы/плагина

Суть проблемы

Данная проблема возникает по разным причинам, но решается она достаточно просто. Можно, конечно, прописать в сплывающем, как на картинке ниже, окне, свои FTP-доступы, но помимо того, что это не так уж и безопасно, есть еще серверы, к которым доступ по FTP осуществляется без пароля посредством защищенного сертификата.

Ошибка при попытке установить тему из админки WordPress
Ошибка при попытке установить тему из админки WordPress

В результате нет возможности устанавливать и обновлять плагины, шаблоны, а также сам WordPress.

Простое решение

Чтобы избавиться от этого сообщения и спокойно обновлять WordPress, устанавливать из панели администратора плагины и шаблоны без необходимости загружать их через Filezilla или другой ФТП-клиент, достаточно выполнить следующее.

Навыки
Редактирование файлов
Потребуется
Доступ к FTP
Необходимое время
10 мин
1
2
3
4
Находим нужную строчку в конфиге

Открываем файл wp-config.php и находим в нем следующую строку:

/* Это всё, дальше не редактируем. Успехов! */

или ее же по-английски (в зависимости от того, какой дистрибутив установлен на сайте):

/* That's all, stop editing! Happy publishing. */

Модифицируем файл

Добавляем перед ней код, представленный ниже:

define('FS_METHOD', 'direct');

Должно получиться как на скриншоте.

Решаем проблему с обновлением и установкой плагинов/тем в WordPress
Загружаем файл на сервер

Сохраняем файл и загружаем на сервер, например, через программу Filezilla.

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

Загрузка файла wp-config.php на сервер через Filezilla
Проверяем права на запись в папки

У пользователя www-data (или другого, которым управляется ваш сервер) должны быть права на запись в следующие папки сайта:

  • wp-content
  • wp-content/plugins
  • wp-content/themes
  • wp-content/uploads