平台指南 · WordPress

Navi+ AI Menu Builder 在 WordPress 上的完整指南

为 WordPress 打造的完整导航工具集——底部导航栏、Mega Menu、侧滑菜单和浮动操作按钮。WordPress Plugin Directory 官方插件。无需修改主题。

获取插件 查看安装步骤
WordPress 移动导航 Mega Menu
Navi+ 团队 · 2026年5月13日 · 8 分钟阅读

WordPress 驱动着互联网相当大的一部分网站——而其中绝大多数网站使用的默认菜单模式,十年来几乎没有任何实质性变化。桌面端是一排横向的文字链接,移动端是一个汉堡图标,仅此而已。

对一个个人博客来说,这没问题。但对电商店铺、营销站、在线学习平台,或任何依赖导航来驱动收入的网站来说,这就是一道天花板。你无法在不写自定义代码的情况下加上底部导航栏。你无法在不付费插件的情况下做出一个真正的 Mega Menu。你无法在不改主题的情况下把移动端菜单换成侧滑面板。而一旦你硬上手做了,未来一次主题更新就会让它们全部失效。

Navi+ AI Menu Builder 是一套完整的 WordPress 导航工具集,目前已作为官方插件上架 WordPress Plugin Directory。安装一次,就能得到五种不同的菜单形态——Tab Bar、Mega Menu、Slide、FAB、Grid——全部在同一个控制台中管理,并且完全独立于主题。

5 种菜单
Tab Bar、Mega、Slide、FAB、Grid——一个插件全搞定
任意主题
无需改主题、无需子主题
免费
Starter 方案永久免费——无需信用卡

为什么 WordPress 默认菜单不够用

WordPress 核心的菜单系统是 2010 年代初为内容型网站设计的。多年下来,它在现代场景下已经成为一个公认的短板:

  • 与主题强耦合。菜单的外观完全由主题决定。换主题,菜单 UI 就会跟着变。想做自定义布局?你得改 PHP 模板,或者和主题设置斗智斗勇。
  • 移动端能力有限。大多数主题在移动端默认只提供一个汉堡图标。没有底部导航栏、没有 FAB,也没有真正的移动优先模式。
  • 没有真正的 Mega Menu。WordPress 原生菜单只是一串扁平列表。要做带图片、价格或 CTA 的多列布局,需要单独的插件,而且通常要付费版本。
  • 难以做 A/B 测试。改菜单结构等于改主题——慢、风险大,站点负责人也常常不允许这么做。
  • 为内容设计,而非为转化。默认菜单无法承载促销内容、无法在移动端固定一个"购物车"或"联系我们"按钮,也没有真正适合电商或营销站的布局体系。

Navi+ AI Menu Builder 为 WordPress 带来了什么

与其堆叠三四个导航插件,不如用一个工具集把它们全部替换掉。

Tab Bar——移动端底部导航

在移动端每一个页面底部都固定显示的一条栏。最多 5 个入口,支持自定义图标、激活态高亮,并内置 4,000+ 个 Material Symbols 图标库。对绝大多数 WordPress 站点来说,这就是移动端体验最大的单点升级。

Mega Menu——桌面端下拉菜单的正确打开方式

支持图片、标题、子链接、Banner、精选商品 Block 和 CTA 的多列下拉菜单。把扁平的"Shop"或"Services"链接,替换为预览内容概览的丰富入口。

侧滑 / 汉堡菜单(Slide Menu)

为移动端设计的多级侧滑面板。比层层嵌套的汉堡菜单更清爽,支持子菜单、语言切换、账户链接和搜索。

FAB——浮动操作按钮

一个锚定在屏幕角落的按钮,可用于促销、WhatsApp 入口或快速打开菜单。颜色、图标、文字和点击行为均可配置。

Grid Menu——宫格菜单

为品类丰富的站点设计的瓦片式菜单。一屏 9–12 个品类瓦片,往往比一长串移动菜单更清晰。

移动端与桌面端独立配置

每一种菜单都有独立的移动端和桌面端配置。移动端用 Tab Bar,桌面端用 Mega Menu——完全不需要写一行媒体查询 CSS,全部在控制台里完成。

兼容任意 WordPress 主题

Navi+ 的设计思路是与 WordPress 生态协同,而不是和它对抗。

  • 独立于主题。兼容 Astra、GeneratePress、Kadence、Hello、Blocksy、Storefront、Avada、Divi、Elementor 主题、Twenty Twenty-X,以及任何自定义主题。插件会注入一层独立于主题模板层级之外的 UI。
  • 无需改主题。安装插件、激活,然后在控制台里配置。不用改 PHP、不用做子主题、不用覆盖任何模板。
  • 与 WooCommerce 并行运行。插件本身不依赖 WooCommerce,也不会与它冲突——装在 WooCommerce 店铺上,原有的菜单、购物车链接和结账链接都会按预期工作。更深入的 WooCommerce 专属集成(实时购物车数量、迷你购物车抽屉接管)已在路线图上,但暂未发布。
  • Block 编辑器与经典编辑器都支持。不依赖其中任何一种——无论页面是怎么搭建的,菜单都会在每一个前台页面正常渲染。
  • 多语言支持。兼容 Polylang、WPML 和 TranslatePress。可在 Navi+ 控制台中为不同语言配置专属的菜单文字和链接。
  • 纯 HTML5 + CSS3。没有 jQuery、前端没有 React 运行时,也不会与其他导航插件或页面构建器插件产生冲突。

