WordPress自定义主题定时Banner切换及Nginx缓存适配问题求助

问题场景 #

自定义主题需要实现Banner的定时切换+到期自动移除，但Nginx整页缓存导致访客无法实时看到最新Banner，页面刷新后旧Banner依然显示。

已尝试的无效方案 #

创建了banner-automation自定义路由，通过前端JS携带timestamp参数调用该路由绕过缓存，后端PHP通过此路由加载最新Banner逻辑，但未达到预期效果。

可行解决思路 #

1. Nginx针对性缓存禁用 #

直接在Nginx配置中对Banner相关请求强制禁用缓存，避免缓存拦截动态内容：

# 针对自定义路由禁用缓存
location ~* /banner-automation {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
    add_header Pragma "no-cache";
    add_header X-Cache-Status "Bypassed";
}

# 如果是主题内直接渲染的Banner，可针对Banner所在页面调整整页缓存
location / {
    set $skip_cache 0;
    # 判断是否为包含Banner的目标页面（比如首页）
    if ($request_uri ~* "^/$") {
        set $skip_cache 1;
    }
    # 应用缓存跳过规则
    proxy_cache_bypass $skip_cache;
    proxy_no_cache $skip_cache;
}

2. 前端+后端直接联动（无需AJAX路由） #

放弃单独的自定义路由，直接在主题模板和functions.php中整合逻辑，避免AJAX的缓存问题：

后端逻辑（functions.php）

// 获取Banner状态：是否显示
function get_banner_display_status() {
    // 从主题选项读取Banner结束时间戳（可在后台设置）
    $end_timestamp = get_theme_mod('banner_end_time', time() + 86400);
    return time() < $end_timestamp;
}

// 传递Banner结束时间到前端
function banner_enqueue_scripts() {
    $end_time = get_theme_mod('banner_end_time', time() + 86400);
    wp_add_inline_script('jquery', "const bannerEndTime = {$end_time};", 'before');
}
add_action('wp_enqueue_scripts', 'banner_enqueue_scripts');

前端模板（示例：header.php）

<?php if (get_banner_display_status()) : ?>
<div id="timed-banner" class="banner-container">
    <!-- Banner内容，直接从主题选项读取 -->
    <img src="<?php echo esc_url(get_theme_mod('banner_image')); ?>" alt="定时Banner">
</div>
<?php endif; ?>

<script>
const bannerEl = document.getElementById('timed-banner');
const hasHiddenBanner = localStorage.getItem('banner-hidden');

// 页面加载先检查本地存储，避免刷新后重复显示已过期Banner
if (hasHiddenBanner === 'true' && bannerEl) {
    bannerEl.remove();
} else {
    // 检查是否到期，到期则移除并记录状态
    const checkBanner = () => {
        const now = Math.floor(Date.now() / 1000);
        if (now >= bannerEndTime && bannerEl) {
            bannerEl.remove();
            localStorage.setItem('banner-hidden', 'true');
        }
    };
    checkBanner();
    // 定时检查，适配用户长时间停留页面的场景
    setInterval(checkBanner, 60000);
}
</script>

3. 缓存插件规则适配 #

如果使用WordPress缓存插件（如WP Rocket、W3 Total Cache），可添加以下规则：

• 排除get_banner_display_status()函数的输出被缓存
• 对包含Banner的页面，将banner_end_time作为缓存键的一部分，确保时间更新后缓存自动失效

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