WordPress中wp_enqueue_style加载的CSS修改后不更新如何解决

问题复现 #

开发WordPress插件时通过如下代码引入CSS样式，样式文件可正常加载，但CSS文件的最新修改内容始终无法同步生效：

// style imports
function themeslug_enqueue_style() {
    wp_enqueue_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__), false );
    wp_enqueue_style( 'my-style', plugins_url('/assets/mystyle.css', __FILE__), false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action('showForm', 'showInterface');

对应插件目录结构：

turnvoer-calculator
    assets
       mystyle.css
    turnover-calculator.php

根本原因 #

wp_enqueue_style函数的第四个参数为资源版本号参数，你当前传入参数位置错误：第三个参数本应传入样式依赖数组，你传入了false，版本号参数直接使用了默认值false。这种情况下WordPress会默认使用当前WordPress程序的版本号作为CSS资源的版本参数，浏览器会对固定版本号的静态资源做长期缓存，不会主动拉取服务器上的最新文件，导致你修改CSS后页面加载的还是旧的缓存文件。

修复方案 #

给自定义样式配置动态版本号，使用PHP的filemtime()函数获取CSS文件的最后修改时间作为版本号，每次修改CSS文件后版本号会自动更新，浏览器检测到版本号变化就会自动拉取最新版的CSS文件，不会读取本地缓存。
修复后的完整代码如下：

// style imports
function themeslug_enqueue_style() {
    // 注册插件主文件路径常量，方便统一调用
    if ( ! defined( 'TURNOVER_CALC_PLUGIN_FILE' ) ) {
        define( 'TURNOVER_CALC_PLUGIN_FILE', __FILE__ );
    }

    // 引入bootstrap，可填写你实际使用的bootstrap固定版本号
    wp_enqueue_style( 
        'bootstrap', 
        plugins_url('/bootstrap/css/bootstrap.css', TURNOVER_CALC_PLUGIN_FILE), 
        array(), 
        '5.3.2' 
    );

    // 自定义样式用文件最后修改时间作为动态版本号
    $mystyle_path = plugin_dir_path( TURNOVER_CALC_PLUGIN_FILE ) . 'assets/mystyle.css';
    $mystyle_version = file_exists( $mystyle_path ) ? filemtime( $mystyle_path ) : '1.0.0';
    wp_enqueue_style( 
        'my-style', 
        plugins_url('/assets/mystyle.css', TURNOVER_CALC_PLUGIN_FILE), 
        array('bootstrap'), // 声明依赖bootstrap，等bootstrap加载完再加载自定义样式，避免样式覆盖失效
        $mystyle_version 
    );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action('showForm', 'showInterface');

额外注意事项 #

• 本地调试阶段可以打开浏览器开发者工具，在网络设置里勾选「禁用缓存（开发者工具打开时）」，避免调试时缓存干扰
• 你当前的插件目录名turnvoer-calculator存在拼写错误（正确拼写应为turnover-calculator），目前样式能正常加载说明路径和当前实际目录名匹配，后续如果调整目录命名注意同步修正路径
• 不要直接写死固定版本号比如1.0.0，否则后续更新CSS后还是会存在缓存不更新的问题

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