WordPress插件：带Secure/HttpOnly的会话Cookie横幅问题排查

核心问题分析 #

你遇到的两个问题根源分别是：

• Cookie提前创建：原逻辑中PHP页面加载时直接写入Cookie，没有关联横幅消失的动作
• 子页面跳转仍显示：Cookie默认路径为当前页面路径（如/login），首页无法识别该Cookie

最终实现方案（WordPress插件形式） #

通过AJAX触发后端设置HttpOnly Cookie+根路径Cookie配置解决问题，以下是完整代码：

1. 插件主PHP文件（welcome-banner.php）

<?php
/**
 * Plugin Name: 欢迎横幅（HttpOnly版）
 * Description: 首次访问显示7秒横幅，用HttpOnly Cookie控制后续不显示
 * Version: 1.0
 */

// 注册AJAX接口，用于设置Cookie
add_action('wp_ajax_set_banner_cookie', 'set_banner_cookie');
add_action('wp_ajax_nopriv_set_banner_cookie', 'set_banner_cookie'); // 允许未登录用户调用

function set_banner_cookie() {
    // 设置HttpOnly、根路径的会话Cookie
    setcookie(
        'banner_read',
        '1',
        [
            'expires' => 0, // 会话结束后失效
            'path' => '/', // 全站生效
            'secure' => is_ssl(), // 自动适配HTTPS环境
            'httponly' => true, // 核心：标记为HttpOnly
            'samesite' => 'Strict' // 增强CSRF防护
        ]
    );
    wp_send_json_success();
}

// 加载样式与脚本
add_action('wp_enqueue_scripts', 'enqueue_banner_assets');

function enqueue_banner_assets() {
    wp_enqueue_style('welcome-banner-css', plugin_dir_url(__FILE__) . 'welcome-banner.css');
    
    $show_banner = !isset($_COOKIE['banner_read']);
    wp_enqueue_script('welcome-banner-js', plugin_dir_url(__FILE__) . 'welcome-banner.js', ['jquery'], null, true);
    wp_localize_script('welcome-banner-js', 'BannerConfig', [
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'showBanner' => $show_banner
    ]);
}

// 输出横幅HTML（仅当无Cookie时）
add_action('wp_footer', 'render_welcome_banner');

function render_welcome_banner() {
    if (!isset($_COOKIE['banner_read'])) {
        ?>
        <div id="welcome-banner" class="welcome-banner">
            <p>欢迎访问我的个人网站！</p>
        </div>
        <?php
    }
}

2. JS脚本文件（welcome-banner.js）

jQuery(document).ready(function($) {
    if (BannerConfig.showBanner) {
        const $banner = $('#welcome-banner');
        $banner.show();
        
        // 7秒后隐藏横幅，再触发AJAX设置Cookie
        setTimeout(() => {
            $banner.fadeOut('slow', () => {
                $.post(BannerConfig.ajaxUrl, { action: 'set_banner_cookie' }, function() {
                    console.log('横幅Cookie已设置');
                }).fail(function(err) {
                    console.error('设置Cookie失败:', err);
                });
            });
        }, 7000);
    }
});

3. CSS样式文件（welcome-banner.css）

.welcome-banner {
    display: none; /* 默认隐藏，由JS控制显示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #2d3748;
    color: #fff;
    padding: 16px;
    text-align: center;
    z-index: 9999;
}

问题修复说明 #

1. Cookie提前创建问题：

   • 取消页面加载时直接设置Cookie的逻辑，改为横幅消失后通过AJAX请求后端接口，由PHP写入HttpOnly Cookie，确保动作与横幅消失绑定

2. 子页面跳转仍显示问题：

   • 设置Cookie时指定path=/，让Cookie在整个域名下的所有页面生效，不管是首页还是子页面，都能识别该Cookie状态

使用方法 #

1. 将三个文件放在WordPress插件目录的welcome-banner文件夹中
2. 在WP后台启用该插件即可

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