Как добавить поддержку CSS-переменных в WordPress теме: практическое руководство

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

Что такое CSS-переменные и зачем они нужны в WordPress теме

CSS-переменные — это свойства, значения которых можно повторно использовать в файлах стилей. Они объявляются с префиксом -- и доступны в любом месте CSS с помощью функции var(). Например:

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
}

Преимущества использования CSS-переменных в теме WordPress:

Динамическая кастомизация: можно легко менять тему без дублирования кода.
Поддержка в современных браузерах: CSS-переменные поддерживаются в большинстве популярных браузеров.
Упрощение поддержки темы: меньше кода — меньше ошибок.

Недостаток: IE11 и ниже не поддерживают CSS-переменные, но их доля на рынке сейчас минимальна.

Как добавить поддержку CSS-переменных в WordPress теме

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

Подключение основного CSS с переменными

Создадим в папке темы файл css/variables.css с базовыми переменными:

:root {
  --main-color: #0073aa;
  --secondary-color: #222;
  --font-size-base: 16px;
}

В functions.php подключим этот файл:

function wp_theme_enqueue_styles() {
    wp_enqueue_style('wp-theme-variables', get_template_directory_uri() . '/css/variables.css', array(), '1.0');
    wp_enqueue_style('wp-theme-style', get_stylesheet_uri(), array('wp-theme-variables'), '1.0');
}
add_action('wp_enqueue_scripts', 'wp_theme_enqueue_styles');

Обратите внимание, что основной стиль зависит от variables.css, что гарантирует корректный порядок загрузки.

Динамическая замена переменных через inline-стили

Чтобы менять переменные без перезагрузки стилей, можно выводить CSS переменные из PHP прямо в <head>. Например, для настройки цвета из настроек темы:

function wp_theme_inline_css_variables() {
    $main_color = get_theme_mod('wp_theme_main_color', '#0073aa');
    $custom_css = "<style>:root { --main-color: {$main_color}; }</style>";
    echo $custom_css;
}
add_action('wp_head', 'wp_theme_inline_css_variables', 20);

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

Примеры практического использования CSS-переменных в теме WordPress

1. Темная и светлая тема на CSS-переменных

Добавим переключатель темы с разными значениями переменных. В CSS:

:root {
  --background-color: #fff;
  --text-color: #000;
}

body.dark-mode {
  --background-color: #222;
  --text-color: #eee;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

JavaScript для переключения класса:

document.getElementById('toggle-theme').addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

HTML-кнопка:

<button id="toggle-theme">Переключить тему</button>

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

2. Использование CSS-переменных для настройки цветов в пользовательских блоках Gutenberg

При создании блоков Gutenberg можно использовать CSS-переменные для управления стилями из настроек блока. В PHP-регистрации блока передаем классы с переменными, в JS-редакторе подключаем стили с использованием этих переменных.

Пример регистрации стиля с переменной цвета:

function wp_theme_register_block_style() {
    wp_register_style('wp-theme-block-style', get_template_directory_uri() . '/css/block-style.css', array(), '1.0');
    register_block_type('wp-theme/custom-block', array(
        'style' => 'wp-theme-block-style',
    ));
}
add_action('init', 'wp_theme_register_block_style');

В block-style.css:

.wp-block-wp-theme-custom-block {
  background-color: var(--main-color);
  font-size: var(--font-size-base);
}

Оптимизация и обратная совместимость при использовании CSS-переменных

Для поддержки старых браузеров можно использовать fallback значения в var():

color: var(--main-color, #0073aa);

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

Для динамического изменения переменных можно использовать JavaScript:

function wp_theme_set_css_variable(name, value) {
  document.documentElement.style.setProperty(name, value);
}

// Пример использования
wp_theme_set_css_variable('--main-color', '#e74c3c');

Заключение

Добавление поддержки CSS-переменных в WordPress тему — это современный и эффективный способ сделать стили более гибкими и удобными для кастомизации. Используя правильное подключение стилей, динамическую замену значений из PHP и JavaScript, вы сможете создавать темы с адаптивным и легко настраиваемым дизайном.

Если хотите ускорить разработку, обратите внимание на плагин Clearfy Pro, который помогает оптимизировать загрузку стилей и скриптов в WordPress, что отлично сочетается с использованием CSS-переменных.