众所周知，在 WordPress 中正确使用缓存可以加快网站的加载速度，改善用户体验。然而，有时我们的 JS 和 CSS 文件由于缓存或 CDN 而被缓存。如果缓存未清理或浏览器被迫刷新，我们可能无法加载最新的 JS 和 CSS。
为了解决这些问题，WordPress 一直都有相应的解决方案。下面的汇站网教您如何自动加载最新的 JS 和 CSS 文件。
按版本号更新
最常见的是将版本号参数添加到 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?<strong>ver=1.0.0</strong>
，如果我们的 css 代码更新了，我们只需要更改
wp_enqueue_style()
中的版本号参数即可，比如更改为
，那输入的文件网址就应该为
customstyle.css?<strong>ver=1.0.1</strong>
这样，就达到了自动更新文件的效果。
按时间戳更新
尽管版本号是一个可行的方案，但每次修改 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?<strong>ver=1584639960</strong>
，每次我们修改了
customstyle.css
文件，都会自动更新这个时间戳，达到了及时更新参数的目的。
转载请注明：汇站网 » WordPress 启用 CDN 加速/缓存以自动加载最新的 js 和 CSS 文件
