众所周知,浏览器一般会缓存CSS文件,以节省下载量和提高页面显示速度,这种机制就叫做缓存。
但是,缓存也有一定的弊端。如果您的CSS文件已经更改,但是浏览器不知道,而缓存下来的CSS文件也没有过期,浏览器仍旧会使用缓存中的CSS文件,也就是旧的样式。
当然,很多有经验的用户都知道,只要使用Ctrl+F5,强制刷新浏览器,就可以让浏览器下载新的样式表文件了,但是作为一个博客网站,你不可能让你的每个用户都去自己Ctrl+F5一下,很傻是不?
其实,解决这个问题是很简单的,以前,我就在网上看到过,是为了解决js文件的缓存问题的,js也有相同的问题。要说解决之道,到是非常的简单,因为如果请求css文件,或者js文件的链接变化了,也即url变化了,浏览器就会认为,这是完全不同的两个文件,就不会使用缓存中的文件。所以,只要改变url,就可以让浏览器强制更新缓存了,当然,每次换url也很麻烦,我们一般使用的办法是给url添加一个query string,比如,原来申请的是:
<link rel='stylesheet' href='http://localhost/wp25/wp-content/default/style.css' type='text/css' />
和
<script src='http://localhost/wp25/wp-content/default/custom.js' type='text/javascript'></script>
现在变成:
<link rel='stylesheet' href='http://localhost/wp25/wp-content/default/style.css?120012022' type='text/css' />
和
<script src='http://localhost/wp25/wp-content/default/custom.js?12345678' type='text/javascript'></script>
就是在后面跟了一串数字,我的页面用的一个json,因为每次都要重新下载,所以,我在请求的url链接后面,带了一个随机数,这样,每次浏览器都会认为,这是一个全新的文件,都会去下载。
当然,大多数情况下,是不需要每次都下载,也即在站点没有更改自己的css文件和js文件的时候,浏览器要使用缓存,而更改了后,所有浏览的用户就要自动下载。最好的办法,就是用文件修改的日期来做后面那串数字,既保证了用户那边的效果会实时更新,又保证了能够使用缓存这种机制。
前两天看到个小老外,写了篇文章介绍这个东西,WTC竟然也推荐了,原来这个方法竟然如此的不普及啊~~小老外的文章看这里,讲得和我说得是一回事:
Smart cache-busting for your WordPress stylesheet
达人Matt给他提了个建议,让他使用filter来实现这个,这样,每个主题都会因为这个而受益。结果这个小老外就去写了一个插件,叫做CSS Cache Buster(点击链接,查看插件页面,下载插件)。
我本来以为这个小老外这两天迟迟没有动手呢,我就先写了一个,结果发现小老外竟然Updated了,只是我没有看到,赶快把他的插件下回来看了下,发现小老外写的东西用的filter没我好,他不直接,他用了bloginfo_url这个filter,而我直接用了stylesheet_uri这个filter,比他少了一次判断,但是小老外也有优点,就是他考虑了别的插件已经添加过query string的情况,而我没考虑,可见我的经验尚浅,或者说我还是不够勤劳,总之,自我感觉有那么点败给小老外了……
感兴趣或者经常喜欢修改style.css的同学请安装他的插件吧,可以少按很多次Ctrl+F5呢,嘿嘿
下面放上我写的代码,权当是一个纪念吧:
/*
Plugin Name: Smart Cache-busting Stylesheet
Plugin URI: http://sexywp.com/
Description: This plugin will tell the explorer that your stylesheet has been changed and the explorer will redownload the style.css file instead of using the cached one.
Author: Charles Tang
Version: 8.9.13
Author URI: http://sexywp.com/
*/
add_filter('stylesheet_uri','cache_buster_code',9999,1);
function cache_buster_code($stylesheet_uri){
$pieces = explode('wp-content', $stylesheet_uri);
$stylesheet_uri = $stylesheet_uri . '?' . filemtime(ABSPATH . '/wp-content' . $pieces[1]);
return $stylesheet_uri;
}
?>

爱代码的好孩子~~
博主是个很谦虚好学的人,,向你学习。。
一般一般,世界第三。呵呵
嗯,看不懂,不过收了~
还好我的CSS文件比较小,不需要处理都可以~最近比较忙,所以少来了点~~
呵呵,这个跟文件的大小是无关的。这个跟你是不是希望你的读者能够第一时间看到你的博客模板的改动是有关的。
再简单点说,这个插件跟性能是无关的。跟用户体验是有关的。
哦~明白~~我打开jinwen的博客的时候,经常都是先出现内容然后再载入主题样式,如果装了这个插件是不是就不会出现这个的问题??
米啥技术含量啊..
尽管我不懂PHP..
有技术含量的我也写不出来啊……唉……被鄙视了~~5555
贵博样式好像在IE6下显示非常有问题, 请博主看看吧。。
我对此非常清楚……很着急……很遗憾……但是我也没有法子搞定啊 >.<
给导航栏的每个 li 一个宽度就好了,比如100px 然后再给里面的容器 in_pn 一个 text-align:center
不过这样还是存在一个问题,就是 page_item current_page_item 的宽度被限制,我觉得导航栏的后面跟一个“查看XX文章”,不是很必要。
要是只有导航栏有问题,我就会去解决了,其实问题太多太严重了,以至于我根本提不起去修复的兴趣……唉,我太懒了……比起修复现在这个玩意儿,还是制作新模板更让我兴奋~~查看xX的那个问题,我当时只是觉得,导航tab要和底下正文部分遥相呼应,仅仅是为了逻辑上的一致性,倒是没有考虑过是不是有必要,哈哈^_^
这个主题挺适合你的的博客内容,何不完善一下呢?
这个,基本上很深奥很深奥...
呵呵,不要被我帖的代码下着了,直接去下载小老外的插件用就ok了。
這個我也有安裝哦! 感覺上裝完對速度沒有什麼大影響。
但插件卻就是很實用,避免了很多不必要的驚慌 >v<
所以都推薦大家安裝一下,以備無患
嗯,性能不是问题
So good.!
虽然我看不明白.
但是让我学完了我会慢慢品味贵博客的精彩内容...
大概这个冬天后能自学完.
其实没啥深奥的,是我表达能力有限……
sofa...嘿嘿 我现在要么不改 改起来就是很多地方...
哎呀,你的沙发,上面一个老兄是第一次来,没有审核……
心碎特了...
不要紧,最近我这里很冷清的,下篇文章你来抢沙发好了,哈哈
沙发当然要由我来做!嘎嘎
欢迎你第一次留言~以前是来潜水的吗?嘿嘿
这都被你发现了啊,俺经常潜水,从你家门前静静游过........