全站公告弹窗：重要信息一眼触达

功能简介

全站公告弹窗可在全站任意页面以模态框形式弹出一条公告（如活动通知、维护提示、合规声明等），内容由管理员在后台自由填写，每次会话仅弹出一次。

如何开启

进入 WordPress 后台 → 「Vela主题设置」页面的「功能开关」分区 → 找到「全站公告弹窗」→ 勾选启用，并在「公告内容」文本框中填写要展示的文案，保存即可。

效果与适用场景

• 公告内容支持图文混排（后台以文本/HTML 填写）。
• 同一浏览器会话内只弹出一次，避免反复打扰。
• 适合活动预告、备案说明、临时通知等。

备注

仅在前台访客端弹出；关闭开关或清空公告内容后即不再弹出。

实现代码

以下为「全站公告弹窗」的核心实现（取自 features.js、loader.php 与 features.css）。

/* ---------- 全站公告弹窗（features.js 片段） ---------- */
if (C.notice && C.notice_text) {
    var seenKey = 'vela_notice_seen';
    var storeVal;
    try { storeVal = window.sessionStorage.getItem(seenKey); } catch (e) { storeVal = null; }
    if (!storeVal) {
        var ov = doc.createElement('div');
        ov.className = 'vela-notice-overlay';
        ov.innerHTML = '<div class="vela-notice-modal"><button class="vela-notice-close" aria-label="关闭">×</button><div class="vela-notice-body">' + C.notice_text + '</div></div>';
        doc.body.appendChild(ov);
        var close = function () {
            ov.remove();
            try { window.sessionStorage.setItem(seenKey, '1'); } catch (e) { /* ignore */ }
        };
        ov.querySelector('.vela-notice-close').addEventListener('click', close);
        ov.addEventListener('click', function (e) { if (e.target === ov) { close(); } });
    }
}

<?php
// 仅当「全站公告弹窗」开启时，把后台填写的公告内容注入前端配置（loader.php 片段）
if (vela_feature_enabled('notice')) {
    $opt = vela_features_option();
    $config['notice_text'] = isset($opt['notice_text']) ? wp_kses_post($opt['notice_text']) : '';
}

/* 全站公告弹窗（features.css 片段） */
.vela-notice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}
.vela-notice-modal {
    position: relative;
    width: min(520px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.vela-notice-modal h1, .vela-notice-modal h2, .vela-notice-modal h3 { margin-top: 0; }
.vela-notice-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #999;
}
.vela-notice-close:hover { color: #333; }

公告内容由后台「公告内容」填写，经 loader.php 注入 velaFeatures.notice_text；前端用 sessionStorage 保证同一会话只弹一次。