Elementor теряет стили после кеширования: причина и решение

Сайт на Elementor время от времени открывается без стилей, и очистка кеша помогает только до следующего раза. Причина — в связке новой системы CSS-файлов Elementor и кеша страниц, а лечится это одним сниппетом.

Что случилось

Недавно я запустил большой сайт клиники на WordPress и Elementor Pro. Всё работало, но периодически страницы «разъезжались»: блоки вставали столбиком, шрифты сбрасывались на стандартные, сетки ломались. Очищаю кеш — всё восстанавливается. Через пару дней снова.

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

Если вы узнаёте эту картину — ниже всё, что нужно: как подтвердить диагноз, почему это происходит и как исправить.

Как подтвердить диагноз

Главный признак: сама страница отдаётся из кеша со статусом 200, а CSS-файлы Elementor возвращают 404. Проверка занимает пару минут.

1. Откройте сломанную страницу в режиме инкогнито. Администратору плагины кеширования обычно показывают свежую версию, поэтому в админке всё выглядит нормально.
2. Откройте DevTools (F12) → вкладка Network → обновите страницу.
3. Отсортируйте список по колонке Status. Ищите красные строки с 404 и типом stylesheet.

У меня это выглядело так:

local-964-frontend-desktop.css?ver=d0e37d9793ee    404  stylesheet
local-964-frontend-tablet.css?ver=d0e37d9793ee     404  stylesheet
local-964-frontend-mobile.css?ver=d0e37d9793ee     404  stylesheet
global-964-frontend-desktop.css?ver=edbc1ff5cccd   404  stylesheet
...
company/                                            200  document

Чтобы понять, откуда эти файлы, откройте исходный код страницы (Ctrl+U) и найдите local-. Полный путь покажет источник:

<link rel='stylesheet' id='local-3117-frontend-desktop-css'
  href='https://example.ru/wp-content/uploads/elementor/css/local-3117-frontend-desktop.css?ver=56d0db4bd617'
  media='all' />

Папка /wp-content/uploads/elementor/css/ — значит, файлы генерирует сам Elementor. Если зайти в эту папку через файловый менеджер хостинга в момент поломки, нужных файлов там просто нет.

Причина: CSS-файлы удалены, а кеш об этом не знает

В свежих версиях Elementor складывает стили в отдельные файлы по устройствам. В папке uploads/elementor/css/ их три вида:

Файл	Что в нём
base-desktop.css, base-mobile.css	базовые стили
global-{ID}-frontend-{устройство}.css	глобальные стили сайта, ID — набор глобальных настроек (kit)
local-{ID}-frontend-{устройство}.css	стили конкретного документа: страницы, шапки, подвала, попапа

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

Дальше происходит вот что:

1. Вы сохраняете шапку в Elementor, меняете глобальные стили или обновляете плагин.
2. Elementor очищает свои CSS-файлы.
3. Новые файлы он создаёт лениво — только когда страница собирается через PHP.
4. Плагин кеширования отдаёт посетителям готовый HTML, PHP не запускается, и файлы не появляются.
5. Закешированный HTML ссылается на файлы, которых нет. Страница без стилей — пока кто-то не сбросит кеш.

Отсюда и «плавающий» характер поломки. Ломаются страницы, чей кеш создан до последней очистки CSS. А поскольку шапка есть на всех страницах, одна правка в ней ломает практически весь сайт.

Когда Elementor очищает CSS-файлы

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

Событие	Что очищается
Сохранение страницы, шапки, подвала, попапа	CSS этого документа; шапка и подвал есть на всех страницах
Изменение настроек сайта: глобальные цвета, шрифты, стили кнопок	все файлы
Инструменты → «Пересоздать файлы и данные» или «Заменить URL»	все файлы
Смена настроек производительности, контрольных точек адаптива, экспериментальных функций	все файлы
Импорт шаблонов или набора сайта (kit)	все файлы
Обновление Elementor или Elementor Pro, в том числе автоматическое	все файлы
Другие плагины: аддоны, миграция, поиск и замена в базе	часто все файлы

Если сайт «сам» ломается ночью, когда никто ничего не правил, первый подозреваемый — автообновление Elementor. Проверьте колонку автообновлений на странице «Плагины».

Почему не помогает встраивание CSS в код

Первый совет, который встречается повсюду: Elementor → Настройки → Производительность → «Метод генерации CSS» → «Встраивание в код». Тогда стили пишутся прямо в HTML, и закешированная страница не зависит от файлов.

WP Fastest Cache даже не даёт включить кеширование, пока в Elementor выбран внешний файл: пишет, что его нужно выключить. Разработчики плагина знают о конфликте и закрывают его таким способом.

Но эта настройка управляет только классическими файлами вида post-{ID}.css. Файлы base-*, global-* и local-* подключаются внешними ссылками в любом случае. Поэтому у меня стили ломались при включённом встраивании — и это запутало больше всего.

Есть и вторая причина. В настройках WP Fastest Cache есть пункт «Очистить файлы кэша при обновлении записи». Он чистит кеш только отредактированной записи. Шаблон шапки — это тоже запись, но сама по себе она не кешируется. Итог: шапка изменилась, CSS удалён, а кеш всех страниц, где она выводится, остался старым.

Здесь нет «бага Elementor» в чистом виде. Elementor не знает, какой кеш стоит на сайте, и только сообщает событием «я очистил файлы». Реагировать на него — задача плагина кеширования. Так и сделаем.

Решение: сбрасывать кеш вслед за Elementor

Идея простая: как только Elementor очищает свои CSS-файлы или сохраняет любой документ, полностью сбрасываем кеш страниц. Следующий посетитель или предзагрузка кеша соберут страницу через PHP, и Elementor создаст нужные файлы.

Для этого у Elementor есть два хука:

• elementor/core/files/clear_cache — Elementor очистил свои файлы (обновление плагина, кнопка «Пересоздать файлы и данные», смена глобальных стилей). Именно на него опирается встроенная совместимость WP Rocket с Elementor.
• elementor/editor/after_save — в редакторе сохранён документ: страница, шаблон шапки или подвала, попап.

Вариант для WP Fastest Cache

/**
 * Синхронизация кеша WP Fastest Cache с CSS-файлами Elementor.
 *
 * Проблема: при сохранении шаблонов, смене глобальных стилей или обновлении
 * Elementor удаляет файлы из uploads/elementor/css/ и создаёт их заново лишь при
 * сборке страницы через PHP. Закешированные страницы ссылаются на удалённые
 * файлы → 404 → вёрстка без стилей.
 *
 * Решение: полностью сбрасывать кеш страниц, когда Elementor очищает
 * свои файлы или сохраняет любой документ. После сброса страницы
 * собираются заново вместе с актуальными CSS-файлами.
 */

// Полный сброс кеша WP Fastest Cache
function my_clear_wpfc_cache() {
	// Хук самого WP Fastest Cache для очистки всего кеша.
	// Если плагин отключён, do_action просто ничего не сделает.
	do_action( 'wpfc_clear_all_cache' );
}

// Elementor очистил свои CSS-файлы
add_action( 'elementor/core/files/clear_cache', 'my_clear_wpfc_cache' );

// В редакторе Elementor сохранён любой документ (включая шапку и подвал)
add_action( 'elementor/editor/after_save', 'my_clear_wpfc_cache' );

Универсальный вариант для разных плагинов кеша

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

/**
 * Универсальный сброс кеша страниц при изменениях в Elementor.
 *
 * Работает с популярными плагинами кеширования: для каждого сначала
 * проверяется, есть ли его функция очистки, чтобы не было фатальной
 * ошибки на сайтах, где этого плагина нет.
 */
function my_clear_page_cache_after_elementor() {

	// WP Fastest Cache
	do_action( 'wpfc_clear_all_cache' );

	// WP Rocket: очистка кеша всего домена
	if ( function_exists( 'rocket_clean_domain' ) ) {
		rocket_clean_domain();
	}

	// LiteSpeed Cache: сброс всего кеша
	do_action( 'litespeed_purge_all' );

	// W3 Total Cache
	if ( function_exists( 'w3tc_flush_all' ) ) {
		w3tc_flush_all();
	}

	// WP Super Cache
	if ( function_exists( 'wp_cache_clear_cache' ) ) {
		wp_cache_clear_cache();
	}
}

