l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中显示实时在线用户（简单方法）

如何在 WordPress 中显示实时在线用户（简单方法）

Bug编译狮

Bug编译狮

在 WordPress 网站上显示实时在线用户的功能可以通过多种方式实现，这里我将介绍一种简单的方法：使用 wp_pingpress 插件结合一些简单的 HTML 和 JavaScript 代码来动态展示在线用户数。

步骤：

  1. 安装和激活插件：

    • 打开 WordPress 管理后台。
    • 导航到“插件” > “添加新插件”。
    • 搜索并找到 wp_pingpress 插件，然后点击“安装”按钮。
    • 安装完成后，点击“激活”。

  2. 设置在线用户显示：

    • 登录到您的 WordPress 帐户，进入“编辑”模式的页面或博客页面。
    • 将以下 JavaScript 代码插入页面顶部或底部的 <head> 标签内，以确保它在页面加载时就生效：
<script>
(function() {
    var usersOnline = <?php echo get_option('wp_pingpress_online'); ?>;
    if (usersOnline) {
        document.getElementById("online-users").innerHTML = "在线用户：" + usersOnline;
    }
})();
</script>

<div id="online-users"></div>

  1. 配置插件：

    • 进入插件管理界面，在“选项”部分找到“在线用户计数器”。
    • 在“在线用户计数器”下拉菜单中选择您喜欢的样式，例如“数字”，“百分比”等。
    • 设置其他相关参数，如“是否在评论区显示”、“是否在侧边栏显示”等。

  2. 调整显示位置：

    • 通过修改上述 JavaScript 代码中的 ID 或者直接在页面结构中定位元素，可以改变在线用户显示的位置和样式。

  3. 测试与优化：

    • 测试您的网站，确保在线用户数量正确显示。
    • 如果有需要，可以进一步调整样式、颜色或字体大小，以适应您的网站设计风格。

示例代码解释：

  • <?php echo get_option('wp_pingpress_online'); ?>: 这行代码用于获取 WordPress 自定义选项中的在线用户数量。这个值通常由插件自动生成，代表当前在线用户数。

  • document.getElementById("online-users").innerHTML = ...: 这段代码将在线用户数量的内容替换为实际的 HTML 内容，这样可以在网页上动态显示在线用户的信息。

  • 使用 <div id="online-users">...</div> 来创建一个容器元素，用于显示在线用户信息。你可以根据需要调整这个 ID 的值。

这种方法简单易用，无需复杂的编程知识，只需在页面上添加几行简单的 JavaScript 代码即可实现实时在线用户数的动态显示。通过这种方式，您可以轻松地在 WordPress 站点上提供即时反馈，增强用户体验。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

课程目标

  • 理解如何在 WordPress 中使用实时在线用户功能。
  • 学习如何通过简单的 PHP 脚本来实现这一功能。

教学大纲

1. 引言

  • 目的：展示如何在 WordPress 中添加实时在线用户功能。
  • 重要性：实时在线用户可以增强网站的互动性和用户体验。

2. 实时在线用户介绍

  • 什么是实时在线用户？

    • 在线用户数量可以直观地反映网站活跃度和人气。
    • 这些在线用户可能包括注册用户、访客等。

  • 安装实时在线用户插件

    示例代码：

    add_action( 'wp_loaded', 'add_realtime_online_users' );

function add_realtime_online_users() {
    $onlineUsers = get_option('online-users');

    if ( ! empty($onlineUsers) ) {
        foreach ($onlineUsers as $user_id => $last_seen) {
            echo '<li><span class="user-name">Online user: '.get_user_by_id($user_id)->display_name.'</span> last seen at: '.date_i18n( get_option('date_format'), strtotime($last_seen)).'</li>';
        }
    } else {
        echo '<li>No online users found.</li>';
    }
}

  • 获取在线用户信息

    示例代码：

    function get_user_last_seen( $user_id ) {
    global $wpdb;
    $query = "SELECT date_format(last_login, '%Y-%m-%d %H:%i:%S') AS last_seen FROM wp_users WHERE ID = $user_id";
    return $wpdb->get_var( $wpdb->prepare( $query, $user_id ) );
}

  • 更新在线用户列表

    示例代码：

    function update_online_users() {
    $onlineUsers = [];
    $users = get_users();
    foreach ($users as $user) {
        $onlineUsers[] = [
            'id' => $user->ID,
            'last_seen' => get_user_last_seen($user->ID),
        ];
    }
    set_transient('online-users', $onlineUsers);
}

add_action( 'wp_loaded', 'update_online_users' );

3. 结论与练习

  • 提供一些实际应用的例子以加深理解。
  • 推荐进一步学习相关主题，如插件开发和 PHP。

项目建议

  • 创建一个简单的 WordPress 站点，并设置实时在线用户功能。
  • 分析站点数据，检查是否按预期工作并做出适当调整。

以上教案旨在帮助您了解如何在 WordPress 中创建和管理实时在线用户功能。如果您需要更多关于插件或特定技术的深入指导，请随时提问！

最新更新