Как создать тему WordPress с поддержкой RTL: пошаговое руководство

Автор: Владимир Карпов | Опубликовано: 21.03.2026

Поддержка RTL (Right-to-Left) — важный аспект при разработке тем WordPress, если вы хотите, чтобы ваш сайт корректно отображался на языках с письмом справа налево, таких как арабский, иврит, фарси и другие. В этой статье мы подробно разберём, как создать тему WordPress с полноценной поддержкой RTL, какие нюансы нужно учитывать, а также рассмотрим примеры кода и полезные инструменты.

Что такое RTL и почему это важно для тем WordPress

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

Без правильной поддержки RTL ваша тема будет выглядеть некорректно: элементы интерфейса могут располагаться неправильно, текст — отображаться зеркально или ломаться верстка. Это негативно скажется на юзабилити и восприятии сайта пользователями.

Поэтому, если вы планируете создавать темы для интернациональных проектов или клиентов, поддержка RTL — обязательный пункт в техническом задании.

Как подготовить тему к поддержке RTL: структура и стили

1. Создание CSS-файла для RTL

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

Для удобства можно сгенерировать RTL-стили из основного файла style.css с помощью утилит, например, RTLcss. Это автоматизирует процесс замены свойств вроде margin-left на margin-right и т.д.

Пример простого rtl.css, который меняет направление текста и выравнивания:

body {
    direction: rtl;
    text-align: right;
}
.menu {
    margin-left: 0;
    margin-right: 20px;
}

2. Подключение rtl.css в теме

WordPress автоматически подключает файл rtl.css, если он находится в корне темы и язык сайта использует RTL. Но для более точного контроля можно использовать функцию wp_enqueue_style с параметром rtl.

Пример подключения стилей с учётом RTL:

function wpthemes_enqueue_styles() {
    wp_enqueue_style('wpthemes-style', get_stylesheet_uri());
    wp_style_add_data('wpthemes-style', 'rtl', 'replace');
}
add_action('wp_enqueue_scripts', 'wpthemes_enqueue_styles');

Здесь wp_style_add_data() сообщает WordPress, что при использовании RTL вместо style.css нужно подгружать rtl.css.

3. Использование CSS-переменных и логических свойств

Современный подход — использовать CSS-свойства с логикой направления, например margin-inline-start, padding-inline-end вместо жёстких left и right. Это упрощает поддержку RTL без необходимости создавать отдельные файлы.

Однако не все браузеры одинаково поддерживают такие свойства, поэтому часто используют их в связке с rtl.css.

Правильное построение HTML и шаблонов для RTL

Помимо CSS, важно, чтобы HTML-структура и шаблоны темы учитывали направление текста.

1. Установка атрибута `dir="rtl"` в `<html>`

WordPress автоматически добавляет этот атрибут, если язык сайта RTL, но если вы создаёте статические шаблоны, проверьте, что этот атрибут присутствует:

<html lang="ar" dir="rtl">

2. Избегайте жёстких расположений элементов

Не используйте абсолютные координаты с указанием left или right без адаптации под RTL. Лучше строить макет на flexbox или grid с поддержкой направления.

3. Настройка меню и навигации

Меню, особенно выпадающие списки, должны корректно работать в RTL. Например, стрелки и всплывающие подменю в RTL-среде должны появляться слева, а не справа. При необходимости используйте CSS-переменные или условные классы для переключения логики.

Примеры кода для поддержки RTL в вашей теме WordPress

Пример 1. Автоматическое добавление класса для RTL

function wpthemes_body_class_rtl($classes) {
    if (is_rtl()) {
        $classes[] = 'wpthemes-rtl';
    }
    return $classes;
}
add_filter('body_class', 'wpthemes_body_class_rtl');

Это позволяет в CSS явно стилизовать элементы, если активна RTL-версия.

Пример 2. Использование логического CSS с fallback

.content {
    margin-inline-start: 20px; /* для LTR это margin-left, для RTL margin-right */
    margin-left: 20px; /* fallback для старых браузеров */
}

Пример 3. Подключение RTL стилей с WPGPT

Если вы используете плагин WPGPT для генерации контента, убедитесь, что он корректно обрабатывает RTL-тексты. Для этого можно добавить фильтр:

add_filter('wpgpt_generate_content', function($content) {
    if (is_rtl()) {
        // Логика для обработки RTL, например, оборачиваем в div с классом
        $content = '<div class="wpthemes-rtl-content">' . $content . '</div>';
    }
    return $content;
});

Полезные плагины и инструменты для разработки RTL тем

1. RTL Tester

RTL Tester — плагин для быстрого переключения направления сайта между LTR и RTL без смены языка. Удобно для тестирования.

2. Clearfy Pro

Clearfy Pro помогает оптимизировать тему и отключить лишние скрипты, что важно для быстрой загрузки RTL-версий.

3. RTLcss CLI

Утилита для автоматической генерации RTL-стилей из LTR CSS. Позволяет сэкономить время и избежать ошибок.

Тестирование и отладка RTL темы

После реализации RTL поддержки обязательно тестируйте тему в разных браузерах и на реальных языках. Используйте эмуляторы и плагин RTL Tester для быстрого переключения.

Обратите внимание на:

Корректность отображения текста и элементов интерфейса;
Работу навигации и выпадающих меню;
Позиционирование виджетов и боковых панелей;
Совместимость с плагинами, особенно теми, которые влияют на вывод контента.

Если вы используете систему сборки (например, Gulp, Webpack), интегрируйте генерацию RTL CSS в процесс сборки.

Как создать тему WordPress с поддержкой RTL (Right-to-Left)