Достаточно часто приходится вносить изменения в дизайн сайта. Если не обновить файлы стилей в кэше браузера, можно столкнуться с проблемой некорректного отображения сайта. Если администратор сайта легко решит проблему нажатием славишь Alt+F5. То как быть с другими посетителями сайта, которые понятия не имеют, что сегодня администратор неожиданно решил обновить дизайн.
Причина данной проблемы связана с заголовком Cache-Control, который веб-сервер передает вашему браузеру во время загрузки файла:
Cache-Control: max-age=86400
Директива указывает браузеру хранить копию файлов в кэше в течение суток. Таким образом, до завтрашнего дня посетитель будет любоваться съехавшей версткой. Вы можете уменьшить значение директивы max-age, хотя сути проблемы это не решает.
Полный отказ от кэширования:
Cache-Control: no-cache
Может показаться, что это полностью решает проблему. Но этот вариант имеет существенный достаток: мы увеличим нагрузку на сервер и время загрузки сайта.
Во время передачи веб-сервер может автоматически посылать заголовок Last-Modified. Но это не дает гарантии, что браузер заинтересуется этим файлом.
Единственным правильным выходом из данной ситуации будет указывать версию для CSS и JS файлов:
<link rel="stylesheet" href="https://codebeer.ru/style.css?ver=4.4" type="text/css" />
Но согласитесь, менять версию файла при каждом изменении не совсем удобно. Для WordPress я предлагаю использовать специальную функцию, которая будет автоматически добавлять в параметр ver CRC32 хеш-код файла:
function wpdocs_dequeue_script() {
wp_register_script('jquery', get_template_directory_uri() . '/jquery.min.js', false, hash_file('crc32', get_stylesheet_directory() . '/style.css'), true);
wp_enqueue_script('jquery');
}
Функция, которая задает версию по умолчанию для всех подключаемых файлов:
function my_wp_default_styles($styles) {
$styles->default_version = hash_file('crc32', get_stylesheet_directory() . '/style.css');
}
add_action("wp_default_styles", "my_wp_default_styles");
Как вариант, вместо хэша можно использовать дату изменения файла:
function my_wp_default_styles($styles) {
$styles->default_version = filemtime(get_stylesheet_directory() . '/style.css' );
}
add_action("wp_default_styles", "my_wp_default_styles");