Сброс кэша стилей на стороне пользователя

Речь пойдёт о сайтах на WordPress.

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

Ниже я приведу два способа, как сделать так, чтобы после изменений пользователи видели новую версию стилей. Без неожиданностей.

Изменение версии style.css. Способ 1

Подсмотрел его тут. В обоих случаях суть в том, чтобы после того, как вы внесли изменения, в head вашего сайта изменилась ссылка на файл стилей. Тогда сервер отдаст пользователю последнюю версию файла style.css и всё будет выглядеть как должно.

Откройте файл header.php и найдите в нём строку с подключением файла стилей. Выглядит примерно так:

<link rel="stylesheet" href="https://yourdomain.ru/wp-content/themes/название_темы/style.css" type="text/css" media="screen" />

Добавьте версию файла стилей по аналогии:

<link rel="stylesheet" href="https://yourdomain.ru/wp-content/themes/название_темы/style.css?12345678" type="text/css" media="screen, projection" />

?12345678 — это произвольное число, обозначающее версию файла стилей. В следующий раз, когда внесёте какие-то изменения в style.css просто измените это число и сбросьте кэш на сайте (например, если используете плагин WP Super Cache, в настройках нажмите «Удалить весь кэш»)

Изменение версии style.css. Способ 2

В поисках решения по сбросу кэша на стороне пользователя, мне попался топик на Stackoverflow со сниппетом для functions.php. Я вообще не большой любитель вносить лишние изменения в функции и добавлять что-то малоиспользуемое, поэтому при просмотре файлов дочерней темы и исходного кода страницы обратил внимание на наличие версии в style.css дочерней темы (я использую тему Flatsome).

Выглядит это так:

/*
Theme Name: tiil
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

Соответственно, в исходном коде выводится та же версия:

<link rel='stylesheet' id='flatsome-style-css' href='https://tiil.ru/wp-content/themes/tiil/style.css?ver=3.0' type='text/css' media='all'/>

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

Этот способ для меня оказался намного проще, он не требует добавления каких-то лишних сниппетов в functions.php или изменений в header.php. Посмотрите, есть ли строка version в style.css вашей темы и выводится ли номер этой версии в исходном коде. Если да, то всё упрощается. Если же нет, то пробуйте способ №1 или сниппет из топика на Stackoverflow.