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

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

Почему стоит добавить выбор темы на сайт WordPress

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

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

Обзор популярных плагинов для выбора темы

1. WP Dark Mode

Плагин WP Dark Mode позволяет добавить на сайт переключатель светлой и тёмной темы без сложных настроек. Он автоматически подхватывает стили вашей текущей темы и может работать через виджет или шорткод.

Плюсы:

• Простота установки
• Автоматическая подстройка под тему
• Поддержка Gutenberg и Elementor

Минусы:

• Ограниченная кастомизация стилей

2. Theme Switcha

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

Плюсы:

• Поддержка нескольких тем
• Простая настройка

Минусы:

• Не всегда корректно работает с кастомными темами

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

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

Шаг 1: Добавляем стили тем в вашу тему

В файле стилей темы (style.css) добавим две цветовые схемы:

/* Базовые стили */
.wpdetect-theme-light {
  background-color: #ffffff;
  color: #000000;
  padding: 20px;
  border-radius: 5px;
}

.wpdetect-theme-dark {
  background-color: #222222;
  color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}

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

Шаг 2: Создаём HTML-разметку блока с переключателем

Добавим в нужное место страницы следующий код:

<div id="wpdetect-theme-block" class="wpdetect-theme-light">
  <h2>Выберите тему оформления блока</h2>
  <select id="wpdetect-theme-selector">
    <option value="wpdetect-theme-light" selected>Светлая</option>
    <option value="wpdetect-theme-dark">Тёмная</option>
  </select>
  <p>Это адаптивный блок с выбором темы оформления.</p>
</div>

Шаг 3: Добавляем JavaScript для переключения тем

В footer.php или через enqueue_scripts подключаем скрипт:

document.addEventListener('DOMContentLoaded', function() {
  var selector = document.getElementById('wpdetect-theme-selector');
  var block = document.getElementById('wpdetect-theme-block');

  selector.addEventListener('change', function() {
    block.className = this.value;
  });
});

Этот скрипт слушает изменение селектора и меняет класс блока, тем самым переключая стили.

Расширение функционала: сохранение выбора пользователя

Чтобы выбор темы сохранялся при переходах между страницами, можно использовать localStorage. Добавим в наш скрипт следующий код:

document.addEventListener('DOMContentLoaded', function() {
  var selector = document.getElementById('wpdetect-theme-selector');
  var block = document.getElementById('wpdetect-theme-block');

  // Загрузка сохранённой темы
  var savedTheme = localStorage.getItem('wpdetectSelectedTheme');
  if (savedTheme) {
    block.className = savedTheme;
    selector.value = savedTheme;
  }

  selector.addEventListener('change', function() {
    block.className = this.value;
    localStorage.setItem('wpdetectSelectedTheme', this.value);
  });
});

Теперь выбранная тема будет сохраняться в браузере и применяться при повторных посещениях.

Как использовать это в виде плагина WPDetect

Если хотите оформить этот функционал в плагин, создайте файл wpdetect-theme-switcher.php с минимальным заголовком и добавьте код:

<?php
/*
Plugin Name: WPDetect Theme Switcher
Description: Добавляет адаптивный блок с выбором темы оформления.
Version: 1.0
Author: WPDetect
*/

function wpdetect_enqueue_scripts() {
  wp_enqueue_style('wpdetect-theme-switcher-style', plugin_dir_url(__FILE__) . 'style.css');
  wp_enqueue_script('wpdetect-theme-switcher-script', plugin_dir_url(__FILE__) . 'script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'wpdetect_enqueue_scripts');

function wpdetect_theme_switcher_shortcode() {
  return '<div id="wpdetect-theme-block" class="wpdetect-theme-light">
  <h2>Выберите тему оформления блока</h2>
  <select id="wpdetect-theme-selector">
    <option value="wpdetect-theme-light" selected>Светлая</option>
    <option value="wpdetect-theme-dark">Тёмная</option>
  </select>
  <p>Это адаптивный блок с выбором темы оформления.</p>
</div>';
}
add_shortcode('wpdetect_theme_switcher', 'wpdetect_theme_switcher_shortcode');

Так вы сможете вставлять блок через шорткод [wpdetect_theme_switcher] в любом месте сайта.

Заключение

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