WordPress自动加载最新的JS和CSS文件
正确使用缓存可以加快网站的加载速度,并改善用户体验。 但是有时候,由于缓存或CDN,我们的JS和CSS文件被缓存了。 如果未清除缓存或强制刷新浏览器,则可能不会加载最新的JS和CSS。为了解决这些问题,WordPress一直都有相应的解决方案。
通过版本号更新
最常用的是为JS和CSS文件添加版本号参数。如果你已经做过了WordPress开发,则应该知道如何使用wp_enqueue_script()引入js文件和wp_enqueue_style()函数来引入css文件。 这两个函数都有一个版本参数。 以wp_enqueue_style()为例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /** * 引入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文件,加载的代码可能是:
1 | <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 位于文件URL的后面。 如果我们的CSS代码已更新,我们只需要更改wp_enqueue_style()中的版本号参数,例如1.0.1,输入的文件URL应该是 customstyle.css?ver=1.0.1 ,从而达到自动更新文件的效果。
通过时间戳更新
尽管版本号是一个可行的解决方案,但是每次修改CSS代码时,都必须更新版本号。 这种做法在实际开发中并不科学,因此我们可以考虑使用时间戳来实现。
我们可以使用filemtime()函数自动获取上次文件更新的时间戳,然后将该时间戳用作版本号参数的值。
例如,我们可以将上面的函数修改为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /** * 引入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行。 最后输入的代码应为:
1 | <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文件时,都会自动更新此时间戳,以达到及时更新参数的目的。