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

Если ваш сайт на ВордПресс, тогда вы можете использовать один из замечательных плагинов мультиязычности (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 не является правильным и корректным, ведь этот контент все равно будет в коде страницы, но иногда просто нет выбора.