通过文件时间来强制浏览器更新JS或CSS文件

经常折腾 WordPress 主题的博友肯定试过修改完 css 或者 js 文件后,有时候得几经折腾(WordPress 后台禁用/手动清理缓存插件内容、刷新浏览器缓存、刷新 CDN……)才能把新的文件刷出来……最快捷的方法是手动修改 css 或者 js 文件的版本,不过,每修改一次就要手动更新版本号一次,也挺累的。

那么,如何让文件版本号自动更新呢?

方法一:用当前时间作为版本号

比如,我们可以这样控制主题 style.css 的文件版本。

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

但这个方法显然会相当耗费服务器资源。因为每刷新一次页面,就要获取当前时间(unix 格式)下的 css文件版本。

方法二:用文件(最后修改)时间作为版本号

filemtime 取得文件修改时间

<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); ?>" />

当然,更好的办法是用钩子,比如可以这样加载 style.css、script.js 文件和通过文件最后修改时间控制它们的版本:

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().'/js/script.js', array(), filemtime(get_stylesheet_directory().'/js/script.js') , true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

我现在用的是上面这个代码。

参考文章:

料网 — 无视WordPress缓存强制加载最新CSS和JS

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/357/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…

Google Analytics 异步请求(服务端请求)

感谢伟大的祖国,使得好好的 Google,必须折腾一番才能好好的用起来。Google 搜索如此,Google Analytics 肯定也不例外(网上据说 Google Analytics 没有被屏蔽)。 Google Analytics 支持服务端发送统计信息(via:Jerry Qu),而通过服务端统计可以解决 Google Analytics 连接缓慢问题,提高页面…
浏览: 71 标签:  ,  , 

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 67
浏览: 114

Comments:24

  1. 新年快乐!过来学习学习。(themebetter更好的主题)

    2016.02.24 15:48 # 回复
    1楼
  2. 已经无感了。你还在折腾~

    2016.02.24 17:54 # 回复
    2楼
  3. 应该是$rootdir为空.取个文件目录吧.

    2016.02.25 10:28 # 回复
    3楼
  4. 一开始玩WP的时候也喜欢折腾折腾,最近发现越来越折腾不动了

    2016.02.28 18:14 # 回复
    4楼
  5. 我折腾的少,都是手动刷新。

    2016.02.29 10:07 # 回复
    5楼
  6. 本地倒是没遇到什么缓存问题,cdn上是只能这个方法,不过我都是手动改的。

    2016.03.01 10:12 # 回复
    6楼
  7. 我都是设置Cache-Contro来控制

    2016.03.12 21:37 # 回复
    7楼
    • @Shrek 这个?https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn , 好像更高级。

      2016.03.14 12:21 # 回复
  8. 基本不折腾了,博客就是一个传说。

    2016.03.14 22:13 # 回复
    8楼
  9. 最近一个项目,在微信里面,某些手机在一些页面停留一段时间后,切换页面总会出现没加载 CSS 的情况,而且再点其他页面也不会在加载了,只能刷新页面才能解决,不知道是什么原因=。=

    2016.05.21 09:35 # 回复
    9楼
  10. 最近常修改主题,这个解决了实时查看效果的问题。
    相当合适。

    2018.11.19 09:15 # 回复
    10楼
  11. 另外,大爱这样的主题啊

    2018.11.19 09:18 # 回复
    11楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息