对付wordpress七牛缓存css不生效的办法

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

别留恋破碎的旧梦,别计较人生的得失。

11 条评论

    1. @老杨 那个说的是修改css的时间来作为版本号,但是那串数字我实在是看不出来是修改时间。。。ver=1476180167。。老杨,你能告诉我这是什么时候修改的吗? :eek: :eek: 感觉就是随机给的数字,不过确实自动修改css版本号了,再也不用手动修改了。。。 :wink:

  1. 路过,博主的网站做的不错,有点新意!
    上面大多数方法我都试过了,现在都不太行了。我现在如果频繁折腾 css 或 js 的时候,我会直接在WP七牛插件那里把缓存文件类型的 css|js 给暂时去掉,改好了再添加上 css|js。然后更新清理一下七牛上的缓存 CSS和JS。感觉操作也不是很复杂。哦对了,我是直接改了七牛的WP插件,把我主题文件的CSS文件和JS文件路径写在了文本框上面,要清理文件的时候直接复制粘贴进来然后点清理就OK了。

    1. @料神Sam 我平时更新css文件都是先上传新的css到服务器,然后再给七牛那边对应的老css文件删除,最后再刷新下本博客就ok了。不过前提条件还是得先使用上方教程的的自动添加css版本号。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