设置WordPress网站登录后右下角弹窗提醒（IP、时间、异常检测）

为了进一步提升WordPress网站的用户账户安全性，除了邮件提醒外，一个直观的站内弹窗提醒同样重要。它能让用户在登录后第一时间看到本次登录的IP地址和时间，并智能判断是否存在异地登录风险，从而及时察觉潜在的安全问题。主题铺今天就为大家带来一个精巧的代码片段，教你如何在WordPress用户登录后，实现一个美观且实用的右下角弹窗安全提醒。

为什么需要站内登录安全提醒？

• 即时性：用户无需检查邮箱，登录后即可立即看到登录信息。
• 直观性：弹窗形式更引人注目，能有效提醒用户关注账户安全。
• 风险预警：自动对比上次登录IP，对异常登录地点进行高亮提示。
• 用户体验：提供关闭按钮，且支持记住用户关闭状态（一天内不再显示），不打扰正常使用。

实现原理

这段代码利用WordPress的 wp_footer 动作钩子，在页面底部插入一段HTML、CSS和JavaScript代码。

1. 数据获取：在用户登录后，代码会获取当前登录用户的IP地址和本次登录时间。同时，它会从用户元数据中读取上一次登录的IP地址和时间，并更新为本次的登录信息。
2. 安全检测：核心逻辑在于对比本次登录IP与上次存储的IP。如果IP不同，则显示“检测到新登录地点，请确认是否本人操作！”的警告信息。
3. 弹窗显示：使用固定的CSS样式将弹窗定位在页面右下角，并添加动画效果使其平滑出现。
4. 用户交互：弹窗包含一个关闭按钮。点击关闭后，会设置一个Cookie，使弹窗在24小时内不再显示，避免频繁打扰用户。
5. 移动端兼容：通过JavaScript判断，在移动端设备上不显示弹窗，优化移动端体验。

代码片段解析

