WordPress如何实现博主在线状态实时显示功能

2026-01-02 68 0

眼尖的朋友们应该发现了在PC文章页面的右侧多了一个小工具,博主的在线状态检测这个挺不错的作为一个逛博客的人来说,给自己博客加一个状态,让访问的博友们也知道当前博主是否在线。

功能特点:

✅ 实时在线状态检测 :准确判断博主是否在线。
✅ 每1分钟自动刷新 :无需手动刷新页面。
✅ 本次在线时长显示 :实时显示当前登录会话的在线时长。
✅ 总在线时长统计 :累计显示博主的总在线时间。
✅ 最后活跃时间显示 :离线时显示最后活跃时间。
✅ 所有访客可见 :无论使用什么设备或浏览器,都能看到正确状态。
✅ 智能状态管理 :超过10分钟不活动自动转为离线状态。

技术实现思路:

1. 核心检测逻辑
使用WordPress的用户系统和选项API实现全局在线状态管理:

当管理员登录时,设置全局在线状态为"在线"
当管理员登出时,设置全局在线状态为"离线"
记录管理员最后活跃时间,定期更新
超过10分钟不活动自动转为离线

2. 实时更新机制
采用AJAX技术实现无刷新状态更新:

前端每60秒发送一次AJAX请求
后端检查并返回最新在线状态
动态更新页面显示,无需刷新

3. 数据持久化
使用WordPress的元数据和选项API存储状态数据:

登录时间 → 用户元数据
最后活跃时间 → 用户元数据 + 全局选项
总在线时长 → 用户元数据
在线状态 → 全局选项

核心代码解析:

1. 在线状态管理

// 登录时更新在线状态
add_action('wp_login', 'record_admin_login_time', 10, 2);
function record_admin_login_time($user_login, $user) {
    if (user_can($user, 'manage_options')) {
        // 更新用户登录时间
        update_user_meta($user->ID, 'last_login_time', time());
        update_user_meta($user->ID, 'last_active_time', time());
        
        // 更新全局在线状态
        update_option('admin_online_status', 'online');
        update_option('admin_last_active_time', time());
        update_option('admin_online_user_id', $user->ID);
    }
}

// 登出时更新在线状态
add_action('wp_logout', 'record_admin_logout_time');
function record_admin_logout_time() {
    $user = wp_get_current_user();
    if (user_can($user, 'manage_options')) {
        // 计算并更新总在线时长
        // ...
        
        // 更新全局在线状态为离线
        update_option('admin_online_status', 'offline');
        update_option('admin_last_active_time', time());
        delete_option('admin_online_user_id');
    }
}

2. 定时状态检查

// 检查管理员是否长时间不活动
function check_admin_inactivity() {
    $last_active = get_option('admin_last_active_time');
    $current_time = time();
    if ($last_active && ($current_time - $last_active > 600)) {
        // 超过10分钟不活动,更新为离线
        update_option('admin_online_status', 'offline');
        delete_option('admin_online_user_id');
    }
}

3. AJAX状态更新

// 每60秒刷新一次在线状态
setInterval(function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            // 更新在线状态显示
            // ...
        }
    };
    xhr.open("GET", "/wp-admin/admin-ajax.php?action=check_admin_online", true);
    xhr.send();
}, 60000);

如果大家不懂运用的话,可以把我的文字需求直接给到cursor或者国内的Trea让它们直接来给你生成。有一个哈要把你自己的主题文件下载下来选择文件夹的时候选择你的主题文件然后在提需求。


免责声明
本站内容(教程、软件、资料等)仅供个人学习研究之用,严禁用于商业或非法目的,使用风险自负。博客部分内容来源自网络,版权归属原作者,本站不承担相关版权责任。请在试用下载后24小时内删除相关资源,支持正版。
如涉及侵权,请通过邮件:gouweicaosheji#163.com与我联系处理。

相关文章

Scratch图形化求水仙花数及奇偶数
Python中的素数、最大公约数最小公约数、斐波那契数列
Python中的回文数和水仙花数
博主保姆级教程:足不出户,30分钟在网上免费申领你的个体营业执照
Scratch图形化编程模块化指令说明
老表的由来,为啥很多陌生人一打招呼就是喊老表。

发布评论