WordPress网站浏览器缓存问题求助：修改内容无法实时展示

以下是针对浏览器缓存导致静态资源（CSS、图片等）无法实时更新的具体解决方法：

• 给静态资源添加动态版本号
  这是最有效的方案，让浏览器直接识别资源已更新。

  • 对于CSS/JS：在主题的functions.php中修改资源加载代码，用文件修改时间作为版本号，每次修改文件后版本自动变化：

    function enqueue_my_theme_assets() {
        // 样式表版本号
        $style_path = get_template_directory() . '/style.css';
        $style_version = filemtime($style_path);
        wp_enqueue_style('main-style', get_stylesheet_uri(), array(), $style_version);
        
        // JS文件版本号
        $script_path = get_template_directory() . '/js/main.js';
        $script_version = filemtime($script_path);
        wp_enqueue_script('main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), $script_version, true);
    }
    add_action('wp_enqueue_scripts', 'enqueue_my_theme_assets');
    

  • 对于图片：在模板文件调用图片时，附加基于文件修改时间的版本参数：

    $image_file = get_template_directory() . '/assets/images/banner.jpg';
    $image_url = get_template_directory_uri() . '/assets/images/banner.jpg';
    $image_version = filemtime($image_file);
    echo '<img src="' . esc_url($image_url . '?v=' . $image_version) . '" alt="Banner">';
    

• 配置服务器端缓存策略
  通过服务器配置控制浏览器缓存规则，兼顾缓存效率和更新及时性：

  • Apache（修改.htaccess文件）：

    <IfModule mod_expires.c>
        ExpiresActive On
        # CSS/JS 缓存1周，允许验证更新
        ExpiresByType text/css "access plus 1 week"
        ExpiresByType application/javascript "access plus 1 week"
        # 图片类资源缓存1个月
        ExpiresByType image/jpeg "access plus 1 month"
        ExpiresByType image/png "access plus 1 month"
        ExpiresByType image/webp "access plus 1 month"
    </IfModule>
    <IfModule mod_headers.c>
        # 启用ETag验证，让浏览器对比资源是否更新
        FileETag MTime Size
        Header set Cache-Control "public, must-revalidate"
    </IfModule>
    

  • Nginx（修改站点配置文件）：

    location ~* \.(css|js|jpe?g|png|webp)$ {
        expires 1w;
        add_header Cache-Control "public, must-revalidate";
        etag on;
    }
    

• 利用缓存插件自动管理资源版本
  如果你使用WP Rocket、W3 Total Cache等缓存插件，直接开启插件内的「静态资源版本化」或「强制资源刷新」功能，插件会自动为CSS、JS、图片添加版本标识，无需手动修改代码。

• 临时引导用户强制刷新
  可以在站点显眼位置添加提示，告知用户遇到显示异常时，按Ctrl+F5（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，绕过本地缓存。

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