Знакома ли вам ситуация, когда вы стилизовали какой-нибудь блок в файле style.css, зашли проверить изменения на сайте, а они не применяются? И в чем может быть проблема? Возможно, происходит кэширование версии файла style.css на вашем сайте. Мы расскажем вам, как бороться с этой проблемой!
Почему происходит кэширование файлов?
Происходит это из-за того, что браузеры сохраняют данные сайтов, которые посещают юзеры. Делается это для оптимизации загрузки этих же сайтов при повторном посещении.
Ниже мы рассмотрим способы, которые позволят принудительно обновить версию файла style.css, и при повторном посещении сайта пользователем она будет загружаться повторно.
Попробуем объяснить: вы или ваш посетитель заходите на сайт. Некоторое время спустя вы вносите изменения в файл стилей. Например, меняете цвет текста с черного на продающий красный. Затем вы или тот самый посетитель, который был на вашем сайте до обновления файла стилей, не увидите изменений, пока не сбросите кеш командой CTRL+F5…
Как обновить версию style.css?
Тут все зависит от того, на какой системе сделан ваш сайт и как происходит подключение файла стилей. Например, в некоторых CMS, а также на самописных сайтах подключение файла стилей осуществляется в таком виде:
<link rel="stylesheet" href="https://sajt-pod-klyuch.ru/wp-content/themes/minimal/css/style.css?ver=0.67">
Обратите внимание на «?ver=0.67». Это и есть версия файла стилей. Попробуйте добавить к подключению файла стилей версию. Она может быть абсолютно любой, это не так важно. Важно то, чтобы вы ее обновляли вручную каждый раз, когда вносите изменения на своем сайте.
Пример: я хочу поменять цвет кнопок. Я задаю новый фоновый цвет, после чего открываю код сайта, нахожу строчку с подключением файла стилей и меняю версию с 0.67 на 0.68. Теперь мои посетители, которые были на моем сайте до обновления стилей, увидят изменения без сброса кеша в браузере.
Как сделать автоматическое обновление версии файла style.css?
Способ актуален для CMS WordPress. Он позволяет не менять версию файлов вручную. Они будут обновляться автоматически после любого малейшего внесения изменений в файл.
Этот метод можно использовать не только по отношению к файлам стилей, но и скриптам. Просто вставьте в functions.php следующий код:
function custom_scripts() {
wp_enqueue_style('my-custom-css', get_stylesheet_directory_uri() . '/assets/css/style.css', false, filemtime( get_template_directory() . '/assets/css/style.css' ) );
wp_enqueue_script( 'my-custom-js', get_template_directory_uri() . '/custom.js', false, filemtime( get_template_directory() . '/custom.js' ) );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
После подключения этого скрипта, в инспекторе кода браузера мы увидим примерно следующую картину:
<link rel="stylesheet" id="my-custom-css-css" href=".../style.css?ver=1666280181" media="all">
Теперь после каждого обновления файла пользователи будут видеть все изменения на сайте.
У вас остались вопросы по этому материалу или разработке сайта в целом? Обязательно задавайте их в комментарии. А если вы хотите узнать еще больше о мире разработки и продвижении сайтов — подписывайтесь на нашу группу в вконтакте. Так вы точно не пропустите новых статей!
Понравилась статья? Хотите поддержать нашу команду и не пропустить новые материалы? Тогда подписывайтесь на нашу группу в ВКонтакте или на канал в Телеграм. Там мы не просто уведомляем подписчиков о выходе новых статей, но и делимся результатами различных экспериментов по SEO-продвижению.