Blocksy сбрасывает тёмную тему при переходе между страницами: решение для FlyingPress

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

В нашем случае на проекте использовались:

• WordPress свежей версии;
• тема Blocksy Pro;
• встроенное расширение темы Color Mode Switch;
• плагин FlyingPress для кэширования страниц и оптимизации ассетов.

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

Как проявлялась проблема

В настройках Blocksy по умолчанию был задан светлый режим (Light Mode). Поведение обычного пользователя выглядело следующим образом:

1. Пользователь открывает сайт и видит стандартную светлую тему.
2. Нажимает на переключатель (иконку луны/солнца) в шапке — текущая страница корректно окрашивается в тёмные тона.
3. Переходит по ссылке на соседнюю статью или в каталог.
4. Следующая страница снова открывается светлой!

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

Что использует Blocksy для хранения выбранного режима

Согласно документации разработчиков CreativeThemes, расширение Color Mode Switch сохраняет выбранный посетителем режим в браузерную cookie с именем:

blocksy_current_theme=dark
// или:
blocksy_current_theme=light

Проверка через инструменты разработчика показала, что cookie записывается мгновенно и без ошибок. Следовательно, Blocksy не «забывал» выбор — конфликт происходил в момент запроса следующего документа у веб-сервера.

Почему мешает кеш FlyingPress

Классическое кэширование страниц (Page Caching) работает прямолинейно:

• Без кэша: Запрос гостя → WordPress запускает PHP → чтение базы данных → Blocksy собирает HTML с учётом cookie → отдача в браузер.
• С кэшем FlyingPress: Сервер сразу возвращает предварительно сгенерированный HTML-файл из дискового кэша.

Если страница была закеширована генератором FlyingPress в светлом режиме (по умолчанию), гость с кукой blocksy_current_theme=dark всё равно получает статичный HTML со светлой темой (<html data-color-mode="light">). Возникает противоречие: кука требует Dark, а HTML принудительно диктует Light.

Решение «в лоб», от которого стоит отказаться

Первая мысль — добавить cookie blocksy_current_theme в список исключений кэша FlyingPress (Bypass Cache for Cookies). Это заставит сервер отдавать динамический ответ каждому, кто хоть раз кликнул на переключатель.

Почему это плохой компромисс: Как только посетитель переключает тему, сайт перестаёт отдаваться из супербыстрого кэша. Время ответа TTFB возрастает с 50–100 мс до 600–1200 мс, сервер получает лишнюю нагрузку, а преимущество кэширующего плагина полностью теряется.

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

Тёмная тема меняет только стили оформления (CSS-переменные), сам текст и структура контента остаются неизменными. Поэтому нет никакого смысла генерировать две разные версии HTML для светлого и тёмного режима.

Оптимальная архитектура выглядит так:

1. FlyingPress отдаёт единую быструю страницу из кэша.
2. Крошечный инлайн-скрипт в самом верху <head> считывает cookie blocksy_current_theme.
3. Если обнаружен режим dark, скрипт мгновенно выставляет атрибут data-color-mode="dark" на тег <html> ещё до отрисовки контента браузером.
4. Посетитель видит тёмную тему без эффекта «белой вспышки» (FOUC), а страница открывается на максимальной скорости из кэша!

Готовый PHP-сниппет для сайта

Добавьте следующий сниппет через WPCodeBox, Code Snippets или в файл functions.php вашей дочерней темы:

add_action('wp_head', function () {
    ?>
    <script id="blocksy-dark-mode-cache-fix">
    (function () {
        try {
            var match = document.cookie.match(
                /(?:^|;\s*)blocksy_current_theme=([^;]*)/
            );

            if (!match) {
                return;
            }

            var mode = decodeURIComponent(match[1]);

            if (mode === 'dark' || mode === 'light') {
                document.documentElement.setAttribute('data-color-mode', mode);
            }
        } catch (e) {}
    })();
    </script>
    <?php
}, 0);

Что здесь важно:

• Приоритет 0: хук выполняется в самом начале тега <head>, предотвращая мерцание белого экрана при загрузке.
• Идентификатор id="blocksy-dark-mode-cache-fix": если в FlyingPress активна опция Delay JavaScript, обязательно добавьте ID blocksy-dark-mode-cache-fix в исключения задержки, чтобы скрипт отрабатывал синхронно.

Настройка FlyingPress и тестирование

1. Убедитесь, что в FlyingPress в поле Bypass Cache for Cookies нет cookie blocksy_current_theme.
2. Выполните полную очистку кэша: Purge & Preload Cache.
3. Откройте сайт в режиме инкогнито и проверьте переходы между разделами:
   • Главная страница → переключение в Dark Mode;
   • Переход в блог, категорию или карточку товара;
   • Обновление страницы (F5) и закрытие/открытие вкладки.

Связанные проблемы кэширования в WordPress

Конфликт Dark Mode — не единственный случай, когда статический page cache мешает персональному состоянию пользователя. Очень похожий сценарий возникает и с избранным (Wishlist) в Blocksy, когда браузер из-за серверных заголовков кэша упорно возвращает удалённые товары назад.

👉 Подробный разбор этой механики и её решения читайте в нашей статье: Почему Last-Modified в Clearfy Pro ломает избранное и корзину WordPress: правильная настройка.

Заключение

Не спешите отключать кэширование страниц или обвинять тему в недоработках. Грамотное разделение обязанностей — сервер отдаёт сверхбыстрый статический HTML, а браузер применяет визуальное состояние пользователя через микро-скрипт — позволяет сохранить и идеальную скорость 100/100 по Google PageSpeed, и безупречный пользовательский опыт.