WordPress自动加载最新的JS和CSS文件的教程

正确使用缓存可以加快网站的加载速度，并改善用户体验。但是有时候，由于缓存或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='/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（）函数自动获取上次文件更新的时间戳，然后将该时间戳用作版本号参数的值。

例如，我们可以将上面的函数修改为：

/**
 * 引入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='/wp-content/themes/mycustomtheme/css/customstyle.css?ver=1584639960' type='text/css' media='all' />

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