性能——对 Core Web Vitals 友好

插件是导致 WordPress 站点变慢的头号原因。Navi+ 在设计上就明确不愿成为其中之一。

  • 不阻塞渲染。在首屏渲染之后才加载。
  • 懒加载交互。菜单交互代码只在需要时才加载。
  • 轻量。前端每个菜单只占几 KB(gzip 后)。
  • 全球 CDN。菜单资源由全球边缘节点分发——Elite 方案下提供 Cloudflare + BunnyCDN 双 CDN 互备。
  • 不增加数据库负担。菜单配置存储在 Navi+ 侧,插件本身只在数据库里新增一行 options。

在 WordPress 上安装

三种安装方式,按你的工作流挑一种即可:

  • 从插件目录安装(推荐):WordPress 后台 → 插件 → 安装插件 → 搜索 "Naviplus Menu Builder" → 现在安装 → 启用
  • 从 ZIP 文件安装:WordPress.org 插件页面 下载最新的 .zip插件 → 安装插件 → 上传插件 → 选择 ZIP → 安装 → 启用
  • 通过 FTP 安装:把解压后的 naviplus-menu-builder/ 文件夹上传到 wp-content/plugins/,然后在 插件 → 已安装的插件 中启用它。

需要 WordPress 5.8 或更高版本。插件通过一段轻量的加载脚本(来自 https://live.naviplus.app/start.js)来渲染菜单。

启用之后

  1. 在 WordPress 后台打开 外观 → Naviplus Menu Builder
  2. 创建你的第一个菜单——插件会在首次使用时自动把站点连接到 Navi+,无需提前单独注册 Navi+ 账号。
  3. 点击 Open dashboard,在 Navi+ 编辑器里设计菜单。
  4. 选择菜单出现的位置——站点全局(在 Navi+ 面板内切换)或 仅在特定页面(通过下方的短代码)。

在特定页面、文章或小工具中嵌入

如果你只想在选定页面上显示菜单——例如某个落地页、移动端专用模板、特定的转化漏斗——请关闭站点全局嵌入,改用短代码。

[naviwp embed_id="YOUR-EMBED-ID"]

兼容的旧短代码(仍受支持):[naviplus embed_id="YOUR-EMBED-ID"]

在 Navi+ 控制台的嵌入管理页面中找到 YOUR-EMBED-ID。把短代码放进 Gutenberg 的短代码区块、粘贴到段落区块中(插件会自动识别文本里的 [naviwp] / [naviplus]),或在 Elementor 及其他页面构建器中使用短代码小工具。

移除或暂停菜单

停用插件即可在 WordPress 端停止加载脚本——你在 Navi+ 上的菜单配置会被保留。或者从你嵌入过的任意页面上移除 [naviwp ...] 短代码即可。

Starter 方案永久免费——安装时无需信用卡。

WordPress 上的价格方案

与 Shopify 一致——相同功能,相同价格。

方案 价格 适合
Starter 永久免费 单个菜单、小型站点、博客、试用 Navi+
Business $6.25 / 月 成长期店铺与营销站,多菜单、多语言、图片上传、数据分析
Elite $10 / 月 较大品类、无限菜单、完整 SEO 支持、高级 CDN、专属服务

Business 与 Elite 方案均提供 7 天免费试用,期间全部功能开放。

常见问题

它会拖慢我的网站吗?

不会。Navi+ 在首屏渲染之后才加载,通过全球 CDN 分发,并且不包含任何阻塞渲染的脚本。它的设计目标之一就是完全不影响 Core Web Vitals。

我需要写代码吗?

不需要。控制台采用拖拽式操作。如果你有高级需求,也可以使用自定义 CSS / HTML,但这从来不是必须的。

它能适配我的主题吗?

可以。Navi+ 存在于主题模板层级之外。已在 Astra、GeneratePress、Kadence、Blocksy、Hello + Elementor、Divi、Avada、Storefront、Twenty Twenty-X 以及众多自定义主题上经过测试。

它能和 WooCommerce 一起用吗?

可以——Navi+ 能在 WooCommerce 站点上正常运行。你的菜单、购物车链接、账户链接和结账链接都会照常工作。目前插件还不会自动绑定到 WooCommerce 的专属数据(实时购物车数量、迷你购物车抽屉接管)——这些 WooCommerce 专属集成已在路线图上,本次发布暂未包含。

支持 WPML 和 Polylang 吗?

支持。Navi+ 菜单支持按语言配置文字与链接,兼容 WPML、Polylang 和 TranslatePress。

会和我的其他插件冲突吗?

没有全局 JS、没有 jQuery、没有共享的 CSS 类名——菜单运行时具备命名空间隔离。每次发布前我们都会针对装机量最大的 WordPress 插件做兼容测试。

如果卸载会怎么样?

停用或删除插件——你原有的 WordPress 默认菜单会立刻恢复。没有任何残留数据,也不会让页面出错。

支持服务在哪里?

Starter 提供邮件支持,Business 提供 7×24 小时支持,Elite 提供专属服务(迁移菜单、配置布局、直接帮你修改 UI)。

在 WordPress 上开始使用

来自 WordPress 官方插件目录的免费插件。无需信用卡,兼容任意主题。

获取 WordPress 插件

继续阅读

开始使用 Navi+ AI Menu Builder

选择您的平台 — 免费安装,几分钟内上线。