// 将以下代码添加到主题的 functions.php 文件
function zib_login_security_notice() {
    // 1. 判断是否已登录且非移动端
    if (is_user_logged_in() && !wp_is_mobile()) { 
        $user = wp_get_current_user(); // 获取当前登录用户对象

        // 2. 获取本次登录IP（考虑CDN/反向代理）
        $login_ip = !empty($_SERVER['HTTP_X_FORWARDED_FOR']) ? explode(',', $_SERVER['HTTP_X_FORWARDED_FOR'])[0] : $_SERVER['REMOTE_ADDR'];
        $login_time = current_time('mysql'); // 获取本次登录时间

        // 3. 获取上次登录信息并更新本次登录时间
        $last_login = get_user_meta($user->ID, 'last_login', true); // 获取上次登录时间
        update_user_meta($user->ID, 'last_login', $login_time); // 更新本次登录时间到用户元数据

        // 4. 安全检测：对比本次与上次登录IP
        $security_message = '本次登录信息正常';
        $last_ip = get_user_meta($user->ID, 'last_login_ip', true); // 获取上次登录IP
        if ($last_ip && $last_ip != $login_ip) { // 如果存在上次IP且与本次IP不同
            $security_message = '检测到新登录地点，请确认是否本人操作！'; // 触发警告信息
        }
        update_user_meta($user->ID, 'last_login_ip', $login_ip); // 更新本次登录IP到用户元数据

        // 5. 开始HTML输出缓冲
        ob_start(); 
        ?>

        <!-- HTML结构：右下角弹窗的容器 -->
        <div class="zib-security-alert" id="zibSecurityAlert">
            <!-- 关闭按钮 -->
            <div class="alert-close" onclick="handleCloseSecurity()">
                <svg viewBox="0 0 24 24" width="18"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
            </div>
            <!-- 弹窗头部 -->
            <div class="alert-header">
                <svg viewBox="0 0 24 24" width="24"><path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 7h2v2h-2zm0 4h2v6h-2z"/></svg>
                <h3>账户安全提醒</h3>
            </div>
            <!-- 弹窗内容：登录IP和登录时间 -->
            <div class="alert-content">
                <div class="alert-item">
                    <div class="item-icon">
                        <svg viewBox="0 0 24 24" width="20"><path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>
                    </div>
                    <div class="item-info">
                        <span class="label">登录IP</span>
                        <span class="value"><?php echo esc_html($login_ip); ?></span>
                    </div>
                </div>
                <div class="alert-item">
                    <div class="item-icon">
                        <svg viewBox="0 0 24 24" width="20"><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z"/></svg>
                    </div>
                    <div class="item-info">
                        <span class="label">登录时间</span>
                        <span class="value"><?php echo date_i18n('Y-m-d H:i', strtotime($login_time)); ?></span>
                    </div>
                </div>
            </div>
            <!-- 弹窗底部：安全提示信息，异常时高亮 -->
            <div class="alert-footer <?php echo ($security_message != '本次登录信息正常') ? 'warning' : ''; ?>">
                <?php echo esc_html($security_message); ?>
            </div>
        </div>

        <!-- CSS样式：定义弹窗的布局和美观效果 -->
        <style>
        .zib-security-alert {
            position: fixed; /* 固定定位 */
            bottom: 20px; /* 距离底部20px */
            right: 20px; /* 距离右侧20px */
            background: rgba(255,255,255,0.98); /* 背景半透明 */
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 12px;
            padding: 16px;
            width: 320px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            z-index: 999999; /* 确保在最上层 */
            transform: translateY(20px); /* 初始位置向下偏移，用于动画 */
            opacity: 0; /* 初始透明度为0 */
            animation: alertSlide 0.3s ease-out forwards; /* 动画效果 */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
        }

        @media (max-width: 768px) {
            .zib-security-alert {
                display: none !important; /* 移动端不显示 */
            }
        }

        @media (prefers-color-scheme: dark) {
            /* 暗黑模式适配 */
            .zib-security-alert {
                background: rgba(30,30,30,0.98);
                border-color: rgba(255,255,255,0.1);
            }
            .alert-header h3, .value { color: #e0e0e0; }
            .label { color: #858585; }
            .item-icon svg { color: #5a9cf8; } /* 调整图标颜色以适应暗色背景 */
            .alert-footer { background: #333; color: #ccc; }
            .alert-footer.warning { background: #4a3e2a; color: #d48806; border-color: #8c6a2e; }
        }

        /* 更多CSS样式定义... */
        .alert-header { display: flex; align-items: center; margin-bottom: 16px; }
        .alert-header svg { color: #1677ff; margin-right: 12px; }
        .alert-header h3 { margin: 0; font-size: 16px; color: #1a1a1a; }
        .alert-item { display: flex; align-items: center; margin: 12px 0; }
        .item-icon { width: 36px; height: 36px; background: rgba(22,119,255,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
        .item-icon svg { color: #1677ff; }
        .item-info { flex: 1; }
        .label { display: block; font-size: 12px; color: #666; margin-bottom: 2px; }
        .value { display: block; font-size: 14px; font-weight: 500; color: #1a1a1a; }
        .alert-footer { margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-size: 13px; text-align: center; }
        .alert-footer.warning { background: #fffbe6; color: #d48806; border: 1px solid #ffe58f; }
        .alert-close { position: absolute; top: 16px; right: 16px; cursor: pointer; opacity: 0.6; transition: all 0.2s; }
        .alert-close:hover { opacity: 1; transform: rotate(90deg); }
        @keyframes alertSlide { to { transform: translateY(0); opacity: 1; } }
        </style>

        <!-- JavaScript：处理关闭和Cookie逻辑 -->
        <script>
        function handleCloseSecurity() {
            document.getElementById('zibSecurityAlert').style.display = 'none'; // 隐藏弹窗
            var date = new Date();
            date.setDate(date.getDate() + 1); // 设置Cookie过期时间为明天
            document.cookie = "zib_security_closed=1; expires=" + date.toUTCString() + "; path=/"; // 设置Cookie
        }

        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否为移动端，如果是则不显示
            if (/Mobi|Android/i.test(navigator.userAgent)) {
                // 确保移动端元素彻底隐藏，即便CSS被覆盖
                var alertElement = document.getElementById('zibSecurityAlert');
                if (alertElement) {
                    alertElement.style.display = 'none';
                    return; // 移动端直接返回，不执行后续逻辑
                }
            }
            // 检查是否存在关闭Cookie，如果存在则不显示
            if (document.cookie.includes('zib_security_closed')) {
                var alertElement = document.getElementById('zibSecurityAlert');
                if (alertElement) {
                    alertElement.style.display = 'none';
                }
            }
        });
        </script>

        <?php
        echo ob_get_clean(); // 输出缓冲内容
    }
}
add_action('wp_footer', 'zib_login_security_notice'); // 将函数挂载到wp_footer钩子

这段代码功能完善，考虑到了移动端适配、暗黑模式兼容、以及通过Cookie实现的用户友好性。它不仅能提供即时反馈，还能通过IP对比进行基础的安全预警，非常适合希望提升用户安全感的WordPress网站。

如何将代码添加到你的WordPress网站

将这段代码添加到你的WordPress网站，主题铺推荐以下两种方式：

方法一：推荐 – 使用代码片段（Code Snippets）插件

这是最安全、最推荐的方式，因为它不会直接修改主题文件，避免了主题更新时代码被覆盖的风险。

1. 安装并激活插件：
   • 登录WordPress后台。
   • 导航到 “插件” > “安装插件”。
   • 在搜索框中输入“Code Snippets”，找到并安装该插件。
   • 安装完成后，点击“启用”。
2. 添加新代码片段：
   • 在左侧菜单栏中，导航到 “代码片段” > “添加新”。
   • 在“标题”处填写一个描述性的名称，例如“用户登录安全弹窗提醒”。
   • 将上面提供的完整PHP代码（从 // 将以下代码添加到主题的 functions.php 文件 开始到 add_action('wp_footer', 'zib_login_security_notice'); 结束）粘贴到代码框中。
   • 确保“运行代码片段”选项设置为“在网站前端运行”。
   • 点击右下角的 “保存更改并激活” 按钮。

方法二：添加到主题的 functions.php 文件

如果你不想安装额外插件，可以直接将代码添加到主题的 functions.php 文件中。

1. 登录WordPress后台。
2. 导航到“外观” > “主题文件编辑器” (或“主题编辑器”)。
3. 在右侧文件列表中，找到并点击 functions.php 文件。
4. 将上面提供的完整PHP代码（从 // 将以下代码添加到主题的 functions.php 文件 开始到 add_action('wp_footer', 'zib_login_security_notice'); 结束）粘贴到 functions.php 文件的末尾，在 ?> 之前（如果存在的话）。
5. 点击“更新文件”或“保存更改”按钮。

强烈建议： 如果你选择此方法，最好使用子主题。直接修改父主题的 functions.php 会在主题更新时丢失你的自定义代码。

测试你的登录安全弹窗

代码添加并保存后，清除你的网站缓存（如果使用了缓存插件），然后进行测试：

1. 打开你的网站并登录：在非移动设备上登录你的WordPress账户。
2. 观察右下角：登录成功后，页面右下角应该会弹出一个漂亮的提醒框，显示本次登录的IP和时间。
3. 测试异常登录：尝试使用一个不同的IP地址（例如，切换网络、使用VPN）再次登录，看看弹窗是否显示“检测到新登录地点，请确认是否本人操作！”的警告。
4. 测试关闭功能：点击弹窗右上角的“X”关闭按钮，然后刷新页面，看看弹窗是否在24小时内不再显示。
5. 测试移动端：在手机上访问你的网站并登录，确认弹窗不会显示。

主题铺补充说明

• IP地址准确性：代码中获取IP的逻辑考虑了 HTTP_X_FORWARDED_FOR 头，这对于使用CDN或反向代理的网站至关重要，能更准确地获取真实用户IP。
• 美观度：弹窗的CSS样式设计现代，包含了动画效果和暗黑模式适配，与多数现代网站风格兼容。
• 安全性增强：虽然这只是一个提示功能，但它能显著提高用户对账户安全的警惕性，是网站安全防御体系中一个非常有用的辅助手段。

通过这段代码，你可以为你的WordPress网站增添一份贴心的安全保障。主题铺认为，这种细致的用户体验优化，不仅能提升网站的专业度，更能有效保护用户账户，让你和你的用户都更安心！