如何在WordPress中实现每秒更新的全局计数器？

一、后端PHP逻辑（安全读写数据库） #

直接前端操作数据库不安全，用WordPress内置的AJAX接口来处理计数器的读取和更新，把以下代码加到主题的functions.php里：

// 获取当前计数器值
function get_counter_value() {
    // 从wp_options取counter值，默认0（字段不存在时用这个值）
    $counter = get_option('counter', 0);
    wp_send_json_success($counter);
}
// 登录/未登录用户都能调用这个接口
add_action('wp_ajax_get_counter', 'get_counter_value');
add_action('wp_ajax_nopriv_get_counter', 'get_counter_value');

// 更新计数器值
function update_counter_value() {
    // 加个1秒锁，防止多用户并发请求导致计数混乱
    if (get_transient('counter_update_lock')) {
        wp_send_json_error('更新中，请稍等');
    }
    set_transient('counter_update_lock', true, 1);

    $current_counter = get_option('counter', 0);
    $new_counter = $current_counter + 1;
    update_option('counter', $new_counter);
    
    delete_transient('counter_update_lock');
    wp_send_json_success($new_counter);
}
add_action('wp_ajax_update_counter', 'update_counter_value');
add_action('wp_ajax_nopriv_update_counter', 'update_counter_value');

二、前端JS逻辑（读取初始值+每秒更新） #

替换你原来的HTML/JS代码，改成从后端拉取初始值，再每秒触发更新：

<!-- 显示计数器的元素 -->
<div id="counter"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const counterDom = document.getElementById('counter');
    let currentCount;

    // 先拉取数据库里的初始计数
    fetch('/wp-admin/admin-ajax.php?action=get_counter')
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                currentCount = data.data;
                counterDom.textContent = currentCount;
                // 拿到初始值后开始每秒更新
                setInterval(updateCounter, 1000);
            }
        })
        .catch(err => console.error('获取计数失败:', err));

    // 每秒更新计数的函数
    function updateCounter() {
        fetch('/wp-admin/admin-ajax.php?action=update_counter')
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    currentCount = data.data;
                    counterDom.textContent = currentCount;
                }
            })
            .catch(err => console.error('更新计数失败:', err));
    }
});
</script>

三、额外注意点 #

• 如果你的站点URL结构特殊，/wp-admin/admin-ajax.php路径不对，可以换成<?php echo admin_url('admin-ajax.php'); ?>（要在PHP模板里用，短代码或自定义模板都支持）。
• 要是觉得每秒一次AJAX请求太占资源，可以调整更新间隔，比如5秒一次；或者用WebSocket实现更高效的实时同步，不过普通需求用AJAX完全够用。

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