Задумали создать сайт на арабском? В WordPress есть функция RTL-support, которая переводится как “справа налево” (right to left). Она вам точно понадобится, если у вас появились планы сверстать сайт на арабском языке или идиш. Просто перевести содержимое сайта будет недостаточно!

Возможно, вы собираетесь развивать бизнес за границей или продавать там товары посредством сети Интернет, оказывать услуги, например, по таможенному оформлению, обязательной маркировке импортных изделий и пр. Безусловно, при настройке мультиязычности нужна тема Вордпресс, которая бы поддерживала функцию написания языковых символов справа налево. Какие готовые шаблоны выбрать? Как настроить функцию RTL-support самостоятельно и как удалить ее, когда она не нужна. Рассмотрим эти вопросы подробнее.

Готовые темы Вордпресс с функцией RTL-support

Бывает так, что никаких особых усилий прилагать не нужно. Достаточно после загрузки готового пакета скриптов движка WordPress на хостинг установить на него тему Twenty Twenty-One. Она высвечивается одной и первых в списке доступных из каталога бесплатных.

Другие можно поискать через вкладку “Добавить новую тему”, там нажать на “Фильтр” и указать галочкой опцию “Специальные возможности” или нечто похожее. Отсортированы будут исключительно темы со специальными возможностями, среди которых найдутся и таких, которые поддерживают написание справа налево. Идеальный вариант для сайта на арабском языке.

Всего таких около сотни с ярким дизайном или раскладкой в сдержанных тонах. Нажав на одну из них, можно прочитать описание и выбрать путем просмотра шаблонов один за другим. При нахождении подходящего жмем на “Установить”, затем когда установка завершится, на “Активировать”. После чего автоматически откроется окно настройки элементов темы. Если не открылось, самостоятельно ищем пункт “Темы” – “Настроить” в левой колонке Консоли. Путем настройки темы задаются изображения, фавикон, статическая или страница записей на главной и др.

Как настроить функцию RTL-support в коде для сайта на арабском языке

Первым делом при самостоятельной настройке функций RTL-support нужно поколдовать в файле стилей CSS, чтобы иностранный язык отображался на сайте корректно. Если вы это не настроите, то сайт, как говорится, “полетит в тартарары” при попытке добавить туда элементы на арабском или идише, а также после настройки мультиязычности.

Добавить фид к генератору CSS RTL

Первый способ сделать адекватное отображение языка — добавить в файл дизайна CSS готовый фид к генератору CSS RTL.

Скопируйте готовый код с https://cssjanus.github.io/ и вставьте его в style.css вашего сайта, нажмите “Сохранить”. Все! Он должен заработать немедленно или в течение 48 часов (таков период перезаписи автоматически сохраненных на сервере данных).

Или зайдите на https://rtlcss.com/. Там в разделе https://rtlcss.com/learn/ имеется целое руководство по настройке функции RTL-support. Сайт на арабском будет выглядеть органично и работать грамотно, если дополнения в коде будут прописаны верно.

Создать отдельный файл

Способ проще представляет собой создание отдельного файла style-rtl.css с готовым кодом необходимой функции. Сначала там пишем такой код (по сути копируем отсюда:

body {

direction: rtl;

unicode-bidi: embed;

}

Этим внедряется новое позиционирование всех горизонтальных элементов в основном файле — обычном CSS. Затем переключите все позиционные коды, убедившись, что все, что было налево, вы переключили направо и наоборот. В частности, обратите внимание на:

1. text-align.
2. float.
3. clear. 

Притом все кнопки с отрицательным значением (-) должны быть переориентированы на положительное. Если на сайте есть фоновые изображения, обозначающие некоторое конкретное направление, сначала обнулите значения их атрибутов, затем придайте новые через спецификацию:

• padding;
• margin;
• позиционирование left и right;
• background-position;
• borders

Когда все это прописано, сохраните новый готовый файл rtl.css в той же директории, что и style.css

Убедитесь, что WordPress “видит” новые стили

Одних добавлений файла или файлов недостаточно. Чтобы сайт на Вордпресс их “увидел” необходимо внести код “открывания глаз” на них в волшебный файл functions.php. Там важно вызвать особую функцию, и Вордпресс обратит внимание на то, что вы ему дополнительно наверстали. Дописываем в functions.php это:

function enqueue_theme_files() {

wp_enqueue_style( ‘themeslug-style’, get_stylesheet_uri() );

wp_style_add_data( ‘themeslug-style’, ‘rtl’, ‘replace’ );

}

add_action( ‘wp_enqueue_scripts’, ‘enqueue_theme_files’ );

Предположим, что вы уже правильно используете enqueue для загрузки в свою обычную таблицу стилей styles.css, вы можете просто добавить информацию wp_style_add_data() в существующую функцию enqueued styles.

Однако при использовании специальной таблицы стилей переопределения вам не нужно будет загружать какие-либо специальные функции. WordPress просто загрузит файл rtl.css после вашего обычного styles.css, который перезапишет направляющие сигналы с помощью дополнительного файла.

Проверка подключения функции RTL-support в действии

Как только выбранный вами метод будет готов к использованию, самое время проверить, все ли работает правильно в WordPress. Давайте посмотрим, как вы можете протестировать свой новый дизайн темы с поддержкой RTL. Увидев его в действии, вы сможете убедиться, что все выглядит так, как ожидалось, и учесть все необходимые исправления, внесенные вручную.

Перейдите в консоли в “Настройки” — “Общие”, где напротив выборки языков сайта найдите и выберите необходимый язык с написанием справа налево. Сохраните новые настройки и перейдите на сайт, чтобы посмотреть, как все заработало.

На этом процесс окончен. Теперь ваш сайт на арабском или идиш готов в плане корректного отображения языковых символов.