小赖子的英国生活和资讯

通过文件时间来强置浏览器更新JS或CSS文件 (WP 技巧)

阅读 桌面完整版

WORDPRESS 博客的HTML的 标签 header 里 你经常可以看到 JS或者CSS文件里的引用后面加上一个 版本号. 例如:

https://justyy.com/wp-content/themes/twentytwelve/style.css?ver=4.4.2

这URL最后面加上的这个参数是 当前 WORDPRESS的版本号. 用意是这样每次更新 WP 版本的时候 浏览器就会强制更新这些文件. 因为有的浏览器 只要访问URL没变 就认为内容没变(当然还受限于其它缓存时间控制).

很经常我在 子主题里改 style.css 每次都得强制刷新 缓存 (浏览器和CLOUDFLARE). 不是很方便. 如果改成用文件时间来做缓存 就会好多了:

把下面的代码加入子主题的 functions.php 里即可.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function justyy_remove_cssjs_ver( $src ) {
  $newsrc = $src;
  if( strpos( $newsrc, '?ver=' ) ) {
    $newsrc = remove_query_arg( 'ver', $newsrc );
  }
  $rootdir = '/var/www'; // 博客在你主机上的地址.
  $url = parse_url($newsrc, PHP_URL_PATH);
  $source = $rootdir .'/'. $url;
  if (is_file($source)) {
    $newsrc .= "?m=".filemtime($source);
    return $newsrc;
  }     
  return $src; // 如果文件不存在 就不管那么多了.
}
add_filter( 'style_loader_src', 'justyy_remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'justyy_remove_cssjs_ver', 10, 2 );
function justyy_remove_cssjs_ver( $src ) {
  $newsrc = $src;
  if( strpos( $newsrc, '?ver=' ) ) {
    $newsrc = remove_query_arg( 'ver', $newsrc );
  }
  $rootdir = '/var/www'; // 博客在你主机上的地址.
  $url = parse_url($newsrc, PHP_URL_PATH);
  $source = $rootdir .'/'. $url;
  if (is_file($source)) {
    $newsrc .= "?m=".filemtime($source);
    return $newsrc;
  }     
  return $src; // 如果文件不存在 就不管那么多了.
}
add_filter( 'style_loader_src', 'justyy_remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'justyy_remove_cssjs_ver', 10, 2 );

您也可以使用 md5 来做为判断是否更新的标准. 当然这样的话会比较慢 因为需要获取文件的内容来计算MD5哈希值.

英文: How to Tell Browsers Re-update CSS/JS files when Files are Changed in WordPress?

强烈推荐

微信公众号: 小赖子的英国生活和资讯 JustYYUK

阅读 桌面完整版
Exit mobile version