负载均衡与CDN环境下WordPress CSS无法即时更新的解决方法

一、先改WordPress的CSS入队代码（从根源避免缓存复用） #

你当前的CSS版本号是固定的1.0.0，CDN会一直缓存这个标识对应的文件。改成动态版本号，每次CSS文件修改后自动生成新的版本标识，让CDN识别为新文件，直接拉取最新内容：

替换原代码为：

function wpscripts() {
    // 用文件修改时间作为版本号，每次修改CSS都会自动更新
    $style_version = filemtime(get_stylesheet_directory() . '/styles.css');
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() .'/styles.css', array(), $style_version );
}
add_action( 'wp_enqueue_scripts', 'wpscripts' );

修改后，前端引入的CSS URL会带上类似styles.css?ver=1699999999的动态参数，CDN会将其判定为新文件，不再复用旧缓存。

二、配置Google CDN的缓存规则（确保更新时能快速生效） #

1. 调整缓存过期策略 #

结合你提供的CDN设置截图，建议：

• 对CSS、JS这类静态资源，设置7天左右的缓存过期时间，配合上面的动态版本号，日常更新靠版本号触发CDN拉新，无需频繁手动刷新。
• 若有特殊场景需要即时生效，可临时将CSS文件的缓存时间设为5分钟以内，但不推荐长期这么做，会增加源站压力。

2. 手动强制刷新CDN缓存 #

如果已经修改了CSS但未改版本号，或需要紧急更新：

• 登录Google Cloud控制台，找到对应Load Balancer的CDN资源。
• 找到「缓存刷新（Cache Purge）」选项，输入CSS文件的完整URL（比如https://你的域名/wp-content/themes/你的主题/styles.css），或直接刷新整个主题静态资源路径（比如/wp-content/themes/你的主题/），提交后CDN会清除对应缓存，下次访问即可获取最新文件。

3. 自动化缓存失效（可选） #

如果需要更自动化的更新流程，可在WordPress主题编辑器或部署脚本中，添加逻辑：每次修改CSS后，调用Google Cloud API自动刷新对应文件的CDN缓存。此方法需具备基础开发能力，适合批量部署场景。

三、验证效果 #

修改代码或刷新CDN后，按Ctrl+F5强制刷新浏览器（规避浏览器本地缓存），用域名访问网站，查看CSS是否更新。若仍未生效，可通过浏览器开发者工具的「网络」面板，检查CSS文件响应头中的Cache-Control和CDN-Cache状态，确认CDN是否拉取了最新内容。

内容的提问来源于stack exchange，提问作者CuppaCoffee