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

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

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

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

• Упрощает управление дизайном сайта без доступа к админке
• Позволяет создавать мультисайты с разными дизайнами на одном движке
• Улучшают пользовательский опыт за счет мгновенной смены стиля

Реализовать это можно через создание кастомной страницы настроек в админке, где будет переключатель тем, и применение хука template и stylesheet, чтобы WordPress подгружал выбранную тему.

Создаем страницу настроек с переключателем тем

Для начала зарегистрируем страницу настроек в меню и добавим поле переключателя. Для примера возьмем две темы: twentytwentyone и twentytwentytwo.

function wpdevelop_register_theme_switcher_page() {
    add_menu_page(
        'Переключатель темы',
        'Тема сайта',
        'manage_options',
        'wpdevelop-theme-switcher',
        'wpdevelop_render_theme_switcher_page'
    );
}
add_action('admin_menu', 'wpdevelop_register_theme_switcher_page');

function wpdevelop_render_theme_switcher_page() {
    if (!current_user_can('manage_options')) {
        return;
    }
    if (isset($_POST['wpdevelop_theme'])) {
        check_admin_referer('wpdevelop_theme_switcher_nonce');
        $theme = sanitize_text_field($_POST['wpdevelop_theme']);
        update_option('wpdevelop_active_theme', $theme);
        echo '<div class="updated"><p>Тема сменена на '.esc_html($theme).'</p></div>';
    }
    $active_theme = get_option('wpdevelop_active_theme', wp_get_theme()->get_stylesheet());
    ?>
    <div class="wrap">
        <h1>Переключатель темы</h1>
        <form method="post">
            <?php wp_nonce_field('wpdevelop_theme_switcher_nonce'); ?>
            <label for="wpdevelop_theme">Выберите тему:</label>
            <select name="wpdevelop_theme" id="wpdevelop_theme">
                <option value="twentytwentyone" <?php selected($active_theme, 'twentytwentyone'); ?>>Twenty Twenty-One</option>
                <option value="twentytwentytwo" <?php selected($active_theme, 'twentytwentytwo'); ?>>Twenty Twenty-Two</option>
            </select>
            <input type="submit" value="Сохранить" class="button button-primary" />
        </form>
    </div>
    <?php
}

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

Применяем выбранную тему через хуки template и stylesheet

Теперь нужно, чтобы WordPress использовал выбранную тему при загрузке сайта. Для этого применим фильтры template и stylesheet, возвращая выбранное значение.

function wpdevelop_set_active_theme_template($template) {
    $active_theme = get_option('wpdevelop_active_theme');
    if ($active_theme) {
        // Проверяем, что такая тема установлена
        $theme = wp_get_theme($active_theme);
        if ($theme->exists()) {
            return $active_theme;
        }
    }
    return $template;
}

add_filter('template', 'wpdevelop_set_active_theme_template');
add_filter('stylesheet', 'wpdevelop_set_active_theme_template');

Так мы динамически подменяем тему WordPress на ту, что указана в настройках.

Улучшения и безопасность

Важно убедиться, что выбранная тема действительно существует, чтобы не сломать сайт. В нашем примере это сделано через $theme->exists(). Также используйте проверки прав доступа и nonce, как в примере выше.

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

function wpdevelop_get_available_themes() {
    $themes = wp_get_themes();
    $result = [];
    foreach ($themes as $slug => $theme) {
        $result[$slug] = $theme->get('Name');
    }
    return $result;
}

И использовать результат для генерации <select> динамически.

Пример использования с плагином Clearfy Pro

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

Заключение

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