如何从WordPress后台强制对应公告页面自动刷新？

当然可以实现！当你在WordPress后台更新公告页面时，完全能让对应楼层的PC浏览器自动刷新页面。结合你的场景，我整理了几个实用方案：

方法1：WebSocket实时推送（零延迟刷新） #

这是最精准、实时性最强的方案，适合需要立刻看到更新的场景。核心思路是：当你在后台保存公告页面时，通过WebSocket向对应PC的浏览器发送刷新信号，浏览器收到信号后自动重载页面。

具体实现步骤： #

1. 添加WordPress后台钩子：在主题的functions.php中加入代码，监听页面保存事件，触发WebSocket信号发送：

add_action('save_post', 'trigger_refresh_on_announcement_update', 10, 3);
function trigger_refresh_on_announcement_update($post_id, $post, $update) {
    // 仅处理指定的公告页面（替换成你的公告页面ID列表）
    $target_page_ids = [1, 2, 3, 4]; // 对应PC1到PC4的公告页面ID
    if ($post->post_type !== 'page' || !in_array($post_id, $target_page_ids)) {
        return;
    }

    // 连接WebSocket服务器并发送刷新指令
    $socket = fsockopen('localhost', 8080); // 替换为你的WebSocket服务器地址
    if ($socket) {
        $refresh_cmd = json_encode(['page_id' => $post_id]);
        fwrite($socket, $refresh_cmd);
        fclose($socket);
    }
}

2. 部署简易WebSocket服务器：可以用Node.js快速搭建一个轻量服务器，比如用ws包：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        // 向所有连接的客户端广播刷新指令
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

3. 前端监听WebSocket信号：在公告页面的模板（比如page.php或自定义模板）中加入JS代码，监听信号并刷新：

document.addEventListener('DOMContentLoaded', () => {
    const currentPageId = <?php echo get_the_ID(); ?>;
    const ws = new WebSocket('ws://你的服务器IP:8080');

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        // 仅刷新对应ID的页面
        if (data.page_id === currentPageId) {
            location.reload();
        }
    };
});

优缺点：实时性拉满，但需要额外部署WebSocket服务，适合对刷新延迟要求高的场景。

方法2：定时轮询检查页面更新（无需额外服务） #

如果不想部署额外服务，这个方案更简单：让前端浏览器定时检查页面的最后更新时间，发现更新就自动刷新。

具体实现步骤： #

1. 在公告页面输出更新时间：在主题模板中添加隐藏元素，输出页面最后修改时间：

<!-- 放在公告页面的任意位置，比如footer前 -->
<span id="page-last-updated" style="display:none;"><?php echo get_post_modified_time('U'); ?></span>

2. 前端定时检查并刷新：在页面中加入JS代码，每30秒（可调整）检查一次更新时间：

document.addEventListener('DOMContentLoaded', () => {
    const pageId = <?php echo get_the_ID(); ?>;
    const storageKey = `announcement-update-${pageId}`;
    let lastKnownTime = localStorage.getItem(storageKey) || document.getElementById('page-last-updated').textContent;

    setInterval(() => {
        // 通过AJAX获取最新的更新时间
        fetch(window.location.href + '?get-update-time=1')
            .then(res => res.text())
            .then(currentTime => {
                if (currentTime !== lastKnownTime) {
                    localStorage.setItem(storageKey, currentTime);
                    location.reload();
                }
            });
    }, 30000); // 每30秒检查一次，可根据需求调整
});

3. 处理AJAX请求：在functions.php中添加代码，响应前端的时间查询请求：

add_action('template_redirect', 'handle_update_time_query');
function handle_update_time_query() {
    if (isset($_GET['get-update-time']) && is_page()) {
        echo get_post_modified_time('U');
        exit;
    }
}

优缺点：无需额外服务，实现简单，但存在最多30秒的延迟，适合对实时性要求不高的场景。

方法3：利用WordPress REST API实现无侵入式检查 #

如果不想修改主题模板，可以直接调用WordPress自带的REST API获取页面更新时间，逻辑和轮询类似，但不需要在页面中嵌入隐藏元素。

前端代码示例： #

document.addEventListener('DOMContentLoaded', () => {
    const pageId = <?php echo get_the_ID(); ?>;
    const storageKey = `announcement-api-update-${pageId}`;
    let lastKnownTime = localStorage.getItem(storageKey) || Date.now();

    setInterval(() => {
        // 调用REST API获取页面信息
        fetch(`/wp-json/wp/v2/pages/${pageId}`)
            .then(res => res.json())
            .then(pageData => {
                const updatedTime = new Date(pageData.modified_gmt).getTime();
                if (updatedTime > lastKnownTime) {
                    localStorage.setItem(storageKey, updatedTime);
                    location.reload();
                }
            });
    }, 60000); // 每60秒检查一次
});

优缺点：无需修改模板，利用WordPress原生能力，但同样存在延迟，且需要确保REST API是开启状态（默认开启）。

注意事项 #

• 如果你的WordPress使用了缓存插件，需要确保页面更新时间能实时获取，比如给公告页面添加缓存排除规则。
• WebSocket服务器需要设置开机自启，避免服务器重启后服务中断。
• 轮询间隔不要设置过短，否则会增加服务器负载，建议30-60秒为宜。

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