CSS не обновляется в браузере при внесении изменений

Я знаю, что этот пост старше года, но хотел бы упомянуть, что CloudFlare кэширует статические файлы, такие как CSS, JS и изображения, чтобы ускорить загрузку страниц. Это то, что мне потребовалось несколько часов, чтобы понять, поскольку я столкнулся с проблемой, когда изменения в CSS не отображались при перезагрузке. У CloudFlare есть режим разработки, который можно включить на 3 часа. Если вы забыли включить его до начала внесения изменений, то можно очистить кэш через панель управления CloudFlare.

У меня тоже была эта проблема, и я пробовал самое популярное решение, но оно не сработало. Можно сделать простой трюк, как сделал я.

Переопределите CSS, который вы хотите изменить, в разделе Темы > Настроить > Пользовательский CSS в админ-панели.

В итоге CSS обновится. После этого вы можете снова удалить его.

Пожалуйста, измените версию в начале файла style.css (расположение ..wp-content\themes\theme_name\style.css) на более новую.

/*
Theme Name: SF TEST
Version: 1.0.1
*/

Например, измените с 1.0 на 1.1 или 1.0.1.

Также измените версию в файле function.php для этого CSS-файла

wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0', 'all');

Здесь измените '1.0' на более новую версию, например '1.1'

Возможно, ваш хостинг-провайдер использует что-то вроде Varnish для кеширования вывода вашего сайта. Я столкнулся с этим на сайте клиента, размещенном на дешевом shared-хостинге. Единственное решение, которое я нашел – просто набраться терпения.

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

Хочу обратить ваше внимание — обязательно учитывайте наличие установленных плагинов кеширования. Например, WP Fastest Cache может вызывать эту проблему, если вы не зайдёте в админку WordPress и не нажмёте "Очистить кеш → Удалить кеш и минифицированные CSS/JS" в верхнем меню.

Возможно, это уже устарело. Но я хочу помочь тем, кто ищет решение. У меня была такая же проблема, и я проверил свои плагины. Там был плагин "w3 total cache", который ускоряет загрузку. Это плагин кэширования на стороне сервера, поэтому я отключил его. Теперь изменения в CSS видны в реальном времени.

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

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

wp_enqueue_style('mypluginstyle',  plugins_url('/assets/mystyle.css', __FILE__), array(), rand(111,9999) );

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

При добавлении в очередь (enqueue) используйте PHP-функцию time(), чтобы получить текущее время и использовать его в качестве версии. Ваш вызов будет выглядеть примерно так:

wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/style.css', array(), time() );

А если вы загружаете таблицу стилей через HTML, ваш код будет выглядеть так:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri ?>/style.css?ver=<?php echo time() ?>">

Не уверен, почему никто не опубликовал это решение. Вы получаете Unix-временную метку времени изменения файла - поэтому, если вы не вносили изменений, браузер / CDN-кэш может быть сохранен.

wp_enqueue_style(
    'style_name', // Название таблицы стилей.
    get_stylesheet_directory_uri() . '/style.css', // Полный URL таблицы стилей.
    array(), // Зависимости.
    filemtime( get_stylesheet_directory() . '/style.css' ) // Номер версии.
);

Важное отличие здесь в том, что вы вызываете URI для источника - но расположение папки для времени изменения файла.

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

Предварительная загрузка страниц для ускоренного просмотра и поиска Использует cookies для запоминания ваших предпочтений, даже если вы не посещаете эти страницы