WordPress自动加载更新js和css文件

  • 2020-05-10
  • 693

我们很多时候会用WordPress来进行律师网站建设,然后使用缓存可以加快网站的加载速度,提高用户体验。但是有些时候,由于缓存或CDN导致我们的js和css文件被缓存了,如果没有清理缓存,或强制刷新浏览器,可能无法加载最新的js和css。

为了解决这些问题,WordPress一直都有相应解决方案。

通过版本号更新

最常用的就是为js和css文件添加版本号参数

如果你做过WordPress开发,应该知道如何使用 wp_enqueue_script() 引入js文件,使用 wp_enqueue_style() 函数引入css文件。这两个函数都有一个版本参数。下面以 wp_enqueue_style() 为例:

/**
 * 引入css文件(版本号)
 */
function wpkj_enqueue_scripts() {

	wp_enqueue_style(
		'my-custom-style',
		get_stylesheet_directory_uri() . '/css/customstyle.css',
		[], // 依赖
		'1.0.0' // 版本号
	);

}
add_action( 'wp_enqueue_scripts', 'wpkj_enqueue_scripts' );

通过上面的代码引入的css文件,加载出来的代码大概为:

<link rel='stylesheet' id='my-custom-style-css' href='https://example.com/wp-content/themes/mycustomtheme/css/customstyle.css?ver=1.0.0' type='text/css' media='all' />

你可以看到文件网址后面有一个参数 customstyle.css?ver=1.0.0,如果我们的css代码更新了,我们只需要更改 wp_enqueue_style() 中的版本号参数即可,比如更改为 1.0.1,那输入的文件网址就应该为 customstyle.css?ver=1.0.1,这样就达到了自动更新文件的效果。

通过时间戳更新

虽然说版本号是一种可行的方案,但是每次修改css代码都要更新一个版本号,这个做法在实际开发中并不科学,所以我们可以考虑使用时间戳来实现。

我们可以通过 filemtime() 函数来自动获取文件最后更新的时间戳,然后将这个时间戳作为版本号参数的值。

比如,我们可以将上面的函数修改为:

/**
 * 引入css文件(时间戳)
 */
function wpkj_enqueue_scripts() {

	wp_enqueue_style(
		'my-custom-style',
		get_stylesheet_directory_uri() . '/css/customstyle.css',
		[], // 依赖
		filemtime( get_stylesheet_directory() . '/css/customstyle.css' ) // 版本
	);

}
add_action( 'wp_enqueue_scripts', 'wpkj_enqueue_scripts' );

注意看上代码的第10行。最后输入的代码应该为:

<link rel='stylesheet' id='my-custom-style-css' href='https://example.com/wp-content/themes/mycustomtheme/css/customstyle.css?ver=1584639960' type='text/css' media='all' />

从中我们可以看到版本号参数的值为一个时间戳 customstyle.css?ver=1584639960,每次我们修改了 customstyle.css 文件,都会自动更新这个时间戳,达到了及时更新参数的目的。

成都律品科技有限公司专注律师互联网营销技术服务,创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年,2018年公司正式成立,不断探索律师行业服务需求,致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

在线咨询
  • 152-0832-9147

  • 105991110

全时间在线,如遇忙未回复请留下联系方式

微信咨询

上海律师网站建设 北京律师网站建设 深圳律师网站建设 广州律师网站建设 天津律师网站建设 重庆律师网站建设 苏州律师网站建设 成都律师网站建设 武汉律师网站建设 杭州律师网站建设 南京律师网站建设 青岛律师网站建设 无锡律师网站建设 长沙律师网站建设 宁波律师网站建设 郑州律师网站建设 佛山律师网站建设 济南律师网站建设 南通律师网站建设 东莞律师网站建设 烟台律师网站建设 西安律师网站建设 泉州律师网站建设 常州律师网站建设 合肥律师网站建设 大连律师网站建设 徐州律师网站建设 福州律师网站建设 唐山律师网站建设 潍坊律师网站建设 石家庄律师网站建设 长春律师网站建设 温州律师网站建设 盐城律师网站建设 扬州律师网站建设 绍兴律师网站建设 泰州律师网站建设 哈尔滨律师网站建设 沈阳律师网站建设 淄博律师网站建设 南昌律师网站建设 济宁律师网站建设 临沂律师网站建设 昆明律师网站建设 嘉兴律师网站建设 洛阳律师网站建设 厦门律师网站建设 台州律师网站建设 镇江律师网站建设 金华律师网站建设 惠州律师网站建设 宜昌律师网站建设 襄阳律师网站建设 泰安律师网站建设 鄂尔多斯律师网站建设 淮安律师网站建设 东营律师网站建设 太原律师网站建设 中山律师网站建设 榆林律师网站建设 威海律师网站建设 德州律师网站建设 南宁律师网站建设 沧州律师网站建设 贵阳律师网站建设 漳州律师网站建设 南阳律师网站建设 聊城律师网站建设 菏泽律师网站建设 芜湖律师网站建设 邯郸律师网站建设 岳阳律师网站建设 常德律师网站建设 茂名律师网站建设 保定律师网站建设 呼和浩特律师网站建设 珠海律师网站建设 遵义律师网站建设 湖州律师网站建设 连云港律师网站建设 湛江律师网站建设 江门律师网站建设 宿迁律师网站建设 许昌律师网站建设 滨州律师网站建设 乌鲁木齐律师网站建设 兰州律师网站建设 包头律师网站建设 赣州律师网站建设 周口律师网站建设 枣庄律师网站建设 衡阳律师网站建设 大庆律师网站建设 九江律师网站建设 株洲律师网站建设 柳州律师网站建设 新乡律师网站建设 汕头律师网站建设 廊坊律师网站建设 信阳律师网站建设