Как создать динамические стили для темы WordPress без плагинов

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

Почему динамические стили важны для темы WordPress

Статичные CSS-файлы не всегда подходят для адаптации дизайна под разные условия. Например, если вы хотите дать пользователю возможность менять цвета, шрифты, отступы, или использовать разные стили для мобильных устройств, лучше генерировать CSS на лету.

Динамические стили позволяют:

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

Как подключить динамические стили в теме WordPress

Самый простой способ — создать PHP-файл, который будет отдавать CSS с правильным заголовком. Например, файл dynamic-style.php в корне темы.

Пример кода wp-themes-dynamic-style.php:

<?php
header('Content-type: text/css; charset: UTF-8');

// Получаем настройки из базы, например, цвет фона
$bg_color = get_option('wp_themes_bg_color', '#ffffff');

// Безопасная очистка значения
$bg_color = preg_replace('/[^#a-fA-F0-9]/', '', $bg_color);

?>

body {
    background-color: <?php echo $bg_color; ?>;
    font-family: 'Arial', sans-serif;
}

h1, h2, h3 {
    color: #333;
}

Далее подключаем этот файл в functions.php темы с помощью wp_enqueue_style:

function wp_themes_enqueue_dynamic_style() {
    wp_enqueue_style('wp-themes-dynamic-style', get_template_directory_uri() . '/wp-themes-dynamic-style.php', [], null);
}
add_action('wp_enqueue_scripts', 'wp_themes_enqueue_dynamic_style');

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

Добавление пользовательских настроек в кастомайзер

Чтобы дать возможность менять стили из админки WordPress без плагинов, используем API кастомайзера. В functions.php добавим секцию и поле для выбора цвета фона:

function wp_themes_customize_register($wp_customize) {
    $wp_customize->add_section('wp_themes_colors_section', [
        'title' => 'Настройки цветов темы',
        'priority' => 30,
    ]);

    $wp_customize->add_setting('wp_themes_bg_color', [
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'wp_themes_bg_color_control', [
        'label' => 'Цвет фона',
        'section' => 'wp_themes_colors_section',
        'settings' => 'wp_themes_bg_color',
    ]));
}
add_action('customize_register', 'wp_themes_customize_register');

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

Оптимизация и кеширование динамических стилей

Чтобы не генерировать CSS при каждом запросе, стоит реализовать кеширование. Один из простых способов — сохранять сгенерированный CSS в файл и обновлять его при изменении настроек.

Пример функции для генерации и кеширования стилей:

function wp_themes_generate_dynamic_css() {
    $bg_color = get_option('wp_themes_bg_color', '#ffffff');
    $bg_color = preg_replace('/[^#a-fA-F0-9]/', '', $bg_color);

    $css = "body { background-color: {$bg_color}; font-family: 'Arial', sans-serif; }\n";
    $css .= "h1, h2, h3 { color: #333; }\n";

    $upload_dir = wp_upload_dir();
    $css_file = $upload_dir['basedir'] . '/wp-themes-dynamic-style.css';

    file_put_contents($css_file, $css);

    return $upload_dir['baseurl'] . '/wp-themes-dynamic-style.css';
}

function wp_themes_enqueue_cached_dynamic_style() {
    $css_url = wp_themes_generate_dynamic_css();
    wp_enqueue_style('wp-themes-dynamic-style', $css_url, [], null);
}
add_action('wp_enqueue_scripts', 'wp_themes_enqueue_cached_dynamic_style');

Для обновления стилей при смене настроек можно добавить хук на customize_save_after, который вызовет пересоздание CSS-файла.

Пример расширения динамических стилей: шрифты и отступы

Добавим в кастомайзер выбор основного шрифта и базового отступа для контента.

function wp_themes_customize_fonts_and_spacing($wp_customize) {
    $wp_customize->add_section('wp_themes_fonts_section', [
        'title' => 'Настройки шрифтов и отступов',
        'priority' => 31,
    ]);

    $wp_customize->add_setting('wp_themes_main_font', [
        'default' => 'Arial, sans-serif',
        'sanitize_callback' => 'wp_themes_sanitize_font',
    ]);

    $wp_customize->add_control('wp_themes_main_font_control', [
        'label' => 'Основной шрифт',
        'section' => 'wp_themes_fonts_section',
        'settings' => 'wp_themes_main_font',
        'type' => 'select',
        'choices' => [
            'Arial, sans-serif' => 'Arial',
            'Georgia, serif' => 'Georgia',
            '"Courier New", monospace' => 'Courier New',
            'Tahoma, sans-serif' => 'Tahoma'
        ],
    ]);

    $wp_customize->add_setting('wp_themes_content_padding', [
        'default' => '20',
        'sanitize_callback' => 'absint',
    ]);

    $wp_customize->add_control('wp_themes_content_padding_control', [
        'label' => 'Отступы контента (px)',
        'section' => 'wp_themes_fonts_section',
        'settings' => 'wp_themes_content_padding',
        'type' => 'number',
        'input_attrs' => [
            'min' => 0,
            'max' => 100,
            'step' => 1
        ],
    ]);
}
add_action('customize_register', 'wp_themes_customize_fonts_and_spacing');

function wp_themes_sanitize_font($input) {
    $valid = [
        'Arial, sans-serif',
        'Georgia, serif',
        '"Courier New", monospace',
        'Tahoma, sans-serif'
    ];
    return in_array($input, $valid) ? $input : 'Arial, sans-serif';
}

И обновим генерацию CSS, чтобы использовать эти настройки:

function wp_themes_generate_dynamic_css() {
    $bg_color = get_option('wp_themes_bg_color', '#ffffff');
    $bg_color = preg_replace('/[^#a-fA-F0-9]/', '', $bg_color);

    $font = get_option('wp_themes_main_font', 'Arial, sans-serif');
    $padding = absint(get_option('wp_themes_content_padding', 20));

    $css = "body { background-color: {$bg_color}; font-family: {$font}; }\n";
    $css .= ".content { padding: {$padding}px; }\n";
    $css .= "h1, h2, h3 { color: #333; }\n";

    $upload_dir = wp_upload_dir();
    $css_file = $upload_dir['basedir'] . '/wp-themes-dynamic-style.css';

    file_put_contents($css_file, $css);

    return $upload_dir['baseurl'] . '/wp-themes-dynamic-style.css';
}

Использование плагина Clearfy Pro для оптимизации темы

Для тех, кто не хочет писать весь код самостоятельно, можно рекомендовать плагин Clearfy Pro. Он позволяет отключать ненужные скрипты и стили, оптимизировать загрузку CSS и JavaScript, а также предоставляет интерфейс для некоторых базовых настроек темы. Но для полного контроля и кастомизации динамического CSS лучше использовать собственные решения, описанные выше.

Заключение по созданию динамических стилей в теме

Динамические стили — мощный инструмент для адаптации темы под нужды пользователя и оптимизации загрузки сайта. Используя PHP для генерации CSS, API кастомайзера для настроек и простое кеширование, вы получаете гибкую и легкую в поддержке систему стилей без необходимости в плагинах. Это особенно актуально для разработчиков, которые создают уникальные темы или хотят повысить производительность проектов.