// Elementor очистил свои CSS-файлы
add_action( 'elementor/core/files/clear_cache', 'my_clear_page_cache_after_elementor' );

// В редакторе Elementor сохранён любой документ
add_action( 'elementor/editor/after_save', 'my_clear_page_cache_after_elementor' );

Куда вставить код

• В плагин для сниппетов: ProFunctions, Code Snippets или аналог. Самый простой вариант.
• В functions.php дочерней темы. Не в родительскую — код пропадёт при обновлении темы.
• В mu-plugin: файл в папке wp-content/mu-plugins/. Такой код нельзя случайно отключить из админки.

Для mu-plugin создайте файл, например elementor-cache-sync.php, и добавьте в начало заголовок:

<?php
/**
 * Plugin Name: Elementor Cache Sync
 * Description: Сбрасывает кеш страниц, когда Elementor пересоздаёт свои CSS-файлы.
 */

// Запрет прямого доступа к файлу
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Дальше — код из любого варианта выше

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

Дополнительная страховка

Сниппет закрывает основной сценарий. Но файлы могут пропасть и по другим причинам, поэтому стоит добавить ещё четыре вещи.

Ежедневный сброс кеша. В WP Fastest Cache это правила тайм-аута (Timeout Rules): правило для всех страниц, раз в сутки, лучше ночью. Даже если что-то проскочит мимо сниппета, сайт будет сломан максимум до утра, а не бесконечно.

Двойной кеш. Проверьте, что страницы кеширует только один слой. Частые кандидаты на дубль:

• плагины оптимизации с собственным кешем страниц;
• серверный кеш хостинга (nginx);
• Cloudflare или другой CDN с кешированием HTML.

Сниппет чистит только плагин. Если выше стоит ещё один кеш, старая страница с битыми ссылками продолжит отдаваться оттуда.

Смена плагина кеширования. У WP Rocket и LiteSpeed Cache есть встроенная интеграция с Elementor, они слушают тот же хук очистки файлов. Но и у них в истории были баги в этой связке, а новая система файлов local-* и global-* появилась недавно. После смены плагина проверку из следующего раздела всё равно нужно сделать. И лучше сначала на тестовой копии сайта.

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

Ручные обновления Elementor. Отключите автообновления для Elementor и Elementor Pro на странице «Плагины» и обновляйте их сами, в удобное время. Сразу после обновления прогоните проверку из следующего раздела. Так обновление не случится ночью без присмотра, а если что-то сломается, вы увидите это первыми, а не посетители.

Как проверить, что всё починено

Не ждите, пока сайт сломается сам. Воспроизведите поломку намеренно — это займёт пять минут.

1. Откройте 2–3 страницы сайта в инкогнито, чтобы они точно попали в кеш.
2. В админке откройте шаблон шапки в Elementor, внесите мелкую правку и сохраните.
3. Снова откройте эти страницы в инкогнито с открытой вкладкой Network.
4. Отсортируйте по Status: 404 на CSS быть не должно, вёрстка — на месте.

До исправления этот тест ломал мой сайт стабильно. После сниппета — ни разу.

Повторите такую проверку после ближайших обновлений Elementor и плагина кеширования. Именно в обновлениях чаще всего меняется логика файлов и хуков.

Итог и чек-лист

Если Elementor «теряет» стили на сайте с кешем, скорее всего, закешированные страницы ссылаются на удалённые CSS-файлы. Лечится это синхронизацией: Elementor очистил файлы — кеш страниц сброшен.

• Проверить в DevTools, что при поломке CSS из uploads/elementor/css/ отдаёт 404
• Добавить сниппет сброса кеша по хукам elementor/core/files/clear_cache и elementor/editor/after_save
• Настроить ежедневный сброс кеша как страховку
• Убедиться, что страницы кеширует только один слой
• Прогнать тест с правкой шапки и повторять его после обновлений
• Отключить автообновления Elementor и обновлять его вручную с проверкой

Мне эта история стоила нескольких бессонных недель. Вам должна стоить пяти минут.