{"id":2917,"date":"2025-06-11T09:03:37","date_gmt":"2025-06-11T01:03:37","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2917.html"},"modified":"2025-06-11T09:03:37","modified_gmt":"2025-06-11T01:03:37","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e6%98%be%e7%a4%ba%e5%ae%9e%e6%97%b6%e5%9c%a8%e7%ba%bf%e7%94%a8%e6%88%b7%ef%bc%88%e7%ae%80%e5%8d%95%e6%96%b9%e6%b3%95%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2917.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u663e\u793a\u5b9e\u65f6\u5728\u7ebf\u7528\u6237\uff08\u7b80\u5355\u65b9\u6cd5\uff09"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

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

步骤：<\/h3>\n
    \n
  1. \n

    安装和激活插件<\/strong>：<\/p>\n

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

      设置在线用户显示<\/strong>：<\/p>\n

        \n
      • 登录到您的 WordPress 帐户，进入“编辑”模式的页面或博客页面。<\/li>\n
      • 将以下 JavaScript 代码插入页面顶部或底部的 <head><\/code> 标签内，以确保它在页面加载时就生效：<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
        <script>\n(function() {\n    var usersOnline = <?php echo get_option('wp_pingpress_online'); ?>;\n    if (usersOnline) {\n        document.getElementById(\"online-users\").innerHTML = \"在线用户：\" + usersOnline;\n    }\n})();\n<\/script>\n\n<div id=\"online-users\"><\/div><\/code><\/pre>\n
          \n
        1. \n
          配置插件<\/strong>：<\/p>\n
            \n
          • 进入插件管理界面，在“选项”部分找到“在线用户计数器”。<\/li>\n
          • 在“在线用户计数器”下拉菜单中选择您喜欢的样式，例如“数字”，“百分比”等。<\/li>\n
          • 设置其他相关参数，如“是否在评论区显示”、“是否在侧边栏显示”等。<\/li>\n<\/ul>\n<\/li>\n
          • \n
            调整显示位置<\/strong>：<\/p>\n
              \n
            • 通过修改上述 JavaScript 代码中的 ID 或者直接在页面结构中定位元素，可以改变在线用户显示的位置和样式。<\/li>\n<\/ul>\n<\/li>\n
            • \n
              测试与优化<\/strong>：<\/p>\n
                \n
              • 测试您的网站，确保在线用户数量正确显示。<\/li>\n
              • 如果有需要，可以进一步调整样式、颜色或字体大小，以适应您的网站设计风格。<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                示例代码解释：<\/h3>\n
                  \n
                • \n
                  <?php echo get_option('wp_pingpress_online'); ?><\/code>: 这行代码用于获取 WordPress 自定义选项中的在线用户数量。这个值通常由插件自动生成，代表当前在线用户数。<\/p>\n<\/li>\n
                • \n
                  document.getElementById(\"online-users\").innerHTML = ...<\/code>: 这段代码将在线用户数量的内容替换为实际的 HTML 内容，这样可以在网页上动态显示在线用户的信息。<\/p>\n<\/li>\n
                • \n
                  使用 <div id=\"online-users\">...<\/div><\/code> 来创建一个容器元素，用于显示在线用户信息。你可以根据需要调整这个 ID 的值。<\/p>\n<\/li>\n<\/ul>\n
                  这种方法简单易用，无需复杂的编程知识，只需在页面上添加几行简单的 JavaScript 代码即可实现实时在线用户数的动态显示。通过这种方式，您可以轻松地在 WordPress 站点上提供即时反馈，增强用户体验。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
                  \r\n
                  \r\n
                  \r\n
                  \r\n
                  \r\n
                  \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
                  黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
                  \r\n
                  \r\n
                  课程目标<\/h3>\n
                    \n
                  • 理解如何在 WordPress 中使用实时在线用户功能。<\/li>\n
                  • 学习如何通过简单的 PHP 脚本来实现这一功能。<\/li>\n<\/ul>\n
                    教学大纲<\/h3>\n
                    1. 引言<\/h4>\n
                      \n
                    • 目的<\/strong>：展示如何在 WordPress 中添加实时在线用户功能。<\/li>\n
                    • 重要性<\/strong>：实时在线用户可以增强网站的互动性和用户体验。<\/li>\n<\/ul>\n
                      2. 实时在线用户介绍<\/h4>\n
                        \n
                      • \n
                        什么是实时在线用户？<\/strong><\/p>\n
                          \n
                        • 在线用户数量可以直观地反映网站活跃度和人气。<\/li>\n
                        • 这些在线用户可能包括注册用户、访客等。<\/li>\n<\/ul>\n<\/li>\n
                        • \n
                          安装实时在线用户插件<\/strong><\/p>\n
                          示例代码：<\/p>\n
                          add_action( 'wp_loaded', 'add_realtime_online_users' );\n\nfunction add_realtime_online_users() {\n    $onlineUsers = get_option('online-users');\n\n    if ( ! empty($onlineUsers) ) {\n        foreach ($onlineUsers as $user_id => $last_seen) {\n            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>';\n        }\n    } else {\n        echo '<li>No online users found.<\/li>';\n    }\n}<\/code><\/pre>\n<\/li>\n
                        • \n
                          获取在线用户信息<\/strong><\/p>\n
                          示例代码：<\/p>\n
                          function get_user_last_seen( $user_id ) {\n    global $wpdb;\n    $query = \"SELECT date_format(last_login, '%Y-%m-%d %H:%i:%S') AS last_seen FROM wp_users WHERE ID = $user_id\";\n    return $wpdb->get_var( $wpdb->prepare( $query, $user_id ) );\n}\n<\/code><\/pre>\n<\/li>\n
                        • \n
                          更新在线用户列表<\/strong><\/p>\n
                          示例代码：<\/p>\n
                          function update_online_users() {\n    $onlineUsers = [];\n    $users = get_users();\n    foreach ($users as $user) {\n        $onlineUsers[] = [\n            'id' => $user->ID,\n            'last_seen' => get_user_last_seen($user->ID),\n        ];\n    }\n    set_transient('online-users', $onlineUsers);\n}\n\nadd_action( 'wp_loaded', 'update_online_users' );<\/code><\/pre>\n<\/li>\n<\/ul>\n
                          3. 结论与练习<\/h4>\n
                            \n
                          • 提供一些实际应用的例子以加深理解。<\/li>\n
                          • 推荐进一步学习相关主题，如插件开发和 PHP。<\/li>\n<\/ul>\n
                            项目建议<\/h3>\n
                              \n
                            • 创建一个简单的 WordPress 站点，并设置实时在线用户功能。<\/li>\n
                            • 分析站点数据，检查是否按预期工作并做出适当调整。<\/li>\n<\/ul>\n
                              \n
                              以上教案旨在帮助您了解如何在 WordPress 中创建和管理实时在线用户功能。如果您需要更多关于插件或特定技术的深入指导，请随时提问！<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                              Bug编译狮 在 WordPress 网站上显示实时在线用户的功能&..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2917","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=2917"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2917\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2917"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}