NavAi 主题详细使用教程

1. 主题介绍

NavAi 是一款专为 AI 工具导航网站设计的 WordPress 主题，复刻自知名 AI 导航站 faxianai.com 的视觉风格。主题采用卡片式布局，支持分类浏览、搜索、排行榜等功能，适合搭建各类 AI 工具收录站点。

主要功能

AI 工具管理 — 自定义文章类型，专为收录 AI 网站设计
分类体系 — 支持多级分类，如写作 AI、图像 AI、视频 AI 等
网站截图 — 自动获取收录网站的网页截图
点击统计 — 记录每个工具的被点击次数
搜索功能 — AJAX 实时搜索，无需刷新页面
排行榜 — 详情页右侧显示热门工具排行
广告位 — 支持在详情页插入 HTML/JS 广告代码
批量添加 — 后台支持批量导入多个网址
外链图片采集 — 一键将文章中的外链图片下载到本地
短代码 — 支持通过短代码在页面中展示工具列表

技术栈

WordPress 5.0+ / PHP 7.4+
响应式设计，适配桌面端和移动端
Lucide Icons 图标库
CSS 变量 + Flexbox/Grid 布局

2. 安装与激活

方法一：通过 WordPress 后台上传

下载主题

从 GitHub 仓库 https://github.com/ctrol/navai 下载最新版本的 Navai.zip 文件。

上传主题

进入 WordPress 后台 > 外观 > 主题 > 添加新主题 > 上传主题，选择下载的 Navai.zip 文件并安装。

激活主题

安装完成后点击"激活"按钮。主题激活后会自动创建必要的页面和分类数据。

方法二：通过 FTP 上传

解压文件

将 Navai.zip 解压，得到 Navai 文件夹。

上传至服务器

通过 FTP 客户端将 Navai 文件夹上传到 /wp-content/themes/ 目录。

后台激活

进入 WordPress 后台 > 外观 > 主题，找到 NavAi 主题并点击激活。

注意：主题激活时会自动创建"首页"、"在线工具"、"今日热榜"、"AI 排行榜"等页面。如果页面已存在则不会重复创建。

3. 基础设置

主题激活后，进入 WordPress 后台左侧菜单的 主题设置 进行基础配置。

3.1 通用设置

路径：后台 > 主题设置 > 通用设置

设置项	说明	默认值
Logo 文字	显示在 Logo 图标旁的文字	发现 AI
Logo 域名	显示在 Logo 下方的小字域名	FAXIANAI.COM
Logo 图片	上传自定义 Logo 图片，留空则使用文字 Logo	空
Favicon	网站浏览器标签页图标	空
排行榜数量	详情页右侧排行榜显示的工具数量	10
详情页正文广告代码	在详情页标题与缩略图之间显示的广告	空
侧边栏广告代码	在详情页排行榜下方显示的广告	空

提示：Logo 图片和 Favicon 支持点击"上传图片"按钮从媒体库选择，也可以直接输入图片 URL。

3.2 Logo 设置建议

如果站点有品牌 Logo，建议上传透明背景的 PNG 图片，尺寸约 120x60 像素
如果没有 Logo，使用文字 Logo 即可，修改"Logo 文字"和"Logo 域名"即可
Favicon 建议尺寸 32x32 或 64x64 像素的 PNG/ICO 格式

4. 添加 AI 工具

AI 工具是主题的核心内容类型，每个工具对应一个独立的详情页面。

4.1 单条添加

路径：后台 > AI 工具管理 > 添加新工具

填写标题和简介

在标题栏输入工具名称（如"ChatGPT"），在编辑器中输入工具的详细介绍。简介会显示在首页卡片和详情页顶部。

设置特色图片

在右侧"特色图片"面板上传工具的图标或 Logo。建议尺寸 400x300 像素，格式为 PNG 或 JPG。

填写网址详情

在"网址详情"面板中填写：

