WPML предоставляет удобный переключатель языков, но иногда он нужен не на всех страницах. Узнайте, как показать или скрыть его только на определенных страницах.
Это легко сделать с помощью нескольких строк CSS.
Отображение переключателя языков только на определенных страницах
Шаг 1: скрытие переключателя языков на всех страницах
Сначала Вам нужно проверить, какой класс использует наш переключатель языков.
Вы можете проверить это с помощью инструментов разработчика в браузере:
- Откройте свой сайт на фронтенде и нажмите клавишу F12 на клавиатуре.
- Используйте инструмент проверки кода, чтобы выбрать переключатель языков, после чего появится его HTML-разметка.
Вот два распространенных класса для переключателя языков:
- класс wpml-ls-menu-item, когда переключатель появляется в меню
- класс wpml-ls, когда переключатель появляется в футере
Узнав правильный класс, перейдите на страницу Внешний вид → Настроить, нажмите Дополнительный CSS и добавьте следующий CSS на свой сайт.
Скрыть переключатель языков в меню
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}Это скроет переключатель языков на всех страницах.
Как вариант, эти правила стилей можно добавить в файл style.css Вашей темы оформления, но обязательно используйте дочернюю тему. В противном случае Ваши пользовательские стили будут потеряны при обновлении темы.
Подробную информацию о CSS-классах переключателя языков Вы найдете на нашей странице о CSS-стилизации переключателей языков.
Шаг 2: отображение переключателя языков на определенной странице
На следующем шаге Вам нужно добавить еще один фрагмент CSS, чтобы отобразить переключатель языков только на нужных Вам страницах.
WordPress автоматически добавляет определенные классы к тегу body каждой страницы. Это позволяет Вам обратиться к переключателю языков на конкретной странице.
Чтобы найти этот класс, откройте во фронтенде страницу, на которой Вы хотите отобразить переключатель языков. Снова используйте инструмент проверки в браузере и найдите тег body.
Вы увидите что-то вроде этого:
Поиск класса id
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
В данном случае класс page-id-2 добавлен только к этой конкретной странице. Это число — ID страницы, и Вы можете использовать его для создания своего фрагмента кода.
Полный фрагмент кода должен выглядеть так:
Скрыть переключатель языков в меню — полностью
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}Не забудьте заменить класс page-id-2 на класс Вашей страницы.
Вот некоторые из классов, которые Вы можете использовать:
- page-id-X: используется для страниц (замените X на ID страницы)
- postid-X: используется для записей (замените X на ID записи)
- home: используется для главной страницы
- single-post: используется для всех записей (не для конкретной)
- page: используется для всех страниц (не для конкретной)
Скрытие переключателя языков только на определенных страницах
Скрытие переключателя языков на определенных страницах очень похоже на предыдущие шаги. Но вместо того, чтобы скрывать его на всех страницах, Вы скроете его только на одной конкретной.
Для этого Вам нужно лишь узнать конкретный класс страницы, а затем использовать его, чтобы скрыть переключатель языков на этой странице.
Ваш фрагмент CSS должен выглядеть так:
Скрыть переключатель языков только на странице с ID 2
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}Не забудьте заменить класс page-id-2 на Ваш конкретный класс.