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. 你补充更新的方法不错。我是将版本号加到文件名，前一种方法或许更好。

评论已关闭。