• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.

不刷新缓存,WordPress让浏览器自动加载最新的CSS、JS文件

WP其他 奇跡の海 1年前 (2017-04-22) 161次浏览 已收录 0个评论 扫描二维码

不刷新缓存,WordPress 让浏览器自动加载最新的 CSS、JS 文件

导语

相信很多朋友都在自己的 wordpress 程序中,安装缓存插件 WP Super case,如果我们在更新 WP 的 CSS 样式文件,或者其它文件,比如 JS 文件等时,我们需要去清除一些缓存来查看效果,那么如何让访客的浏览器获取最新的 CSS、JS 文件而非等到浏览器删除缓存后去自动获取呢。

具体方法

相信有过开发经验的童鞋都知道是用版本号参数控制,即原来比如说 css 文件路径代码是如下面的:

http://xxx/wp-content/themes/Devework/style.css

那么如果更新了 css 文件,可以为此添加版本号,即改为:

http://xxx/wp-content/themes/Devework/style.css?v=2

但是,在 WordPress 中如果每修改一次就要手动更新版本号那太累了。如何让版本号自动更新(即?v=后面的数字自动更新)?

时间戳

想必你也知道了,用时间戳代替版本号。在 WordPress 中,用时间戳代替版本号的处理方式可以更加方便一点。

http://xxx/wp-content/themes/Devework/style.css?v=<?php echo time(); ?>

也可以如下:

http://xxx/wp-content/themes/Devework/style.css?v<?php echo filemtime($pathToCSS); ?>" />

部落之前在七牛云存储配合 WP Super Cache 使用教程和一些问题汇总一篇文章中提到过七牛云的缓存刷新,其中就有时间戳强制更新的方法。

WordPress 让浏览器自动加载最新的 CSS、JS 文件

有过 WordPress 主题开发经验的都知道,WordPress 中引用主题的 styl.css 文件的路径是直接使用函数的,这么一来,在 header.php 中的路径代码如下:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

虽然手动修改路径也可以,但我们并不推荐该方法,你可以 hook 一下该 wp_enqueue_style() 函数。

将下面的代码添加到主题的 functions.php 文件下即可为 styl.css 文件添加时间戳版本号:

add_action( 'wp_enqueue_scripts', 'add_styles' );
function add_styles()
{
     $css_file = get_stylesheet_directory() . '/css/style.css';
     wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/css/style.css', NULL, filemtime($css_file) );
}

js 文件的话依照上面的照搬即可实现。

如此一来,就能保证浏览器每次访问都是最新的 css、js 文件,而非采用缓存。


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->不刷新缓存,WordPress 让浏览器自动加载最新的 CSS、JS 文件!在下边可以分享本文哦!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址