在网站运营中，账户安全是用户关注的核心之一。为了让用户更清晰地了解自己的登录状态，我们可以通过子比主题的功能扩展，实现「用户登录后右下角安全提示弹窗」功能。该功能不仅能展示当前登录的 IP 地址和时间，还能在检测到异常登录 IP 时发出提醒，同时支持弹窗关闭与临时隐藏，兼顾安全性与用户体验。
![图片[1]-子比美化 - 为登录用户添加安全提示弹窗功能-黑猫博客](https://www.520ak.com/wp-content/themes/zibll/img/thumbnail-lg.svg)
这个登录安全提示功能主要包含以下特性：
- 场景限制：仅在用户登录且非移动端设备时显示，避免移动端界面拥挤
- 信息展示：清晰呈现当前登录的 IP 地址和具体时间，让用户掌握登录状态
- 异常提醒：若本次登录 IP 与上次不同，自动切换为 "新登录地点" 警告提示
- 交互优化：支持一键关闭弹窗，且通过 Cookie 记录关闭状态（1 天内不再显示）
- 样式适配：弹窗设计简洁美观，包含图标、动画效果，支持暗色模式，与子比主题风格协调
根据子比主题特性，代码可添加到两个位置：
将以下完整代码复制到上述文件中（建议放在文件末尾，避免与其他代码冲突）：
添加代码后保存文件，用户登录网站（非移动端）时，右下角会自动弹出安全提示弹窗。
为了方便后续定制修改，我们可以拆解代码的核心功能：
-
触发条件判断
通过 is_user_logged_in() 确认用户已登录，!wp_is_mobile() 限制仅在非移动端显示，避免影响移动端体验。
-
登录信息获取与存储
- 登录 IP：优先通过
HTTP_X_FORWARDED_FOR 获取（兼容代理场景），否则使用 REMOTE_ADDR
- 登录时间：通过
current_time('mysql') 获取 WordPress 标准时间
- 上次信息对比：通过
get_user_meta 读取上次登录的 IP 和时间，与本次对比后，再用 update_user_meta 更新为本次信息
-
弹窗样式设计
- 定位：固定在右下角（
bottom:20px; right:20px），避免遮挡核心内容
- 动画：通过
alertSlide 动画实现平滑弹出效果
- 响应式：
@media (max-width:768px) 强制隐藏移动端弹窗
- 异常样式：当检测到新 IP 时，底部提示栏切换为黄色警告样式（
warning类）
-
交互逻辑
- 关闭功能：点击关闭按钮时，隐藏弹窗并设置 Cookie（
zib_security_closed），1 天内不再显示
- 页面加载检查：通过 JS 判断 Cookie 状态，若已关闭则直接隐藏弹窗
- 代码添加前建议备份
func.php 或 functions.php 文件，避免操作失误导致网站异常
- 子比主题用户优先选择
func.php（主题根目录），避免主题更新时覆盖 functions.php
- 弹窗 Cookie 有效期为 1 天，若需调整可修改 JS 中
date.setDate(date.getDate() + 1) 的数字（1=1 天）
- 暗色模式适配：样式中使用
rgba 透明背景和 currentColor 颜色，可自动适配主题的暗色模式
通过这个功能，既能
增强用户对账户安全的感知，又不会过度干扰用户体验，是子比主题网站提升安全性的实用优化方案。
温馨提示：
本文最后更新于
2025-08-18 16:45:31，某些文章具有时效性，若有错误或已失效，请在下方
留言或联系
黑猫
。
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！
![图片[1]-子比美化 - 为登录用户添加安全提示弹窗功能-黑猫博客](https://img.520ak.com/i/2025/08/18/Snipaste_2025-08-18_16-33-40.webp)
暂无评论内容