更新css js同时更新客户端浏览器的缓存

最近对主题优化比较频繁,修改完主题,其他人访问你的博客,有可能访问的是之前缓存的样式。

我们暂时不去研究浏览器的缓存过期时间,或则是更新时间,更何况不同浏览器缓存机制也有差异,像我们这种经常修改主题的博主,客户端缓存就应该由我们自己来控制,随时更新!

浏览器缓存不仅提高访问速度,也缓解服务器压力,所以不可能在页头加入no-cache, no-store之类把缓存关掉,就算这么做了,不同浏览器也未必听你的。

有人通过修改css和js的路径来更新缓存,也是不可取的,这样做每次都要去改代码,也是非常麻烦的,还有人通过修改主题名字,这样虽然可以,但是有些主题参数会丢失的。

所以最好的方式就是给js和css加入版本号,比如:<script type="text/javascript" src="zy.js?version=3.1.2"></script> ,或则css文件href="style.css?version=3.1.2这样,后面参数对css和js文件没有影响,改变版本号,客户端浏览器就会重新下载新的js或css文件,起到刷新缓存的作用。

当然,手动修改版本号也是麻烦的,最直接的就是使用时间戳作版本号,已经有人想好了代码,感谢老杨提醒,这段代码只要css和js更新,就自动更新版本号,比如:style.css?ver=1542474833。

以下是放入主题function的代码:

function theme_scripts() {

wp_enqueue_style( 'style', get_stylesheet_uri(), array() , filemtime(get_stylesheet_directory().'/style.css'));

wp_enqueue_script( 'script', get_template_directory_uri().'/zy.js', array(), filemtime(get_stylesheet_directory().'/zy.js') , true );

}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

注意代码里面的css和js地址,换成你主题的相对地址,记得删掉你之前header调用的css和js代码。

分类:网络博客 标签:,,,,,

上一篇:WordPress添加夜间模式cookie版

下一篇:为二级菜单的父级添加下拉css三角箭号

已经有29条评论!

Loading...
  1. 不能失去沙发。

    沙发!
  2. 可以用时间戳作版本号:https://cyhour.com/357/

    板凳!
  3. [耍酷] 照这个情况下去,你可以出个主题了。

    地板!
  4. SN

    以前经常折腾主题,现在选定一个满意的就懒得再改了 [坏笑]

    4F
  5. 我手动改版本号,嘿嘿,因为都不怎么折腾了

    5F
  6. Uz

    时间渐少,还能继续折腾wp的。真的不多了 [忧伤]

    6F
  7. 只要爱好还在,继续折腾

    7F
  8. 我都是手动改的版本号,主题里文件的url都是写死的,修改了哪个文件再去改版本号,各个文件的版本号都不一样。

    8F
  9. 技术性的东西已经不想在去折腾,只要能打开站点就行.. [冷笑]

    9F
  10. 我现在都是用CDN了,一般都是在CDN强制刷新一下!效率很低!但多少有点儿作用!这个思路很不错!

    10F
  11. 这个真心不错,修改样式表,就会更新加个准确的时间戳,如今wordpress 的内置代码编辑器很强大了,语法提示很牛,修改php自动检测错误,真心很赞,以后直接在wordprss 制作主题了~~

    11F
    • @夜枫 那个样式编辑其实有个不好地方(有优缺点),经常会遇到无法更新,原因是自带的检测功能失常状况,不过总体还是赞的,强迫症的会遇到css语法检测错误问题,哈哈。 [大笑]

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