Как принудительно обновить js и css-файлы в WordPress, закешированные в браузере пользователя

Опубликовано 04.08.201830.08.2024 автором Денис Янчевский

Сегодня разберёмся как принудительно обновить js и css-файлы в WordPress, закешированные в браузере пользователя.

Видеоверсия

При первом обращении к сайту браузер пользователя помещает полученные js и css файлы в кеш. При повторных посещениях закешированные файлы не запрашиваются с сервера.

Обновление закешированных файлов происходит с определённой периодичностью, заданной в настройках сервера. Этот интервал не связан с изменением самих файлов.

Соответственно, после изменений файлов на сервере, пользователи всё ещё будут видеть устаревшую версию файлов, пока не произойдет обновление, либо они вручную не очистят кеш браузера.

Чтобы исправить эту ситуацию, можно добавлять версию файла к его имени при каждом изменении. Например, так:

wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.1' );

1	wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.1' );

Каждый раз изменять версию файла вручную довольно хлопотно, лучше делать это автоматизированно. Для этого добавим обертки для стандартных функций подключения js и css файлов в WordPress в файл functions.php активной темы.

/**
 * Enqueues script with WordPress and adds version number that is a timestamp of the file modified date.
 * 
 * @param string      $handle    Name of the script. Should be unique.
 * @param string|bool $src       Path to the script from the theme directory of WordPress. Example: '/js/myscript.js'.
 * @param array       $deps      Optional. An array of registered script handles this script depends on. Default empty array.
 * @param bool        $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.
 *                               Default 'false'.
 */
function enqueue_versioned_script( $handle, $src = false, $deps = array(), $in_footer = false ) {
	wp_enqueue_script( $handle, get_stylesheet_directory_uri() . $src, $deps, filemtime( get_stylesheet_directory() . $src ), $in_footer );
}
 
/**
 * Enqueues stylesheet with WordPress and adds version number that is a timestamp of the file modified date.
 *
 * @param string      $handle Name of the stylesheet. Should be unique.
 * @param string|bool $src    Path to the stylesheet from the theme directory of WordPress. Example: '/css/mystyle.css'.
 * @param array       $deps   Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.
 * @param string      $media  Optional. The media for which this stylesheet has been defined.
 *                            Default 'all'. Accepts media types like 'all', 'print' and 'screen', or media queries like
 *                            '(orientation: portrait)' and '(max-width: 640px)'.
 */
function enqueue_versioned_style( $handle, $src = false, $deps = array(), $media = 'all' ) {
	wp_enqueue_style( $handle, get_stylesheet_directory_uri() . $src, $deps = array(), filemtime( get_stylesheet_directory() . $src ), $media );
}

/**

* Enqueues script with WordPress and adds version number that is a timestamp of the file modified date.

* @param string $handle Name of the script. Should be unique.

* @param string|bool $src Path to the script from the theme directory of WordPress. Example: '/js/myscript.js'.

* @param array $deps Optional. An array of registered script handles this script depends on. Default empty array.

* @param bool $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.

* Default 'false'.

function enqueue_versioned_script( $handle, $src = false, $deps = array(), $in_footer = false ) {

wp_enqueue_script( $handle, get_stylesheet_directory_uri() . $src, $deps, filemtime( get_stylesheet_directory() . $src ), $in_footer );

}

/**

* Enqueues stylesheet with WordPress and adds version number that is a timestamp of the file modified date.

* @param string $handle Name of the stylesheet. Should be unique.

* @param string|bool $src Path to the stylesheet from the theme directory of WordPress. Example: '/css/mystyle.css'.

* @param array $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.

* @param string $media Optional. The media for which this stylesheet has been defined.

* Default 'all'. Accepts media types like 'all', 'print' and 'screen', or media queries like

* '(orientation: portrait)' and '(max-width: 640px)'.

function enqueue_versioned_style( $handle, $src = false, $deps = array(), $media = 'all' ) {

wp_enqueue_style( $handle, get_stylesheet_directory_uri() . $src, $deps = array(), filemtime( get_stylesheet_directory() . $src ), $media );

}

Подключим необходимые файлы через новые функции.

function themename_scripts() {
	enqueue_versioned_style( 'themename', '/style.css' );
	enqueue_versioned_script( 'themename', '/js/scripts.js', array( 'jquery'), true );
}
 
add_action( 'wp_enqueue_scripts', 'themename_scripts' );

function themename_scripts() {

enqueue_versioned_style( 'themename', '/style.css' );

enqueue_versioned_script( 'themename', '/js/scripts.js', array( 'jquery'), true );

}

add_action( 'wp_enqueue_scripts', 'themename_scripts' );

В коде страницы это будет выглядит, примерно, так:

<link rel='stylesheet' id='themename-css' href='http://example.com/wp-content/themes/themename/style.css?ver=1429693860' type='text/css' media='all' />

<script type='text/javascript' src='http://example.com/wp-content/themes/themename/js/scripts.js?ver=1429694775'></script>

Теперь посетители будут сразу видеть изменения на сайте без необходимости очищать кеш браузера.

18 комментариев к записи «Как принудительно обновить js и css-файлы в WordPress, закешированные в браузере пользователя»

Александр:

27.09.2018 в 09:38

Спасибо, выручили!
Вставил код и изменения на сайте отобразились
Артём:

09.11.2018 в 19:42

Нужно весь код добавить в functions.php темы? Не получается, не работает.
1. Денис Янчевский:
  
  16.11.2018 в 07:57
  
  1. Что именно не получается и не работает?
  2. Как у Вас сейчас выглядит вставленный код?
Павел:

01.03.2019 в 17:20

Круто! Всё работает, очень выручили!!!

function attachment_cache_busting( $url ) {
    return add_query_arg( 'v', time(), $url );
}
add_filter( 'wp_get_attachment_url', 'attachment_cache_busting' );

function attachment_cache_busting( $url ) {

return add_query_arg( 'v', time(), $url );

}

add_filter( 'wp_get_attachment_url', 'attachment_cache_busting' );

Денис Янчевский:

21.04.2019 в 20:57

Спасибо за дополнение!
Но с функцией time() я бы посоветовал быть осторожнее, т.к. она меняет значение при каждом обращении и в определенных случаях это может вызвать дополнительную нагрузку на сервер и увеличение времени загрузки страницы.
Мне кажется, что использование функции filemtime() более предпочтительно в данной ситуации.

Правильно ли я понял, что нужно добавить все три части кода в functions.php темы, что бы получилось вот так?
У меня не сработало.

function enqueue_versioned_script( $handle, $src = false, $deps = array(), $in_footer = false ) {
	wp_enqueue_script( $handle, get_stylesheet_directory_uri() . $src, $deps, filemtime( get_stylesheet_directory() . $src ), $in_footer );
}

function enqueue_versioned_style( $handle, $src = false, $deps = array(), $media = 'all' ) {
	wp_enqueue_style( $handle, get_stylesheet_directory_uri() . $src, $deps = array(), filemtime( get_stylesheet_directory() . $src ), $media );
}

function themename_scripts() {
	enqueue_versioned_style( 'themename', '/style.css' );
	enqueue_versioned_script( 'themename', '/js/scripts.js', array( 'jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'themename_scripts' );