Как создать настройку выбора темы в WordPress с использованием AJAX

Почему стоит реализовать выбор темы через AJAX

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

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

Основные задачи реализации выбора темы через AJAX

1. Сохранение выбора пользователя

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

2. Переключение темы при загрузке страницы

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

3. Обработка AJAX-запроса переключения темы

AJAX-запрос будет обрабатывать смену темы без перезагрузки страницы, обновляя выбор.

Пример реализации: переключение между двумя темами

Допустим, у нас есть две темы: theme1 и theme2. Мы сделаем простой переключатель с кнопками.

Шаг 1. Подключаем обработчик фильтра template и stylesheet

В файле functions.php вашей основной темы или в отдельном плагине добавьте следующий код:

function wplesson_filter_template($template) {
    if ( isset($_COOKIE['wplesson_selected_theme']) ) {
        $theme = sanitize_text_field($_COOKIE['wplesson_selected_theme']);
        if (in_array($theme, ['theme1', 'theme2'])) {
            return $theme;
        }
    }
    return $template;
}
add_filter('template', 'wplesson_filter_template');
add_filter('stylesheet', 'wplesson_filter_template');

Этот код проверяет cookie wplesson_selected_theme и подставляет нужную тему для шаблона и стилей.

Шаг 2. Добавляем AJAX-обработчик для смены темы

Регистрируем AJAX-экшн в functions.php:

add_action('wp_ajax_wplesson_switch_theme', 'wplesson_switch_theme_callback');
add_action('wp_ajax_nopriv_wplesson_switch_theme', 'wplesson_switch_theme_callback');

function wplesson_switch_theme_callback() {
    if ( ! isset($_POST['theme']) ) {
        wp_send_json_error('No theme specified');
    }
    $theme = sanitize_text_field($_POST['theme']);
    if ( ! in_array($theme, ['theme1', 'theme2']) ) {
        wp_send_json_error('Invalid theme');
    }
    setcookie('wplesson_selected_theme', $theme, time() + 3600 * 24 * 30, COOKIEPATH, COOKIE_DOMAIN);
    wp_send_json_success('Theme switched');
}

Шаг 3. Создаём JavaScript для отправки AJAX-запроса

Подключите скрипт на фронтенде (например, в footer.php или через enqueue):

document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.wplesson-theme-switcher');
    buttons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var theme = this.dataset.theme;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '<?php echo admin_url('admin-ajax.php'); ?>');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    location.reload();
                } else {
                    alert('Ошибка переключения темы');
                }
            };
            xhr.send('action=wplesson_switch_theme&theme=' + encodeURIComponent(theme));
        });
    });
});

Или более компактно через jQuery:

jQuery(document).ready(function($) {
    $('.wplesson-theme-switcher').click(function() {
        var theme = $(this).data('theme');
        $.post('<?php echo admin_url('admin-ajax.php'); ?>', {
            action: 'wplesson_switch_theme',
            theme: theme
        }, function(response) {
            if(response.success) {
                location.reload();
            } else {
                alert('Ошибка переключения темы');
            }
        });
    });
});

Шаг 4. Добавляем кнопки переключения в шаблон

В любом месте темы выведите кнопки:

<button class="wplesson-theme-switcher" data-theme="theme1">Тема 1</button>
<button class="wplesson-theme-switcher" data-theme="theme2">Тема 2</button>

Продвинутые моменты и советы

Как определить доступные темы динамически

Вместо жесткого списка тем лучше получать их программно:

$themes = wp_get_themes();
$available = [];
foreach($themes as $slug => $theme) {
    // Например, фильтр по автору или названию
    if (in_array($slug, ['theme1', 'theme2'])) {
        $available[] = $slug;
    }
}

И использовать список $available для проверки в AJAX-обработчике.

Сохранение выбора для авторизованных пользователей

Если хотите, чтобы выбор сохранялся в профиле, замените cookie на user meta:

function wplesson_switch_theme_callback() {
    if ( ! isset($_POST['theme']) ) {
        wp_send_json_error('No theme specified');
    }
    $theme = sanitize_text_field($_POST['theme']);
    if ( ! in_array($theme, ['theme1', 'theme2']) ) {
        wp_send_json_error('Invalid theme');
    }
    if(is_user_logged_in()) {
        update_user_meta(get_current_user_id(), 'wplesson_selected_theme', $theme);
    } else {
        setcookie('wplesson_selected_theme', $theme, time() + 3600 * 24 * 30, COOKIEPATH, COOKIE_DOMAIN);
    }
    wp_send_json_success('Theme switched');
}

function wplesson_filter_template($template) {
    if ( is_user_logged_in() ) {
        $theme = get_user_meta(get_current_user_id(), 'wplesson_selected_theme', true);
    } else {
        $theme = isset($_COOKIE['wplesson_selected_theme']) ? sanitize_text_field($_COOKIE['wplesson_selected_theme']) : '';
    }
    if (in_array($theme, ['theme1', 'theme2'])) {
        return $theme;
    }
    return $template;
}
add_filter('template', 'wplesson_filter_template');
add_filter('stylesheet', 'wplesson_filter_template');

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

Переключение темы через cookie или user meta может конфликтовать с кэшированием на уровне сервера или CDN. Продумайте исключения для страниц, где нужна смена темы, либо используйте JavaScript для динамического применения стилей без полной смены темы.

Использование плагинов для упрощения задачи

Существует ряд плагинов для WordPress, которые позволяют переключать темы для пользователей или создавать кастомные темы для разных групп. Например, плагин Clearfy Pro имеет инструменты для управления производительностью и кастомизацией, которые могут помочь при реализации сложных сценариев смены оформления.

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

Итог

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