WordPress 开启 CDN/缓存后如何自动加载最新的 JS 和 CSS 文件
为 WordPress 网站启用缓存或 CDN（内容分发网络）可以显著提升加载速度，改善用户体验。然而，这也可能导致浏览器或 CDN 节点缓存了旧的 JavaScript 和 CSS 文件。如果未手动清除缓存或强制刷新浏览器，用户可能无法立即获取到更新后的前端资源。
为了解决此问题，WordPress 提供了成熟的方案，确保文件更新后能自动加载最新版本。本文将介绍两种主流方法。
方法一：通过版本号参数更新
这是最常用的方法，核心是为资源 URL 添加一个查询参数（通常为 ver 或 version）。当参数值改变时，浏览器和大多数 CDN 会将其视为一个新资源，从而绕过缓存。
在 WordPress 开发中，应使用 wp_enqueue_script() 函数引入 JS 文件，使用 wp_enqueue_style() 函数引入 CSS 文件。这两个函数都接受一个版本参数。
以下是一个为 CSS 文件添加静态版本号的示例：
/**
* 通过 wp_enqueue_style 引入 CSS 文件（静态版本号）
*/
function my_theme_enqueue_styles() {
wp_enqueue_style(
'my-theme-style', // 句柄
get_stylesheet_directory_uri() . '/assets/css/theme-style.css', // 文件 URL
array(), // 依赖项
'1.0.0' // 版本号
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );上述代码会在页面中生成如下链接：
<link rel='stylesheet' id='my-theme-style-css' href='https://yourdomain.com/wp-content/themes/your-theme/assets/css/theme-style.css?ver=1.0.0' media='all' />请注意 URL 末尾的 ?ver=1.0.0。当你更新了 CSS 文件后，只需在 wp_enqueue_style() 函数中将版本号参数修改为 '1.0.1'，新的 URL 就会变成 theme-style.css?ver=1.0.1，从而触发浏览器加载新文件。
缺点： 每次文件变更都需要手动更新版本号，在频繁开发的场景下容易遗漏，不够自动化。
方法二：通过文件修改时间戳自动更新
更科学和自动化的方法是使用文件本身的最后修改时间戳作为版本号。这样，每当文件内容被保存，时间戳就会变化，版本参数也随之更新，无需人工干预。
WordPress 核心函数 filemtime() 可以获取文件的最后修改时间戳。我们将它用于版本参数：
/**
* 通过 wp_enqueue_style 引入 CSS 文件（动态时间戳版本）
*/
function my_theme_enqueue_styles() {
$css_file_path = get_stylesheet_directory() . '/assets/css/theme-style.css';
$css_file_url = get_stylesheet_directory_uri() . '/assets/css/theme-style.css';
wp_enqueue_style(
'my-theme-style',
$css_file_url,
array(),
filemtime( $css_file_path ) // 关键：使用文件修改时间戳作为版本号
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );此时生成的 HTML 链接会类似于：
<link rel='stylesheet' id='my-theme-style-css' href='https://yourdomain.com/wp-content/themes/your-theme/assets/css/theme-style.css?ver=1678886400' media='all' />版本号 ver=1678886400 是一个 Unix 时间戳，对应文件的最后保存时间。任何对 theme-style.css 的修改都会更新这个时间戳，从而实现版本参数的自动更新。
重要提示： 此方法同样适用于 wp_enqueue_script() 函数来加载 JavaScript 文件。
总结与最佳实践
1. 首选时间戳方案： 在主题或插件开发中，强烈推荐使用 filemtime() 动态生成版本号。这是 WordPress 社区的通用最佳实践，能彻底解决缓存更新问题。
2. 确保路径正确： 使用 get_stylesheet_directory()（返回服务器路径）来获取 filemtime() 所需的参数，使用 get_stylesheet_directory_uri()（返回 URL）来指定资源地址。
3. CDN 兼容性： 大多数现代 CDN 服务（如 Cloudflare、KeyCDN）都默认支持通过查询字符串区分资源版本。如果你的 CDN 配置忽略了查询字符串，需在其设置中启用“查询字符串缓存”或类似选项。
通过实施上述方法，你可以确保用户在 WordPress 站点更新后，总能加载到最新的样式表和脚本，同时继续享受 CDN 和缓存带来的性能优势。