Как исправить проблемы со стилями и CSS переключателей языков

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

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

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

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

1. Временно добавьте переключатель языка в футере, который имеет очень простой CSS и будет работать почти на любом сайте.
2. Временно удалите любой пользовательский CSS и используйте переключатель языков WPML с настройками по умолчанию
3. Воспользуйтесь отладчиком CSS в Вашем браузере и посмотрите, нет ли явных конфликтов CSS. Если Вы найдете причину, Вы можете переопределить стили CSS на странице WPML → Языки в разделе Параметры переключателя языков. Там нажмите ссылку Дополнительный CSS.

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

Классы CSS для каждого языка

Ниже приведен список классов CSS для каждого языка:

• wpml-ls-slot-{slug}: например, «wpml-ls-slot-sidebar-1».
• wpml-ls-item.
• wpml-ls-item-{language_code}: например, «wpml-ls-item-en».
• wpml-ls-current-language: только для элемента текущего языка.
• wpml-ls-menu-item: только для переключателей языков в меню.
• wpml-ls-first-item: для выбора первого языкового элемента в списке.
• wpml-ls-last-item: для выбора последнего языкового элемента в списке)

Если требуется изменить классы CSS для каждого языка, WPML предлагает хук-фильтр wpml_ls_model_language_css_classes.

Например, допустим, Вам нужно добавить класс my-custom-item-class для каждого языка. В этом случае Вы можете добавить следующий код в файл functions.php Вашей темы:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

Классы CSS обертки переключателя языков

Ниже приведен список классов CSS для обертки переключателя языков:

• wpml-ls
• wpml-ls-{group}-{slug}: например, «wpml-ls-statics-footer».
• wpml-ls-{template-slug}: например, «wpml-ls-legacy-dropdown-click».
• wpml-ls-rtl: для языков с написанием справа налево (RTL).
• wpml-ls-touch-device: этот класс добавляется для мобильных устройств и планшетов.

В следующей таблице показано, как формируются классы CSS в зависимости от {group} и {slug}:

Как и прежде, если Вам нужно добавить пользовательский класс CSS для обертки переключателя языков, Вы можете использовать наш хук-фильтр wpml_ls_model_css_classes . Код, подобный следующему, в файле functions.php Вашей темы добавит класс CSS my-custom-wrapper-class:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

Примечание: WPML внедряет только некоторые элементы для параметра переключателя языков в меню. Как следствие, у него нет класса обертки.

Настройка переключателя языков с помощью CSS

Мы можем легко добавить некоторые пользовательские стили CSS на странице WPML → Языки в разделе Параметры переключателя языков. Там нажмите ссылку Дополнительный CSS.

Пример 1: Отображение текущего языка жирным шрифтом

.wpml-ls-current-language {
font-weight: bold;
}

Пример 2: Изменение размера шрифта только для переключателя языка в футере

.wpml-ls-statics-footer {
    font-size: 18px;
}

Пример 3: Добавление отступа справа после последнего языкового элемента

.wpml-ls-last-item {
    margin-right: 10px;
}

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

Пример 4: Добавление жирного текста для текущего языка в переключателе языка в футере

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

Пример 5: Задание фиксированной ширины переключателя языков в меню

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}