wordpress使用七牛cdn来实现加速站点是很多博主都在做的事情,但是这个七牛cdn在对于css和js缓存上有点蛋疼,就是css和js无论怎么刷新预取都不能够跟源站上的css一样,导致我们修改的css在使用七牛cdn的时候一直是处于不更新的状态中,怎么来处理这个办法?

手动给css加上版本号

给自己的wordpress修改的css加上版本就可以做到让七牛立即刷新css,这个办法虽然麻烦点,但还是有用的。

首先我们将七牛对象存储里的css删除,删除后,最好不要刷新自己的站点,先给自己的css加上版本上。

比如我现在使用的这个主题,在function.php里,找到style.css所在位置,修改成如下格式。

function Ezreal_theme_scripts() {
    wp_enqueue_style( 'Ezreal-css', get_template_directory_uri() . '/style.css',array(), '201610072345','screen' );
    wp_deregister_script('jquery');
    wp_enqueue_script( 'jquery', '//cdn.mrju.cn/js/jquery.min.js',array(), '1.7.0', true);
}

大致就是在style.css后面加上:array(), '201610072345','screen' 。

修改完成后,将css和function.php上传至自己的服务器上。再次刷新自己的网址看看。会发现自己的站点的css后面多了一串字符,就跟下面一样。

https://cdn.mrju.cn/wp-content/themes/Ezreal/style.css?ver=201610072345

style.css后面的:?ver=201610072345  就是css的版本号,这个数字自己在function.php里可以随意填写。

刷新自己的站点后,就会发现七牛cdn已经刷新你的新css了。

自动修改css版本号

既然不想手动修改css,那也可以自动修改css版本号。用 filemtime 取得文件修改时间,wordpress使用钩子,比如可以这样加载 style.css、script.js 文件和通过文件最后修改时间控制它们的版本。

function Ezreal_theme_scripts() {
    wp_enqueue_style( 'Ezreal-style', get_stylesheet_uri(), array() , filemtime(get_stylesheet_directory().'/style.css'));
    wp_deregister_script('jquery');
    wp_enqueue_script( 'jquery', '//cdn.mrju.cn/js/jquery.min.js',array(), '1.7.0', true);
}

以下是放在整个网站的头部的,heard.php里面。(自动修改css版本号方法任选其一即可。)

<link rel="stylesheet" href="//yourdomain.com/wp-content/themes/themename/style.css?ver=<?php echo filemtime(http://yourdomain.com/wp-content/themes/themename/style.css); ?>" />

在不知道这个方法之前,七牛上之前刷新的css已经四个月没刷新了,导致我直接不用七牛cdn了,既然css都刷新不了,就只好用他的对象存储,链接图片到博客来让博客加速。

参考资料:
http://lms.im/wordpress/deal-with-qiniu-caching-method.html
https://cyhour.com/357/
http://www.solagirl.net/force-refresh-of-style-css.html
http://www.liaosam.com/force-load-latest-css-js.html