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

在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下面就介绍一个简单的方法。

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

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

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

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

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

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

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

或者:

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

WordPress 中呢?
有过WordPress 主题开发经验的都知道,WordPress 中引用主题的styl.css 文件的路径是直接使用函数<?php bloginfo('stylesheet_url');?>的,这么一来,在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文件,而非采用缓存

其实就是在css或js后面带个随机参数了,当然我们也可以设置网页不缓存

方法一:在<head>标签里增加如下meta标签。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

HTTP1.1中启用Cache-Control 来控制页面的缓存与否,这里介绍几个常用的参数:

no-cache,浏览器和缓存服务器都不应该缓存页面信息;
public,浏览器和缓存服务器都可以缓存页面信息;
no-store,请求和响应的信息都不应该被存储在对方的磁盘系统中;
must-revalidate,对于客户机的每次请求,代理服务器必须想服务器验证缓存是否过时;
Last-Modified只页面的最后生成时间,GMT格式;
Expires过时期限值,GMT格式,指浏览器或缓存服务器在该时间点后必须从真正的服务器中获取新的页面信息;

时间: 2024-11-01 14:35:48

WordPress让浏览器自动加载最新的CSS、JS文件(免刷新缓存)的相关文章

调试异步加载页面中的js文件

问题 在使用 EasyUI 时,采用了异步加载 div 页面的方式,来优化页面的性能.但是在浏览器 debug 时,发现 div 页面中的 js 文件是不可见的,即无法断点调试. 比如,我自己写了一个 entMgt 的模块 div页面,里面引用了 entMgt.js 但是 debug ,却见不到该文件 解决 就是在需要调试的 js 文件顶部加一行代码: //@ sourceURL=entMgt.js 搞定

当滚动条滚动到页面底部自动加载增加内容的js代码_javascript技巧

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

thinkphp学习笔记9—自动加载

原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\Util\Auth类: namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/Org/Util/Auth.class.php 这样我们就可以直接实例化了, new \Org\Util\Auth(); 实例化之后系统会自动加载 ThinkPHP/

大数据与机器学习:实践方法与行业案例.3.3 自动加载程序的数据库设计

3.3 自动加载程序的数据库设计 根据之前的设计,自动加载程序需要从数据库配置表中获取配置信息,并不断更新相关的状态,表3-2列出了自动加载程序需要的所有配置表. 表3-2 自动加载程序的配置表 表 名 中文名称 用 途 file_settings 数据文件信息表 存储数据文件名称.日期等配置信息 file_status 数据文件状态表 存储数据文件的状态 load_config 加载配置信息表 存储数据库中表的相关信息 ftp_server 数据缓冲区信息表 存储数据缓冲区文件服务器的相关信息

php自动加载类__autoload()的方法

作用:当在程序中需要实例化一个类,刚好这这类又不是在本文件中,则需要用包含函数将外部文件包含进来.但是,当要用的外部类很多后,就会发现用包含函数会显得十分的繁琐,这是就可以用__autoload()全局函数自动加载类. 当在index.php中要使用前面三个类时,就需要写三个例如include("name.class.php") 这样的方法,效率会十分低,但如果使用了__autoload()函数就不用这样麻烦了,只需要写这样一个函数方法就可以了: 在 PHP 5 中,不再需要这样了.可

Node.js模块加载详解_node.js

JavaScript是世界上使用频率最高的编程语言之一,它是Web世界的通用语言,被所有浏览器所使用.JavaScript的诞生要追溯到Netscape那个时代,它的核心内容被仓促的开发出来,用以对抗Microsoft,参与当时白热化的浏览器大战.由于过早的发布,无可避免的造成了它的一些不太好的特性. 尽管它的开发时间很短,但是JavaScript依然具备了很多强大的特性,不过,每个脚本共享一个全局命名空间这个特性除外. 一旦Web页面加载了JavaScript代码,它就会被注入到全局命名空间,

Win8系统浏览器无法自动加载Flash插件怎么办?

  在我们浏览网页的时候,大部分网页中都包含有flash元素,在遇到带有flash元素的网页时,浏览器将自动加载运行Flash插件,才能让flash动态元素在网页中展现,而在win8系统下,近期有部分用户反映访问网页无法加载flash的问题,对于该问题时什么原因造成的?我们要如何解决呢?下面看小编为大家体用的详细操作方法吧! 解决win8系统浏览器无法加载flash插件的方法 一.按住键盘Win+A+X键打开Windows命令提示符,然后在命令提示符窗口上输入cd C:WindowsSystem

servlet-javaweb发布后怎么实现浏览器打开自动加载数据库信息

问题描述 javaweb发布后怎么实现浏览器打开自动加载数据库信息 网站没发布时,我设置了初始加载的InitServlet,而且设置了0,每次从myeclipse重新加载项目可以实现初始化加载. 但是现在我把网站挂到服务器上去了,每次数据库修改后,我只能实现从浏览器上打开网站,InitServlet无法加载新的内容,因为我无法启动myeclipse加载InitServlet,请问怎么解决,谢谢了.

基于javascript实现浏览器滚动条快到底部时自动加载数据_javascript技巧

废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /