经常修改主题,因为缓存的缘故,难免遇上需要访客浏览器强制刷新的情况。但是尽量增加客户端css,js,图片缓存时间是提高站点访问速度的一个关键因素,为解决这个矛盾,常见的方法是在css和js后面跟上一段时间戳。当css、js文件修改后,相对应的URL发生变化,让浏览器主动去更新这些文件。而在平时,通过修改站点根目录下的.htaccess给css/js一个尽可能长的缓存时间。
下面是该方法在wordpress中相关的应用。代码很简单,下面给css加上时间戳,(CP来源未知)通过获取css文件的修改时间,输出xxx.css?v=122342344这种形式 。主要是采用了钩子直接修改css的url,下面的代码可以直接复制到function.php里面,无需修改。
<?php 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 . '?v=' . filemtime(ABSPATH . '/wp-content' . $pieces[1]); return $stylesheet_uri; }
注意:add_filter的位置是'stylesheet_uri',没错是uri
js的一样,贴个我用的代码吧,我把js放在根目录/js 目录下面,判断主页和single页面选取不同的js,并通过钩子在wp footer载入。请自行修改代码发挥~
<?php function LoadJS(){ $basejs = get_bloginfo('template_directory') . '/js/W1.min.js'; $basejs .= '?v='.filemtime(TEMPLATEPATH .'/js/W1.min.js'); $singlejs = get_bloginfo('template_directory') . '/js/single.min.js'; $singlejs .= '?v='.filemtime(TEMPLATEPATH .'/js/single.min.js'); if ( is_singular() ) { $text = <<<EOF <script src="{$basejs}" type="text/javascript"></script>\n <script src="{$singlejs}" type="text/javascript"></script>\n EOF; }else{ $text = <<<EOF <script src="{$basejs}" type="text/javascript"></script>\n EOF; } echo $text; } add_action('wp_footer', 'LoadJS', 100);
Hi,
请问你的代码高亮用的是哪款插件呀?谢谢……
这个直接就手动修改head算了改动的文件就那么几个。你这样还搞的麻烦了,我是极简主义。