WordPress主题开发

WordPress自动刷新style.css一法

今天在网上发现一个自动在style.css被更改后强制用户浏览器刷新样式表的方法,很简洁,适用于child theme。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . 
filemtime( get_stylesheet_directory() . '/style.css'); ?>" 
type="text/css" media="screen, projection" />

这里用到的方法同样适用于wp_enqueue_style()。好处是不用每次修改样式表后都要手动修改版本号后缀,这段代码会将文件修改时间作为版本号。

代码来自:Force CSS changes to “go live” immediately

适合开发阶段

不是所有浏览器都能缓存url中带有参数(?)的静态资源,所以上线的网站最好去掉版本号。如果网站改版需要让用户浏览器更新这些资源,可以采用如下方法:

把版本号加到路径里,再用apache重定向。比如样式表地址为http://abc.com/v1.2/style.css,将其重定向到http://abc.com/style.css。

同理,可以直接将版本号加到名字中,例如style_12.css,再用重定向方法。

更详细的资料请参考:How can I force clients to refresh JavaScript files?

7条评论

  1. 或许用chrome选择在打开开发者工具的时候禁止缓存也是一个不错的办法。

    1. 多谢你的留言,我同意这种说法,但我觉得不能一概而论。

      比如,正在开发中的网站,让客户频繁去刷新页面更新样式很麻烦,很多客户会想不起来就以为网站有问题。最简单的方法就是加个版本号,上线时去掉。

      WordPress中用wp_enqueue_style加载样式时也会自动加上版本号,可以用minify插件直接整合压缩所有样式表,我试过wp minify插件,也会带版本号,但google insight中这个版本号似乎对得分没什么大影响。

      另外,如果网站改了样式,那就必须强制浏览器刷新样式表。我只想了最简单的方法,谢谢露兜你提醒我,所以我研究了下,不是所有浏览器都能缓存带?的静态资源,为了尽可能的让它们被缓存,可以用替换名字,或者替换url的方式,还可以用Cache-Control,这篇文章讲了挺多方法
      http://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files

      还有什么好方法,还望露兜分享一下,谢谢!我会把文章更新下,防止误导不懂的人。

      1. 你补充更新的方法不错。我是将版本号加到文件名,前一种方法或许更好。

评论已关闭。