如何让WordPress CSS修改对缓存旧版本的所有浏览器生效

你当前使用filemtime()作为CSS版本号的逻辑本身是正确的：每次CSS文件修改后，文件修改时间戳会自动更新，CSS资源的URL后缀版本号会同步变化，浏览器会将其识别为新的独立资源，自动拉取新版本。如果该方案没有生效，按以下步骤排查和调整即可：

• 第一步：检查加载代码的正确性
  首先确认你修改的文件是主题目录下的functions.php（注意你提到的function.php文件名拼写错误，少了末尾的s，这是常见的失效原因），且样式加载代码正确挂载到了WordPress的资源加载钩子上，完整的正确代码如下：

  function my_theme_load_custom_styles() {
      wp_enqueue_style('my-theme-style', get_template_directory_uri() . '/style.css', array(), filemtime(get_template_directory() . '/style.css'), false);
  }
  add_action('wp_enqueue_scripts', 'my_theme_load_custom_styles');
  

  修改后打开网站前端页面源码，搜索style.css的引用链接，确认URL末尾带有格式为?ver=数字时间戳的后缀，说明版本号已正常生成。

• 第二步：排查各层缓存覆盖问题
  如果版本号已正常生成但仍加载旧CSS，属于缓存层未识别新URL导致，按需处理即可：

  • WordPress缓存插件：如果你使用了WP Rocket、W3 Total Cache、WP Super Cache这类缓存插件，修改CSS后清空插件的全部缓存即可，也可以在插件设置中开启静态资源变更自动刷新缓存的配置
  • CDN/服务端缓存：如果站点接入了CDN，或者服务器Nginx/Apache配置了静态资源缓存规则，需要确认缓存规则是按完整URL（含query参数）缓存资源，不要忽略版本号参数；修改CSS后可以手动刷新CDN的静态资源缓存
  • 服务器缓存配置：可以调整web服务器的CSS缓存规则，示例Nginx配置参考：

    location ~* \.(css|js)$ {
        expires 365d;
        add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    }
    

• 第三步：可选的手动版本号方案
  如果不想依赖文件修改时间戳，也可以用手动指定版本号的方式，每次修改CSS后手动更新版本参数即可，示例代码：

  wp_enqueue_style('my-theme-style', get_template_directory_uri() . '/style.css', array(), '1.0.3', false);
  

  每次修改CSS后将1.0.3修改为更大的版本号即可100%触发浏览器拉取新资源。

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