一为（OneNav）主题导航 – 导航条弹出“最近访问”记录源码添加教程

前言

一为导航（OneNav）主题本身没有在前台导航栏显示“最近访问”的功能。虽然用户中心有一个“足迹”页面，但需要登录才能查看，而且入口较深。本教程将教你如何在导航栏添加一个时钟图标，点击后弹出一个面板，显示最近访问过的站点详情页（URL 包含 /sites/数字），记录保存在浏览器本地，游客和登录用户都能使用。

最终效果：

• 导航栏右侧出现 🕒 时钟图标
• 点击弹出“最近访问”面板，列出最近 10 条站点记录（图标 + 标题）
• 点击记录直接在当前页跳转
• 面板右上角可一键清空
• 支持深色模式
• 直接访问、刷新、从搜索引擎进入站点详情页也会自动记录
• 重复访问同一站点不会重复添加，只会更新时间并置顶

功能说明

准备工作

1. 备份：修改前请备份 wp-content/themes/onenav/inc/functions/io-header.php 文件。
2. 确定主题目录：以下路径均相对于主题根目录 wp-content/themes/onenav/。
3. 清除缓存：修改后请清除浏览器缓存及 WordPress 缓存插件缓存。

步骤一：新建 CSS 文件

在主题目录下新建文件：

wp-content/themes/onenav/assets/css/recent-visits.css

内容如下：

步骤二：新建 JS 文件

在主题目录下新建文件：

wp-content/themes/onenav/assets/js/recent-visits.js

内容如下：

提示：如果想修改记录条数，改 MAX_ITEMS 的值即可。

步骤三：修改 io-header.php

打开文件：

wp-content/themes/onenav/inc/functions/io-header.php

找到 io_show_header() 函数中输出头部工具按钮的区域（通常在“搜索按钮”之前）。在合适位置插入“最近访问”按钮的 HTML：

然后在同一个函数中，原本输出内联 CSS/JS 的位置，替换为引入外部文件：

保存文件。

代码说明

• filemtime()：用文件修改时间做版本号，修改 JS/CSS 后浏览器会自动加载新版本，无需手动清缓存。
• file_exists()：防止文件不存在时产生 PHP 警告。
• get_template_directory_uri()：自动获取主题目录 URL，兼容任何域名。
• 事件捕获：document.addEventListener("click", ..., true) 确保在链接跳转前记录。
• 直接访问记录：页面加载时 recordCurrentPage() 会检查当前 URL 是否匹配 /sites/数字，匹配则记录。
• 去重：addVisit 中先过滤相同 URL，再插入到数组头部。

常见问题

1. 点击图标没有反应？

• 检查浏览器控制台是否有 JS 报错。
• 确认 recent-visits.js 和 recent-visits.css 路径正确，Network 面板能看到 200 请求。

2. 记录不显示或图标不对？

• 不同主题版本的站点标题/图标选择器可能不同。打开一个站点详情页，按 F12 查看标题和图标的实际 class，然后修改 recent-visits.js 中 recordCurrentPage 和点击记录里的选择器。

3. 游客和登录用户数据会混吗？

• 本方案使用统一的 localStorage 键 onenav_recent_visits，同一浏览器下所有用户共享。如需按用户区分，可自行修改 STORAGE_KEY，例如加上 IO.uid。

4. 如何修改记录条数？

• 修改 recent-visits.js 中的 MAX_ITEMS 变量。

5. 移动端能用吗？

• 按钮位于头部工具栏，移动端会随其他图标一起显示。面板宽度已做响应式适配。

总结

通过以上三步，你就为一为导航主题添加了一个轻量、实用的“最近访问”功能。所有代码均不影响主题原有逻辑，数据存储在本地，不涉及数据库，安全可靠。以后要调整样式或逻辑，只需修改 recent-visits.css 和 recent-visits.js，无需再动 PHP 文件。

如果在操作过程中遇到问题，欢迎在评论区留言交流。