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

Автор: Егор Савельев | Опубликовано: 19.12.2025

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

Зачем нужно динамическое тематическое оформление в WordPress

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

Основные задачи динамического скина:

Пользователь выбирает скин в настройках или через интерфейс.
Скин применяется автоматически при загрузке страниц.
Внешний вид меняется без необходимости смены темы или установки плагинов.
Возможность добавить свои параметры для кастомизации.

Использование плагинов иногда избыточно, а написание собственного решения даёт полную свободу и оптимизацию.

Как реализовать динамическое изменение стилей в WordPress

Подключение альтернативных CSS в зависимости от выбранного скина

Самый простой способ — подключать разные CSS-файлы по условию. Например, создадим несколько css-файлов в папке темы:

style-default.css
style-dark.css
style-blue.css

Для хранения выбора скина можно использовать куки, сессию или user meta (для авторизованных).

Добавим функцию, которая определит текущий скин и подключит нужный CSS:

function wpskins_enqueue_skin_styles() {
    $default_skin = 'default';
    // Получаем выбранный скин из куки
    $skin = isset($_COOKIE['wpskins_skin']) ? sanitize_text_field($_COOKIE['wpskins_skin']) : $default_skin;
    
    // Список доступных скинов
    $available_skins = ['default', 'dark', 'blue'];
    if (!in_array($skin, $available_skins)) {
        $skin = $default_skin;
    }
    
    // Путь к css
    $css_file = get_template_directory_uri() . "/css/style-" . $skin . ".css";
    wp_enqueue_style('wpskins-skin-style', $css_file, [], null);
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_skin_styles');

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

Создание пользовательского выбора скина с сохранением в куки

Добавим небольшой HTML и JavaScript, который позволит менять скин без перезагрузки страницы, а также сохранять выбор:

<div id="wpskins-selector">
  <button data-skin="default">Стандартный</button>
  <button data-skin="dark">Тёмный</button>
  <button data-skin="blue">Голубой</button>
</div>

<script>
document.getElementById('wpskins-selector').addEventListener('click', function(e) {
  if(e.target.tagName === 'BUTTON') {
    var selectedSkin = e.target.getAttribute('data-skin');
    document.cookie = 'wpskins_skin=' + selectedSkin + ';path=/;max-age=' + 60*60*24*30;
    location.reload();
  }
});
</script>

При клике на кнопку будет сохраняться куки на 30 дней и страница перезагрузится с новым стилем.

Как усложнить динамическое оформление: смена не только CSS, но и шаблонов

Иногда нужно менять не только стили, но и html-разметку — например, выводить разные шапки или футеры для разных скинов.

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

Пример функции, которая подгружает альтернативные файлы header.php в зависимости от скина:

function wpskins_template_include_alternative( $template ) {
    $skin = isset($_COOKIE['wpskins_skin']) ? sanitize_text_field($_COOKIE['wpskins_skin']) : 'default';
    
    // Проверяем, есть ли альтернативный header
    $child_header = get_stylesheet_directory() . "/header-" . $skin . ".php";
    if ( file_exists( $child_header ) ) {
        // Подменяем основной шаблон на альтернативный
        // Для примера подменим только фронт-пейдж
        if ( is_front_page() ) {
            return $child_header;
        }
    }
    return $template;
}
add_filter('template_include', 'wpskins_template_include_alternative');

В папке темы создайте файлы header-dark.php, header-blue.php с нужной разметкой.

Использование get_template_part с динамическими именами

Для удобства можно подгружать динамические части шаблона прямо из обычного header.php:

<?php
$skin = isset($_COOKIE['wpskins_skin']) ? sanitize_text_field($_COOKIE['wpskins_skin']) : 'default';
get_template_part('template-parts/header', $skin);
?>

Так WordPress подгрузит файл template-parts/header-dark.php или template-parts/header-blue.php в зависимости от скина.

Особенности и советы при создании динамических скинов

Кэширование и производительность

При использовании динамических скинов важно помнить, что кэширование страниц и стилей может конфликтовать с куки и выбором пользователя. Рекомендуется настроить кэш-сервер или плагин так, чтобы учитывать куки wpskins_skin, либо использовать ajax-загрузку стилей.

Безопасность и валидация данных

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

Интеграция с плагинами и темами

Если вы используете темы с расширенной системой настроек, динамические скины можно дополнить настройками кастомайзера или метаполями пользователей. Например, можно сохранять выбор скина в user meta для авторизованных и подгружать по нему.

Пример расширения: динамический выбор скина через пользовательское меню в админке

Для авторизованных можно добавить страницу в админке, где они смогут выбрать скин, который будет сохраняться в user meta.

function wpskins_add_admin_menu() {
    add_menu_page('Выбор скина', 'Выбор скина', 'read', 'wpskins-settings', 'wpskins_settings_page');
}
add_action('admin_menu', 'wpskins_add_admin_menu');

function wpskins_settings_page() {
    if ( isset($_POST['wpskins_skin']) && in_array($_POST['wpskins_skin'], ['default','dark','blue'])) {
        update_user_meta(get_current_user_id(), 'wpskins_skin', sanitize_text_field($_POST['wpskins_skin']));
        echo '<div class="updated">Скин сохранён</div>';
    }
    $current_skin = get_user_meta(get_current_user_id(), 'wpskins_skin', true) ?: 'default';
    ?>
    <form method="post">
        <select name="wpskins_skin">
            <option value="default" <?php selected($current_skin, 'default'); ?>>Стандартный</option>
            <option value="dark" <?php selected($current_skin, 'dark'); ?>>Тёмный</option>
            <option value="blue" <?php selected($current_skin, 'blue'); ?>>Голубой</option>
        </select>
        <input type="submit" value="Сохранить" />
    </form>
    <?php
}

function wpskins_enqueue_skin_for_user($styles) {
    $skin = get_user_meta(get_current_user_id(), 'wpskins_skin', true);
    if ($skin && in_array($skin, ['default','dark','blue'])) {
        $styles = $skin;
    }
    return $styles;
}
// Ваша функция подключения стилей доработайте, чтобы учитывала user meta

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

Заключение

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

Для удобства управления стилями можно использовать CSS-препроцессоры (SASS/LESS) и подключать скомпилированные файлы с разными цветовыми схемами.

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