js给css加时间戳,给wordpress的css和js加上时间戳

经常修改主题，因为缓存的缘故，难免遇上需要访客浏览器强制刷新的情况。但是尽量增加客户端css，js，图片缓存时间是提高站点访问速度的一个关键因素，为解决这个矛盾，常见的方法是在css和js后面跟上一段时间戳。当css、js文件修改后，相对应的URL发生变化，让浏览器主动去更新这些文件。而在平时，通过修改站点根目录下的.htaccess给css/js一个尽可能长的缓存时间。

下面是该方法在wordpress中相关的应用。代码很简单,下面给css加上时间戳，(CP来源未知)通过获取css文件的修改时间，输出xxx.css?v=122342344这种形式 。主要是采用了钩子直接修改css的url，下面的代码可以直接复制到function.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载入。请自行修改代码发挥~

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 = <<

\n

EOF;

}else{

$text = < <

EOF;

}

echo $text;

}

add_action('wp_footer', 'LoadJS', 100);

Via：http://winysky.com/to-the-css-and-js-wordpress-timestamp

2019.09.23更新：

其实现在不用那么麻烦，直接在相应函数加上参数就好了！譬如：

//加载头部js代码

wp_enqueue_script( 'bootstrap', get_theme_file_uri( '/js/bootstrap.min.js' ), array(), '20190917', false ); //20190917就是时间戳，当然也可以改成你的主题版本号

//加载头部css代码

wp_enqueue_style('bootstrap', get_theme_file_uri('/css/bootstrap.min.css'), array(), '20190917', 'all', false);//20190917就是时间戳，当然也可以改成你的主题版本号

是不是简单多了呢？以上代码可以完全忽视啦！

声明：