Принуждаем браузеры загружать свежие версии CSS и JS в WordPress

Современные браузеры кешируют большинство внешних аспектов сайта, они кешируют все изображения и даже таблицы стилей и файлы javascript вашего сайта. Во время редизайна сайта, когда вы будете изменять файлы HTML и CSS, и при тестировании этих изменений некоторые пользователи могу зайти на ваш сайт и просматривать страницу со старыми таблицами стилей, что, вероятно, приведет к тому, что дизайн отобразится «криво».

Просмотр новой страницы со старыми таблицами стилей непременно будет отображен некорректно.

Существуют несколько способов, которыми разработчики могут воспользоваться для того, чтобы браузеры подгружали самую свежую версию таблиц стилей и javascript, что реализуется помещением строки запроса в конец ссылки на таблицу стилей.

http://example.com/stylesheet.css?v=1

Теперь же, когда вы проделаете изменения, то нужно будет всего лишь изменить версию вашей таблицы стилей на 2.

http://example.com/stylesheet.css?v=2

Это сработает для браузера, и тот будет подгружать последнюю версию, так как увидит для себя «новую» ссылку. Однако разработчику придется каждый раз запоминать это значение при внесении изменений в CSS, и значение легко можно забыть.

Существует еще один способ — использование функции time(), которая будет добавлять текущее время в конец ссылки на таблицу стилей.

http://example.com/stylesheet.css?v=<?php echo time(); ?>

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

Что же нужно сделать в таком случае? Нужно добавлять время последнего изменения в таблицу стилей, поместив его в ссылку на CSS файл с помощью функции filemtime().

<link rel="stylesheet" type="text/css" href="http://example.com/stylesheet.css?v=<?php echo filemtime($pathToCSS); ?>" />

Применяем технологию к WordPress

Для подключения таблицы стилей в WordPress вам нужно использовать функцию wp_enqueue_style(). Функция понимает определенный набор параметров. Четвертым параметром можно указать номер версии, который и будет добавлен к ссылке на ваш файл таблицы стилей.

add_action( 'wp_enqueue_scripts', 'add_styles' );

function add_styles()
{
     $css_file = get_stylesheet_directory() . '/css/style.css';
     wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/css/style.css', NULL, filemtime($css_file) );
}

По всем вопросам и отзывам просьба писать в комментарии ниже.

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