通过文件时间来强制浏览器更新JS或CSS文件

经常折腾 WordPress 主题的博友肯定试过修改完 css 或者 js 文件后,有时候得几经折腾(WordPress 后台禁用/手动清理缓存插件内容、刷新浏览器缓存、刷新 CDN……)才能把新的文件刷出来……最快捷的方法是手动修改 css 或者 js 文件的版本,不过,每修改一次就要手动更新版本号一次,也挺累的。

那么,如何让文件版本号自动更新呢?

方法一:用当前时间作为版本号

比如,我们可以这样控制主题 style.css 的文件版本。

<link rel="stylesheet" href="//yourdomain.com/wp-content/themes/themename/style.css?v=<?php echo time(); ?>">

但这个方法显然会相当耗费服务器资源。因为每刷新一次页面,就要获取当前时间(unix 格式)下的 css文件版本。

方法二:用文件(最后修改)时间作为版本号

filemtime 取得文件修改时间

<link rel="stylesheet" href="//yourdomain.com/wp-content/themes/themename/style.css?ver=<?php echo filemtime(http://yourdomain.com/wp-content/themes/themename/style.css); ?>" />

当然,更好的办法是用钩子,比如可以这样加载 style.css、script.js 文件和通过文件最后修改时间控制它们的版本:

function theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri(), array() , filemtime(get_stylesheet_directory().'/style.css'));
wp_enqueue_script( 'script', get_template_directory_uri().'/js/script.js', array(), filemtime(get_stylesheet_directory().'/js/script.js') , true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

我现在用的是上面这个代码。

参考文章:

料网 — 无视WordPress缓存强制加载最新CSS和JS

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/357/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!

群晖使用 rsync 本地文件夹间增量复制文件备份

Google 相册自动备份到 OneDrive,蜗牛星际安装了群晖,Cloud Sync 把 OneDrive 备份同步到本地。蜗牛星际群晖 NAS 用了4块监控录像机拆下来的垃圾盘,目前检测状态良好,不过不知道什么时候会挂,加上也没有做 raid,复制多一份稳点。 群晖官方貌似没有套件可以直接实现本地文件夹间增量复制文件…
浏览: 158 标签:  ,  ,  ,  ,  , 

TM-AC1900 3199 版本固件刷回 AC68U 支持 AiMesh

2016 年双十一淘宝买的水货华硕 RT-AC68U还在服役,折腾过双拨、刷过梅林……前阵子直接从梅林刷回原版。也是因为这个,大意了,中午登陆路由器看到有更新,于是点更新…… TM-AC1900 改的 AC68U 千万不要后台直接升级固件~ TM-AC1900 改的 AC68U 后台在线升级固件,直接悲剧了,三分钟、三分钟、三…
浏览: 111 标签:  ,  ,  , 

优酷路由宝 YK-L1 刷 Breed 和老毛子 Padavan 作无线打印服务器

前些天¥28收了一个极壹S(HC5661A),加USB刷Breed+老毛子作无线打印服务器用,挺好的。逛转转,看到一个优酷路由宝挺便宜的,¥30包邮到手,卖家说没有拆机,这么说自带的 8G TF 卡还在,还挺划算的,就买回来了。 两年前,就买过两个路由宝,那时候可以利用空闲宽带挖金币,基本上回本。后来又…
浏览: 68 标签:  ,  ,  ,  , 

Gridea,一个静态博客写作客户端(GUI 版 Hugo)

前几天折腾 Hugo,上手不难,建了个几乎零成本垃圾站,真香!Hugo 本地环境搭建比 Jekyll 简单,而 Gridea 比 Hugo 更简单,甚至,从功能上来说,Gridea 就是 Hugo GUI 版。 Gridea 简介 Gridea,一个静态博客写作客户端,小白也可以 GitHub Pages 搭建静态博客。开源、易用、强大。记录生…
浏览: 27 标签:  ,  ,  ,  ,  ,  ,  , 
浏览: 96

Comments:24

  1. 新年快乐!过来学习学习。(themebetter更好的主题)

    2016.02.24 15:48 # 回复
    1楼
  2. 已经无感了。你还在折腾~

    2016.02.24 17:54 # 回复
    2楼
  3. 应该是$rootdir为空.取个文件目录吧.

    2016.02.25 10:28 # 回复
    3楼
  4. 一开始玩WP的时候也喜欢折腾折腾,最近发现越来越折腾不动了

    2016.02.28 18:14 # 回复
    4楼
  5. 我折腾的少,都是手动刷新。

    2016.02.29 10:07 # 回复
    5楼
  6. 本地倒是没遇到什么缓存问题,cdn上是只能这个方法,不过我都是手动改的。

    2016.03.01 10:12 # 回复
    6楼
  7. 我都是设置Cache-Contro来控制

    2016.03.12 21:37 # 回复
    7楼
    • @Shrek 这个?https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn , 好像更高级。

      2016.03.14 12:21 # 回复
  8. 基本不折腾了,博客就是一个传说。

    2016.03.14 22:13 # 回复
    8楼
  9. 最近一个项目,在微信里面,某些手机在一些页面停留一段时间后,切换页面总会出现没加载 CSS 的情况,而且再点其他页面也不会在加载了,只能刷新页面才能解决,不知道是什么原因=。=

    2016.05.21 09:35 # 回复
    9楼
  10. 最近常修改主题,这个解决了实时查看效果的问题。
    相当合适。

    2018.11.19 09:15 # 回复
    10楼
  11. 另外,大爱这样的主题啊

    2018.11.19 09:18 # 回复
    11楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息