官网地址 — 工具的官方网站 URL（必须填写）
网站图标 URL — 自动采集或手动输入网站的 favicon 地址
热门推荐 — 勾选后会在首页"大热门 AI"区域显示
新上线 — 勾选后会在首页"新出 AI"区域显示

选择分类

在右侧"AI 分类"面板中选择一个或多个分类。分类决定了工具在首页的展示位置。

发布

点击"发布"按钮，工具即可在前台展示。

4.2 一键采集网站信息

在编辑页面，输入官网地址后，点击地址栏右侧的"采集"按钮，系统会自动获取网站的标题、描述和图标。

提示：采集功能通过访问目标网站获取信息，部分网站可能因反爬虫机制无法采集，此时需要手动填写。

4.3 外链图片采集

如果工具介绍中引用了其他网站的图片（外链图片），可以使用"扫描远程图片"功能将其下载到本地：

在编辑器中粘贴包含外链图片的内容
点击编辑器下方的"扫描远程图片"按钮
系统会扫描出所有外链图片并列出清单
点击"开始采集"，图片会自动下载并替换为本地链接

注意：此功能无需先保存文章即可使用，扫描的是编辑器中的当前内容。

5. 分类管理

主题使用自定义分类法"AI 分类"对工具进行归类。

5.1 预设分类

主题激活时会自动创建以下分类：

大热门 AI、TOP 10、AI 操作手册、超级智能体
新出 AI、大厂 AI、写作 AI、图像 AI
设计 AI、办公 AI、对话 AI、热门 APP
视频 AI、音频 AI、求职招聘 AI、编程 AI
开发工具、搜索 AI、模型 AI、AI 提示词、AI 社区

5.2 添加新分类

路径：后台 > AI 工具管理 > AI 分类

输入分类名称（如"音乐 AI"）
选择父分类（可选，用于创建子分类）
输入分类别名（英文，用于 URL）
点击"添加新分类"

5.3 分类图标

主题会根据分类名称自动匹配图标：

关键词	图标
热门、top	火焰
图像、图片、绘画	图片
视频、影视	视频
写作、文本、文案	钢笔
办公、文档	公文包
对话、聊天、助手	消息
编程、开发、代码	代码
设计、UI、UX	调色板
音频、音乐、声音	音乐
搜索	搜索

6. 导航菜单

主题支持两个菜单位置：主导航菜单和底部链接菜单。

6.1 创建主导航菜单

路径：后台 > 外观 > 菜单

点击"创建新菜单"，输入菜单名称（如"主导航"）
在左侧选择要添加的页面（如首页、在线工具等）
点击"添加到菜单"
在"菜单设置"中勾选"主导航菜单"
点击"保存菜单"

6.2 创建底部链接菜单

创建新菜单，输入名称（如"底部链接"）
添加关于我们、联系方式、隐私政策等页面
在"菜单设置"中勾选"底部链接菜单"
保存菜单

提示：底部链接菜单会显示在网站页脚，通常放置关于我们、联系方式、隐私政策等页面链接。

7. 广告设置

主题支持在两个位置插入广告代码，均支持 HTML/JS（如百度联盟、Google AdSense）。

7.1 详情页正文广告

位置：详情页标题信息与网站缩略图之间

设置路径：后台 > 主题设置 > 通用设置 > 详情页正文广告代码

建议尺寸：320x210 像素（与缩略图同比例）
支持 HTML 代码、JavaScript 广告代码
留空则不显示广告

7.2 侧边栏广告

位置：详情页右侧排行榜下方

设置路径：后台 > 主题设置 > 通用设置 > 侧边栏广告代码

建议宽度：不超过 320 像素
支持 HTML 代码、JavaScript 广告代码
留空则不显示广告

注意：广告代码使用 wp_kses_post 过滤，部分特殊标签可能被过滤。如果广告代码无法正常显示，请检查代码中是否包含被过滤的标签。

8. 页脚设置

