通过文件时间来强制浏览器更新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 合租

WordPress 数据库常用 SQL 语句

WordPress 数据库存储了站点所有信息,数据库对站点来说至关重要,一般情况下不要折腾数据库。但是很多情况下,使用 SQL 语句批量修改站点内容,大大提高效率。下面 SQL 语句均收集自网络,操作需谨慎。所有的SQL语句都是假定你的数据库的前缀是"wp_" ,如果你使用不同的表前缀,请自行修改。 温馨…
浏览: 154 标签:  ,  , 

Bitcron 初体验

去年看 UNEE 博主 Bitcron 体验文 的时候就申请过邀请码,不过发了两次邮件都没要到邀请码。反正也只是体验一下,也就作罢了。 Farbox 很久以前开始用 Farbox,当然了,一直只是试用状态程度的试用。比如现在还在用:参观一下。Bitcron 很像 Farbox,前者可以看作是后者的升级版? 从 FarBox…
浏览: 120 标签:  ,  , 

WordPress 文章 tag 标签使用 ID 形式固定链接

WordPress 设置中可以设定使用 post_id 作为文章/页面「固定链接」形式,但是无法设置文章 tag 标签也使用 ID 形式固定链接。 WordPress 文章 tag 标签的固定链接默认使用标签的别名,如果标签没有设置别名,并且标签名字带中文,那么固定链接就会带有中文,然后被 urlencode 转义成类似下面的…
浏览: 125 标签:  ,  ,  , 

希捷 西数 东芝 SMR 叠瓦式硬盘完整列表 硬盘购买指南

CMR(Conventional Magnetic Recording)又称作 PMR(Perpendicular Magnetic Recording)垂直写入技术,这是传统硬盘技术。SMR(Shingled Magneting Recording),叠瓦式记录技术,可以提高储存数据资料密度,从而提高硬盘储存容量。 SMR 叠瓦式硬盘优势在于大容量、低价格(性价比更高),缺点是…
浏览: 31

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信息