Если ваш сайт на ВордПресс, тогда вы можете использовать один из замечательных плагинов мультиязычности (Polylang, WPML, TranslatePres и другие). Однако из-за несовместимости отдельных плагинов на сайте иногда вам может понадобиться скрыть какой-либо блок с помощью стилей CSS в зависимости от языка страницы.
Стандартные способы перевода контента в Polylang
В качестве примера рассмотрим возможности плагина Polylang, но описанное применимо ко всем плагинам перевода WordPress-сайтов.
Перевод в Полиленге производится тремя путями:
1. Непосредственно создание перевода нажатием плюсика. Производится из списка материалов или при редактировании одного материала.
2. Выбор языка отображения в виджетах.
3. Перевод строк.
Как скрыть блок при помощи CSS, когда выбран определенный язык
Однако перечисленные выше стандартные способы могут не работать в некоторых случаях:
- устаревший тип блока;
- неподдерживаемый тип контента;
- какие-либо ошибки в работе сайта.
Если вам не удается перевести контент стандартными способами Polylang (или другого языкового плагина), целесообразно применять показ-скрытие блоков с помощью стилей CSS. Как это сделать?
Допустим, у вас есть ссылка на другой сайт и вы хотите показывать различный текст в зависимости от языка страницы (в этом примере английский или русский):
<div><a href="https://google.com/" title="Перейти на сайт Гугла">Сайт Гугла</a></div><div><a href="https://google.com/" title="Go to Google website">Google website</a></div>Чтобы скрыть один из блоков мы добавляем стили в CSS. В WordPress это делается в меню Внешний вид => Настроить => Дополнительные стили.
.hide-en:lang(ru-RU){display:none!important} /* Скрыть блок с классом hide-en для страниц на русском языке */
.hide-ru:lang(en){display:none!important} /* Скрыть блок с классом hide-ru для страниц на английском языке */После этого необходимо добавить соответствующие классы, модифицировав ваш код:
<div class="hide-ru"><a href="https://google.com/" title="Перейти на сайт Гугла">Сайт Гугла</a></div><div class="hide-en"><a href="https://google.com/" title="Go to Google website">Google website</a></div>В результате в каждом из языков будет показан только один из блоков.
Само собой название класса «hide-ru» использовано только для примера, вы можете использовать свое. Важная часть — это то, что идет после двоеточия «:lang(локаль)». Локаль конкретного языка вы можете посмотреть в плагине перевода или в начале кода загружаемой страницы.
Безусловно, скрытие контента при помощи стилей CSS не является правильным и корректным, ведь этот контент все равно будет в коде страницы, но иногда просто нет выбора.