路径：后台 > 主题设置 > 页脚设置

设置项	说明
页脚描述	显示在页脚上方的站点描述文字
版权信息	自定义版权文字，留空则使用默认格式
ICP 备案号	填写工信部备案号，会自动链接到备案查询网站
公安备案号	填写公安网备号

注意：底部导航链接请通过"外观 > 菜单 > 底部链接菜单"管理，不在页脚设置页面中配置。

9. 批量添加

当需要一次性添加多个工具时，可以使用批量添加功能。

9.1 进入批量添加页面

路径：后台 > AI 工具管理 > 批量添加

9.2 填写工具信息

页面提供 5 组输入框，每组包含：

网址 — 工具的官网地址（必填）
标题 — 工具名称，留空则使用网址作为标题
简介 — 工具的简短描述
分类 — 选择所属分类
图标 URL — 工具的 favicon 地址（可选）

9.3 提交

填写完成后点击"批量添加"按钮，系统会自动创建对应的 AI 工具文章。如果网址已存在则会跳过。

提示：批量添加时建议先填写网址，系统会自动尝试采集标题和图标。如果采集失败，再手动填写标题。

10. 外链图片采集

当从其他网站复制内容时，图片通常是外链形式（URL 指向其他域名）。主题提供了一键采集功能，将这些外链图片下载到本地媒体库。

10.1 使用步骤

在编辑器中粘贴包含外链图片的内容
点击编辑器下方的"扫描远程图片"按钮
系统扫描后会列出所有外链图片
确认无误后点击"开始采集"
图片自动下载到本地，内容中的图片链接自动替换

10.2 注意事项

无需先保存文章，直接扫描编辑器中的当前内容即可
扫描时会自动跳过本地图片和 data URI 图片
下载失败的图片会保留原始外链
下载的图片会自动添加到媒体库

11. 短代码

主题提供两个短代码，方便在页面中展示 AI 工具。

11.1 热门 AI 工具

[hot_ai count="8"]

显示标记为"热门推荐"的 AI 工具，count 参数控制显示数量（默认 8）。

11.2 按分类显示

[category_ai category="写作AI" count="8"]

显示指定分类下的 AI 工具，category 为分类名称，count 为显示数量。

11.3 使用示例

在页面编辑器中直接输入短代码即可：

欢迎访问我们的 AI 导航站！以下是热门推荐：

[hot_ai count="6"]

更多写作类工具：

[category_ai category="写作AI" count="4"]

12. 常见问题

Q1: 主题激活后首页显示空白？

请确保 WordPress 的"首页显示"设置正确。进入后台 > 设置 > 阅读，将"您的首页显示"设置为"一个静态页面"，并选择主题自动创建的"首页"页面。

Q2: 网站截图不显示？

网站截图通过 WordPress.com 的 mshots 服务获取。如果截图不显示，可能是：

目标网站访问速度过慢，截图服务超时
目标网站屏蔽了截图服务的访问
网络连接问题

解决方法是手动上传特色图片作为替代。

Q3: 如何修改主题颜色？

编辑 style.css 文件中的 CSS 变量：

:root {
    --primary-color: #E53935;      /* 主色调 */
    --primary-hover: #C62828;      /* 悬停色 */
    /* ... 其他变量 */
}

Q4: 搜索功能不工作？

请确保 WordPress 的固定链接设置不是"朴素"模式。进入后台 > 设置 > 固定链接，选择"文章名"或其他非朴素模式。

Q5: 如何备份和迁移数据？

AI 工具数据存储在 WordPress 的标准文章和分类表中，使用常规的 WordPress 备份插件（如 UpdraftPlus）即可完整备份。迁移时只需备份数据库和上传目录。

Q6: 主题支持多语言吗？

主题代码已使用 WordPress 国际化函数（__() 和 _e()）包裹所有文本，支持通过 .po/.mo 文件进行翻译。目前默认语言为中文。