Как добавить локализованные стили в WordPress для разных языков сайта

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

Почему важно использовать локализованные стили для многоязычных сайтов

Многие разработчики ограничиваются универсальной темой и одними и теми же стилями для всех языков. Однако у разных культур и языков могут быть свои предпочтения в дизайне, а также специфические особенности, например, направление текста (LTR или RTL).

Использование локализованных стилей позволяет:

• Поддерживать уникальный визуальный стиль для каждого языка;
• Улучшить пользовательский опыт;
• Избежать конфликтов при использовании RTL-языков;
• Упростить поддержку и масштабирование дизайна.

Как определить текущий язык в WordPress

Для начала нужно знать, как получить текущий язык сайта. Если вы используете популярные мультиязычные плагины, такие как Polylang или WPML, у них есть свои функции для получения текущего языка.

Пример для Polylang:

function wpskins_get_current_language() {
    if ( function_exists('pll_current_language') ) {
        return pll_current_language();
    }
    return get_locale();
}

Этот код возвращает код текущего языка, например, "en" или "ru".

Добавление локализованных стилей через functions.php

Основная задача — подключить разные CSS-файлы в зависимости от языка. Для этого используем хук wp_enqueue_scripts. Ниже пример функции, которая это реализует:

function wpskins_enqueue_localized_styles() {
    $lang = wpskins_get_current_language();

    // Подключаем основной стиль
    wp_enqueue_style('theme-style', get_stylesheet_uri());

    // В зависимости от языка подключаем дополнительные стили
    if ($lang === 'ru') {
        wp_enqueue_style('theme-style-ru', get_template_directory_uri() . '/css/style-ru.css', array('theme-style'));
    } elseif ($lang === 'en') {
        wp_enqueue_style('theme-style-en', get_template_directory_uri() . '/css/style-en.css', array('theme-style'));
    }
    // Можно добавить другие языки по аналогии
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_localized_styles');

Такой подход позволяет хранить отдельные CSS-файлы для каждого языка, которые переопределяют или дополняют базовые стили.

Советы по организации CSS-файлов для локализации

• В базовом style.css храните общие стили, которые не зависят от языка.
• В локализованных файлах пишите только отличия.
• Используйте SASS или LESS с переменными для упрощения поддержки.
• Для RTL-языков создавайте отдельный набор стилей, например, style-ru-rtl.css.

Динамическое добавление классов для стилей в HTML

Иногда удобнее не подключать отдельные файлы, а менять стили в зависимости от класса у body. Например:

function wpskins_body_class_localized($classes) {
    $lang = wpskins_get_current_language();
    $classes[] = 'lang-' . $lang;
    return $classes;
}
add_filter('body_class', 'wpskins_body_class_localized');

В таком случае в CSS можно писать селекторы по классу, например:

.lang-ru .header {
    background-color: #f00;
}
.lang-en .header {
    background-color: #00f;
}

Это уменьшает количество подключаемых файлов и ускоряет загрузку.

Особенности для RTL-языков и плагин Clearfy Pro

Для языков с направлением текста справа налево (например, арабский, иврит) важно подключать RTL-версии стилей. WordPress автоматом подгружает rtl.css если он есть в вашей теме.

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

Пример: локализация стилей с использованием WPSkin

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

function wpskins_switch_skin_by_language() {
    $lang = wpskins_get_current_language();

    if ($lang === 'ru') {
        wpskin_set_active_skin('ru-skin');
    } elseif ($lang === 'en') {
        wpskin_set_active_skin('en-skin');
    }
}
add_action('init', 'wpskins_switch_skin_by_language');

Такой подход позволяет полностью менять визуальное оформление под каждый язык без ручного подключения CSS.

Выводы и рекомендации

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

Резюме:

• Используйте функции мультиязычных плагинов для определения языка;
• Подключайте отдельные CSS-файлы или меняйте стили через класс <body>;
• Оптимизируйте загрузку стилей с помощью плагинов, например Clearfy Pro;
• Если нужно — применяйте смену скинов через WPSkin для полного изменения дизайна.