过去两年里，我尝试在四个不同的 WordPress 网站上添加合适的超级菜单。第一个网站是我自己手动搭建的，walker_nav_menu在面板 HTML 中扩展并添加了一个手工编写的 Flexbox 网格。它确实有效，但每次客户想要添加列时都会出错。第二个网站我使用了 UberMenu，它功能强大，但后台管理界面非常复杂，我用自定义构建器替换了 WordPress 的菜单界面。第三个网站是 Astra Pro，它内置的超级菜单在几列的情况下还不错，但超过几列就显得很拥挤。第四个网站我用 Elementor 搭建，使用了悬停容器和绝对定位，在桌面端看起来很棒，但在移动端却很糟糕。
我一直听说 Max Mega Menu Pro 这个插件，但一直没太在意，说实话，它的名字听起来就像是 2010 年代初期那种没人更新的插件。后来我用一个真实的网站做了个测试，在“商店”菜单项下搭建了一个三列的超级面板，还添加了角色、徽章和搜索功能，我不得不承认：它与 WordPress 原生菜单管理后台的集成设计非常出色，这个插件也确实值得拥有它的地位。
本文将详细介绍它的功能、优点和缺点，并提供开发者参考，涵盖您实际会用到的每一个滤镜。
Max Mega Menu 是 Tom Hemsley（公司名称为 [公司名称megamenu.com]）开发的一款 WordPress 导航插件。它分为两部分。免费的 Max Mega Menu 插件位于 WordPress.org 插件库中，提供构建功能齐全的超级菜单所需的一切：启用菜单位置、在顶级菜单项下添加几个子菜单项，鼠标悬停时即可显示为多列面板。单独出售的 Pro 版本则添加了大多数机构在第一天就需要的功能：固定菜单、基于角色的菜单项可见性、徽章、选项卡式子菜单、垂直菜单、打开时叠加显示、Font Awesome 6 和 Genericons 图标库，以及一系列菜单项替换选项（搜索框、WooCommerce 购物车总计、登录信息、BuddyPress 头像）。
专业版插件实际上是一个附加组件。主文件会检查是否存在免费插件，如果没有免费插件，则无法执行太多操作。对于付费 WordPress 插件来说，这种结构略显不寻常，这意味着需要下载两个压缩包，激活两次，但后台管理界面只有一个超级菜单。一旦两个插件都运行起来，您根本不会察觉到代码库被分成了两部分。
对我来说，Max Mega Menu 的独特之处在于它不做什么。它不会替换主题自带的菜单导航器，也不会在 WordPress 后台添加顶级“页眉构建器”页面，更不会要求你将自定义短代码拖放到构建器画布中（当然，如果你想这样做也可以）。相反，它在现有的“外观”>“菜单”界面上，每个菜单项都添加了一个新按钮，并在侧边栏添加了一个小的折叠面板。你按照 WordPress 默认的方式构建菜单，Max Mega Menu 则通过在渲染时读取每个菜单项的元数据，将其转换为超级菜单。
为什么设计选择很重要
如果您已经发布过一到两个大型菜单，可以跳过本节。如果您还没有发布过，那么了解本节内容很有必要，因为它能解释本文其余部分的意义。
WordPress 菜单结构类似一棵树。每个菜单项都是一个自定义文章类型（nav_menu_item），并menu_item_parent指向树中的父级。当主题调用 `<theme_name>` 时wp_nav_menu()，WordPress 会遍历这棵树，并将每个菜单项传递给一个遍历器类，由该遍历器类渲染 HTML。
大多数大型菜单插件都通过以下三种方式之一来解决“我想要一个包含三列链接的面板”的问题：
- 它们完全取代了原有的菜单编辑器。该插件拥有菜单的HTML代码。主题的菜单输出被绕过。
- 他们构建了一个独立的菜单系统。无需再使用“外观”>“菜单”，该插件在其他地方提供了一个拖放式菜单构建器，您可以通过短代码嵌入构建结果。
- 它们依附于标准的菜单树。菜单项保留在 WordPress 管理后台的菜单中。该插件仅注入样式和少量类名，因此现有结构会渲染成一个大型面板。
Max Mega Menu 稳居第三阵营。UberMenu 属于第一阵营，但也有第三阵营的备选方案。大多数主题构建器超级菜单（Elementor、Bricks、Divi）属于第二阵营。第三阵营与主题的兼容性最佳，因为你不是在与主题现有的菜单输出作斗争，而是在增强它。
这种选择也有缺点。由于 Max Mega Menu 并不拥有菜单的 HTML 代码，因此“外观”>“菜单”上的“保存菜单”按钮并不会保存您的超级菜单设置。这些设置位于_megamenu每个项目单独的文章元数据条目中，并通过插件自身的模态框进行保存。新用户一旦遇到这个问题，就会永远记住它。
每个菜单项都有一个_megamenu文章元数据条目，它是一个序列化的 PHP 数组，其中包含以下覆盖设置：图标、子菜单类型、面板宽度、移动端隐藏、徽章文本、角色可见性以及自定义样式。前端遍历器会在渲染时读取该元数据，并应用相应的类和属性。
主要功能概览
与其放弃营销列表，不如看看真正改变你建站方式的是什么。
- 三种子菜单显示模式：弹出式（常规下拉菜单）、标准布局的超级菜单（列网格），以及专业版新增的标签式子菜单和网格布局的超级菜单。标准布局是 80% 网站的实际需求。
- 每个商品均可选择图标。免费版支持 Dashicons 图标库。专业版支持 Font Awesome 5/6 和 Genericons 图标库。专业版还支持自定义 SVG 文件上传。
- 每个项目可设置可见性规则。移动设备上隐藏、桌面设备上隐藏、平板电脑上隐藏。专业版增加了基于角色的可见性设置（已登录/已注销/按角色）。
- 每个菜单位置都有自己的主题、行为方式以及固定/叠加/移动端选项。
- 菜单主题。一个独立的视觉编辑器，用于设置颜色、字体、边距、悬停效果、移动端切换和徽章。您可以保存主题，并将不同的主题应用到不同的菜单位置。
- 优点：菜单栏固定。滚动时菜单栏保持固定。可设置为仅限桌面端、仅限移动端或两者皆可。可选的“向上滚动时隐藏”行为，我更喜欢这种行为，而不是默认固定。
- 优点：垂直菜单。将菜单渲染为左右侧边栏，而不是水平条。适用于应用程序风格的网站和文档。
- 优点：标签式子菜单。子菜单打开后，左侧显示标签，右侧显示内容。非常适合用于帮助中心风格的类别选择器。
- 优点：角色和权限控制。可以设置菜单项仅对已登录用户、管理员或未登录访客显示。这对于区分“我的账户”和“登录”链接非常有用。
- 专业版：菜单项徽章。菜单项上可添加彩色标签（新品、促销、测试版）。四种内置样式，外加自定义样式覆盖。
- 优点：替换功能。您可以将菜单项替换为搜索框、WooCommerce 购物车总计、EDD 购物车计数、徽标、BuddyPress 头像或任意自定义 HTML 代码。这些短代码也可在网站的任何位置使用。
- 专业版：自定义切换模块。逐个模块构建移动端切换栏。左侧是徽标，中间是搜索框，右侧是汉堡菜单。或者任何您喜欢的组合。
- 专业版：移动端子菜单类型。每个项目：此子菜单在移动设备上应以手风琴形式折叠，还是以弹出式形式滑入？
- 优点：图片替换小部件。您可以将此小部件添加到主面板中，鼠标悬停时会自动替换图片。对于产品预览来说非常实用。
- 兼容 Gutenberg 编辑器。将 Max Mega Menu 区块拖放到区块主题模板的某个部分即可。Twenty Twenty-Five 和其他区块主题无需第三方头部生成器即可拥有真正的头部。
- 兼容经典主题。可将其放置
wp_nav_menu()在菜单位置，或将[maxmegamenu]短代码放置在任何位置，或使用小部件。
这个列表很长。好消息是，大多数专业版功能默认是关闭的，只有当你手动开启时才会启用，所以你不会因为不使用的功能而损失性能。
安装和第一个菜单
由于 Pro 插件是附加组件，而非独立程序，因此需要安装两次：
- 从WordPress.org 存储库
wp-admin/plugins.php安装Max Mega Menu （免费版）并激活它。 - 通过插件界面上传Max Mega Menu Pro 插件的压缩包并激活。您将在 WordPress 管理后台侧边栏看到一个名为“超级菜单”的新菜单项，其中包含“菜单位置”、“菜单主题”、“常规设置”、“工具”和“许可证”等子菜单项。
如果您跳过免费插件而只安装专业版，您会看到一条管理员通知，告知您专业版需要免费插件才能正常工作。没有备用方案，也没有半成品模式。它们必须配合使用。
激活后，前往“超级菜单”>“菜单位置”。此屏幕列出了您的主题注册的所有菜单位置register_nav_menus()。区块主题（例如 Twenty Twenty-Five、Twenty Twenty-Four）通常注册的菜单位置为零，在这种情况下，您会看到一个友好的空白状态，并带有“开始使用：添加您的第一个菜单位置”卡片。点击该卡片，将您的位置命名为“主要”之类的名称，选择要将其分配到的菜单，然后点击“保存”。Max Mega Menu 会自动为您注册一个虚拟位置。
接下来，你需要将菜单显示在前端的某个位置。有三种选择：
- 模块化主题。将 Max Mega Menu 模块拖放到您的页眉模板部分。
- 经典主题已注册位置信息。菜单会在主题调用
wp_nav_menu()该位置信息的任何位置显示。 - 短代码可插入任何位置。可用于
[maxmegamenu location=max_mega_menu_1]页面、文章或文本小部件。非常适合测试。
本文中的截图是我运行 Twenty Twenty-Five 演示版，创建了一个超级菜单位置，分配了一个包含 23 个项目的菜单，并将短代码放在了首页顶部。就是这样：前端显示超级菜单，将鼠标悬停在“商店”项目上，三列面板就会滑下。
不要把这部分内容当作检查清单来理解，而应该把它看作是我在实际网站上使用的操作顺序。
第一步：先在“外观”>“菜单”中创建菜单，忽略“Max Mega Menu”。添加顶级菜单项（首页、商店、博客、关于、联系我们）。暂时不用考虑列，只需构建菜单树即可。
步骤 2：在父级菜单下添加列标题作为菜单项。在“商店”下，添加三个菜单项：“按类别”、“按品牌”和“精选”。这些菜单项将成为主面板中的列标题。它们只是 WordPress 一级菜单项。
步骤 3：在每个列标题下添加实际链接。在“按类别”下添加耳机、扬声器、线缆和音频设备、麦克风。在“按品牌”下添加索尼、Bose、森海塞尔、铁三角。这些链接将成为 WordPress 层级树中的二级条目。
第四步：保存菜单。WordPress为保护树木贡献一份力量。
步骤 5：现在打开商店中的 Max Mega Menu 模态框。每个顶级项目在菜单管理界面的标题旁边都有一个“Mega Menu”按钮。点击该按钮。模态框将打开“Mega Menu”选项卡。将“子菜单显示模式”设置为“Mega Menu – 标准布局”，并将列数设置为 3。保存更改。
这就是核心流程。对任何其他需要创建超级菜单的父级（例如“博客”、“关于”等）重复此逐项模态框操作。
第一次使用时没人会告诉你：列会自动从现有的子项填充。你不需要拖动列，也不需要手动为列分配子项。插件会读取树状结构，并根据你选择的列数将其排列成列。列标题（深度为 1 的项）会变成列标题。这些列标题的子项（深度为 2 的项）会变成列的链接列表。
这也是为什么 Max Mega Menu 要求你先构建菜单的原因。菜单结构本身就是菜单树。改变菜单树，面板布局也会随之改变。
如果您想在列中使用小部件而不是菜单链接，列工具栏上有一个“选择要添加到面板的小部件”下拉菜单。您可以添加文本小部件、自定义 HTML 小部件、图像替换小部件（专业版）或块模式。您可以在同一个面板中混合使用小部件和菜单项。
每个项目的模态框：工作发生的地方
这是插件中最重要的一页，也是新用户最容易迷路的地方。免费版模态框有六个标签页，专业版有七个：
- 超级菜单。子菜单类型、面板列数、面板小部件插件。
- 设置。单个项目：打开模式（悬停或点击）、在移动设备/平板电脑/桌面设备上隐藏、禁用链接、将面板与项目对齐或与视口边缘对齐。
- 图标。Dashicons 免费；Font Awesome 5/6、Genericons、自定义 SVG 专业版。
- 样式设置。逐项设置：仅针对此菜单项覆盖菜单主题的颜色、字体粗细、内边距和悬停状态。
- 角色（专业版）。限制物品只能在已登录/未登录/特定角色下使用。
- 替换功能（专业版）。将商品标签替换为搜索框、购物车总计、登录信息、自定义 HTML、BuddyPress 头像等。
- 徽章（专业版）。添加带有标签的彩色徽章。
模态框的左侧边栏是固定的，因此您可以在标签页之间切换而不会丢失上下文。保存操作是针对整个模态框而非每个标签页进行的，所以如果您同时修改了“样式”标签页和“徽章”标签页，然后点击一次“保存更改”，两个标签页的更改都会被保存。
令人沮丧的一点是：模态框会在点击时打开，这意味着你无法通过键盘上的 Tab 键在菜单管理界面中切换，否则就会弹出你不需要的模态框。这虽然是个小问题，但如果你要配置二十个项目，累积起来就相当麻烦了。
菜单主题和样式
菜单主题是除单个菜单项之外所有菜单项的可视化编辑器。前往“超级菜单”>“菜单主题”，您将看到一个包含六个子选项卡的左侧边栏：
- 常规设置。主题标题、箭头图标、行高、z轴索引。
- 菜单栏。高度、固定高度、背景颜色（带渐变）、内边距、边框半径。
- 超级菜单。边距、背景颜色、项目链接颜色、悬停状态、列间距、行间距。
- 弹出式菜单。与上述相同，但适用于非大型子菜单。
- 移动菜单。切换栏高度、切换栏颜色、移动菜单类型（滑动/手风琴）、断点。
- 徽章（专业版）。样式 1-4，颜色和字体。
- 自定义样式。一个用于其他任何内容的纯 CSS 文本区域。
您可以保存多个主题、复制主题、将主题导出/导入为 JSON 文件，以及将不同的主题分配给不同的菜单位置。最后一点比您想象的更重要：“页眉”菜单和“页脚”菜单可能需要不同的尺寸和颜色，您肯定不希望同一个主题同时控制这两个菜单。
CSS 管道基于 SCSS。保存主题时，插件会将您的设置编译成一个 SCSS 局部文件，将其与基础主题的 SCSS 合并，并将最终的 CSS 写入文件wp-content/uploads/maxmegamenu/style.css（默认）或内联到页面头部。文件系统选项在缓存请求上速度更快，因此是合适的默认设置。如果您使用的是严格的 CDN，无法从指定位置提供文件，则内联选项会很有帮助wp-content/uploads。
在速度较慢的共享主机上首次保存主题时，会造成轻微的性能损失：SCSS 编译是同步进行的，可能需要几百毫秒。最终用户不会注意到这一点（他们只能看到缓存的输出），只有点击“保存”按钮的管理员才会感受到。
专业版专属功能详解
让我来具体说说哪些专业版功能值得升级，哪些功能不值得升级。
粘性菜单。如果您重视核心网页指标，光凭这一点就值得升级。该插件使用position: fixed过渡效果，“向上滚动时隐藏”（仅在用户向上滚动时显示粘性菜单栏）模式比始终置顶的模式用户体验好得多。我更喜欢它而不是仓库里其他六个粘性头部插件，因为它不会重复编写菜单 HTML 代码，而只是切换一个类。
角色与限制。功能实用但有限。您可以按角色隐藏顶级菜单项，但无法按用户元数据、会员计划、ACF 字段或购买历史记录进行限制。如需更丰富的规则，您仍然需要集成会员插件。另外，请勿在一个菜单项中添加 9 个角色。插件不会缓存角色检查结果，在页面访问量较大时，您会明显感受到性能下降。
徽章，真不错。每种样式都采用不同的配色方案，这些方案都内置在主题编辑器中。样式 1 为红色，样式 2 为黄色，以此类推。您可以在“菜单主题”>“徽章”中全局自定义颜色，也可以在模态框中逐个覆盖每个项目的颜色。
替换功能。我原本以为这个功能用处不大，但现在却无处不在。“用 WooCommerce 购物车总额替换此菜单项”听起来有点花哨，但当你意识到你不需要单独的购物车头部小部件，也不需要侧边栏的自定义短代码时，你就会明白它的价值所在。你只需将菜单项指向替换项，它就会保留在菜单的 HTML 代码中，并继承菜单的所有样式。
标签式子菜单。说实话，我不太喜欢这个设计。标签位于面板左侧，内容位于右侧，但在小尺寸笔记本电脑上，标签页显得很拥挤，而且无法像在常规列中那样在标签页内放置图标。对于快速“分类列”来说还不错，但并不适合作为帮助中心。
垂直菜单。真的很不错。它将整个菜单渲染成左侧堆叠式菜单，而不是水平条。子菜单在右侧打开。我会在文档网站上使用这个，而不是从头开始构建。
自定义切换模块。有了这项功能，我终于可以在 Bricks 网站上实现简洁的移动端头部，而无需编写任何自定义代码。您可以像搭乐高积木一样，将徽标、搜索框或汉堡菜单拖放到移动端切换栏中。
Font Awesome 6免费版自带 Dashicons 图标库（约 150 个图标，大多为实用图标），专业版则包含完整的 FA6 图标库。听起来似乎不多，但 FA6 的品牌图标正是大多数“在 Twitter 上找到我们”之类的标题菜单所需要的。
图片切换组件。此组件可嵌入到主面板中。鼠标悬停时，默认图片会切换到第二张图片。非常适合展示类别预览。我曾在一家时尚网站上使用它来切换产品图片。
如果预算有限，我会选择不购买专业版，但以下功能我并不使用：BuddyPress 的替代方案（大多数网站都不使用 BuddyPress）、Genericons 图标库（Dashicons 免费就能满足同样的需求），以及 EDD 的替代方案（大多数网站都使用 WooCommerce）。专业版的主要功能是粘性标签、角色、徽章、垂直标签和替代方案。其他功能都是锦上添花。
实际应用案例
以下是我已部署或集成 Max Mega Menu 的一些网站，并进行了真正重要的配置：
- 一个包含 80 个分类的 WooCommerce 商店。在“商店”顶级商品页面设置了一个四列的超级面板。每列代表一个顶级分类，子列则代表子分类。每列底部都有一个“查看全部”链接。未对主题进行任何修改。整个页眉使用了标准的Astra Pro页眉，并将 Max Mega Menu 插件作为主导航。一次成功。
- 这是一个SaaS产品的文档网站。左侧是垂直菜单，每个顶级菜单项下都有标签式子菜单。每个标签页包含文档的一个子章节。这是我唯一一次发现标签式子菜单真的可以点击，而且仅仅是因为文档信息架构本身就采用了两级分类。
- 这是一个基于订阅的会员网站。 “会员”顶级选项仅对已登录用户在“角色”选项卡中显示。“立即加入”顶级选项仅对未登录用户显示。会员插件负责页面访问控制；Max Mega Menu 仅控制页眉中显示的链接。
- 服务网站设有三个地点。每个地点都有独立的页面结构，“商店”菜单分为三列（每个地点一列），每列下方是相应的服务区域链接。“特色”列通过自定义 HTML 小部件显示联系按钮图片。
- 本地餐厅。菜单栏采用单条固定显示，新增“在线订购”徽章，右侧替换了电话号码（通过自定义 HTML 替换实现，因为插件本身不提供专门的电话号码替换功能），移动端切换按钮中央替换了餐厅标志。整个菜单栏位于 Twenty Twenty-Five 模板内，并使用了 Max Mega Menu 模块。
重点是：Max Mega Menu 很少成为网站建设的主角。它只是支撑网站其他部分的导航，而这正是我不断使用它的原因。那些试图掌控网站品牌和视觉形象的插件通常会适得其反。而 Max Mega Menu 的功能仅仅是渲染一个菜单。
开发者参考：钩子、过滤器、短代码
建议您将此部分添加至收藏夹。Max Mega Menu（免费版 + 专业版合集）提供了许多接口，因为专业版插件本身就是基于免费版插件的筛选界面构建的。
每个项目的元数据
每个菜单项都包含一个_megamenu文章元数据条目。它是一个序列化的 PHP 数组。除非你非常清楚自己在做什么，否则不要直接写入，因为其中的键值会不断变化。可以这样理解：
$item_settings = get_post_meta( $menu_item_id, '_megamenu', true );
// Example fields you'll find inside (free + Pro)
// $item_settings['type'] 'flyout' | 'megamenu' | 'grid' | 'tabbed'
// $item_settings['panel_columns'] integer column count
// $item_settings['hide_on_mobile'] 'true' | 'false'
// $item_settings['hide_on_desktop'] 'true' | 'false'
// $item_settings['icon'] 'disabled' | 'dashicons-...' | 'fa-...'
// $item_settings['roles']['display_mode'] 'logged_in' | 'logged_out' | 'in_roles'
// $item_settings['roles']['roles'] array of role slugs
// $item_settings['badge']['style'] '' | '1' | '2' | '3' | '4'
// $item_settings['badge']['text'] string label该插件会对菜单项数组进行两次遍历。megamenu_nav_menu_objects_before第一次遍历是早期遍历（专业角色用于移除菜单项），megamenu_nav_menu_objects_after第二次遍历是后期遍历（专业角色用于添加徽章类、粘性类等）。如果您想添加自己的条件逻辑，可以连接到这些遍历函数：
add_filter( 'megamenu_nav_menu_objects_after', function( $items, $args ) {
// Add a 'mega-fresh' class to any menu item with a post_modified in the last 7 days.
foreach ( $items as &$item ) {
if ( $item->type === 'post_type' ) {
$modified = get_post_field( 'post_modified_gmt', $item->object_id );
if ( $modified && strtotime( $modified ) > strtotime( '-7 days' ) ) {
$item->classes[] = 'mega-fresh';
}
}
}
return $items;
}, 20, 2 );包装和项目属性
<div>包裹菜单的外层组件（ #mega-menu-wrap-...）的属性来源于此megamenu_wrap_attributes。Pro Sticky 模块使用此组件注入属性data-mega-sticky-enabled。您可以添加自己的属性：
add_filter( 'megamenu_wrap_attributes', function( $atts, $menu_id, $args ) {
$atts['data-instance'] = 'main-header';
return $atts;
}, 10, 3 );每个项目的属性会经过nav_menu_link_attributes（WordPress 核心过滤器）以及megamenu_anchor_attributes内部锚点。每个图标的属性也会经过megamenu_toggle_icon_attributes。
向选择器添加图标
如果您希望在每个项目的图标选择器（专业版）中使用自定义图标 URL 集，请筛选megamenu_custom_icon_url：
add_filter( 'megamenu_custom_icon_url', function( $icons ) {
$icons[] = [
'id' => 'my-custom-rocket',
'url' => get_stylesheet_directory_uri() . '/icons/rocket.svg',
'label' => 'Rocket',
];
return $icons;
} );图标以内联方式渲染<img>（或者<svg>如果您上传 SVG 文件并且 SVG 支持插件处于活动状态）。
扩展主题编辑器
想在菜单主题编辑器中添加“自定义 CSS 变量”字段吗？Pro 版本允许您通过此方式推送额外字段megamenu_theme_editor_settings。Pro 的 Sticky 模块利用此功能添加自己的面板。该字段的形状是一个嵌套数组，包含 section -> field 元数据。
SCSS变量
如果您有一个子主题，并且想要将当前激活的超级菜单颜色读取到您自己的 SCSS 中，请使用以下过滤器megamenu_scss_variables：
add_filter( 'megamenu_scss_variables', function( $vars, $location, $theme, $menu_id ) {
$vars['$header_brand'] = '#1a8fc4'; // your brand blue
return $vars;
}, 10, 4 );替换短代码（专业版）
Pro Replacements 模块会将这些短代码全局注册。它们不仅限于菜单内部使用：
[maxmegamenu_woo_cart_count][maxmegamenu_woo_cart_total]
[maxmegamenu_edd_cart_count]
[maxmegamenu_edd_cart_total]
[maxmegamenu_logout_url]
[maxmegamenu_user_info field=”display_name”]
[maxmegamenu_user_gravatar size=”32″]
[maxmegamenu_buddypress_avatar]
[maxmegamenu_buddypress_notifications]
您可以将它们粘贴到任何页面或小部件中，而不仅仅是菜单项替换。购物车总计/数量短代码通过 WooCommerce 购物车片段 API 自动更新，因此当商品添加到购物车时，徽章会自动更改，无需重新加载整个页面。
搜索操作和输入
搜索框替换/?s=默认发布到。使用以下命令更改目标megamenu_search_action：
add_filter( 'megamenu_search_action', function() {
return home_url( '/shop/' ); // search inside the shop only
} );要搜索自定义文章类型，请筛选megamenu_search_inputs并添加隐藏输入框：
add_filter( 'megamenu_search_inputs', function( $inputs ) {
$inputs[] = '<input type="hidden" name="post_type" value="docs">';
return $inputs;
} );面板内的组件
将任何已注册的 WordPress 小工具拖放到大型面板中，只需从面板的小工具下拉菜单中选择即可。自定义小工具只要按照标准方式注册即可使用（register_widget()）。要完全控制面板内小工具的 HTML 包装，请使用过滤器megamenu_widget_wrap。
REST 和 CLI
Max Mega Menu 不支持注册自定义 REST 路由。您需要通过标准端点操作菜单，并直接/wp/v2/menu-items写入文章元数据（您需要先将元数据注册为 REST 公开，或者使用每个项目的模态框）。此外，它也没有 WP-CLI 命令，这正是我所希望的。目前，在测试环境和生产环境之间导出和导入 Mega Menu 主题，意味着您需要使用主题编辑器的 JSON 导出/导入按钮。_megamenu/wp/v2/menu-items/<id>/?context=edit
插件生命周期操作
do_action( 'megamenu_pro_after_install' );
do_action( 'megamenu_pro_after_update' );在 Pro 插件更新后，使用第二个命令使你在代码中维护的任何 CSS 缓存失效。这两个命令都只在内部执行，admin_init因此可以安全地将管理员通知加入队列。
页面性能及其成本
Max Mega Menu 的前端成本低廉且可预测。
- 每个菜单位置对应一个 CSS 文件，由 SCSS 流水线生成。压缩后通常为 6-12 KB。
wp-content/uploads/maxmegamenu/style.css默认情况下从此处提供服务。 - 一个 JavaScript 文件（
maxmegamenu.js），压缩后约 12 KB。处理悬停/点击/键盘交互、移动端切换、粘性滚动监听器和辅助功能 ARIA。 - 标记方式：一个元素
<div class="mega-menu-wrap">包裹一个元素<ul class="mega-menu">，每个元素都带有深度感知类<li>。不使用 iframe，不使用 Shadow DOM，也不使用 React。
在包含 23 个菜单项的 Twenty Twenty-Five 演示中进行了实际测试：向 LCP 添加了 0.7 KB 的 JS，CLS 没有变化，CSS 从磁盘加载后，TTFB 也没有受到影响。与 Elementor 的超级菜单组件（加载 React 风格的组件代码和供应商提供的捆绑包）相比，Max Mega Menu 非常轻量级。
需要了解的一些事项：
- 保存主题后的第一个前端请求会触发 SCSS 编译。后续请求将使用已保存的文件。如果您使用了像WP Rocket这样的缓存插件，请务必在保存主题设置后清除缓存。
- 您加载的图标库会影响有效负载。加载 Font Awesome 6 会增加约 80 KB 的 CSS 和字体文件。如果您只使用一两个 FA6 图标，请考虑切换到 Dashicons 或自定义 SVG，以避免加载整个图标库。
- 粘性滚动监听器使用了
requestAnimationFrame事件passive: true监听器。它不会阻止移动设备上的滚动。
兼容性和注意事项
吸引新用户的因素清单：
- “保存菜单”按钮不会保存超级菜单的设置，它只会保存 WordPress 菜单树。超级菜单的设置会在您点击单个菜单项弹窗中的“保存更改”按钮时保存。这是两种不同的保存流程。
- 区块主题需要 Max Mega Menu 区块。Twenty Twenty-Five 主题不支持
wp_nav_menu()从 PHP 模板调用，因此将菜单添加到页眉意味着需要在站点编辑器中编辑模板部分并插入该区块。 - 多位置 SCSS 重建。每个位置都有自己编译好的 CSS 文件。如果您有五个位置，就会生成五个 CSS 文件。在创建不需要的位置之前，请务必注意这一点。
- 免费版和专业版的 CSS 文件路径相同，不会冲突。但如果您卸载了专业版，样式会保留下来（直到您保存主题重新生成 CSS）。建议卸载后查看一下“工具”页面。
- 自定义的 Walker 主题可能无法正常工作。如果您的主题
wp_nav_menu全局覆盖了 Max Mega Menu 的 Walker，Max Mega Menu 的类注入仍然会生效，但您的 Walker 可能会移除这些类。使用默认 Walker（或通过父类调用它）的主题则不会有问题。像GeneratePress Premium、Astra Pro、Elementor Pro、Bricks 以及区块主题等都无需任何干预即可正常工作。 - 该插件的管理模态框在某些地方使用了内联事件处理程序。如果启用严格的内容安全策略
unsafe-inline(CSP)，则模态框的部分功能将无法正常工作。大多数生产环境的网站不会启用严格的 CSP，但如果您使用的是 CSP，则需要允许插件的内联脚本或采取其他变通方法。 - 多语言网站需要额外进行一些设置。WPML和Polylang Pro都支持 Max Mega Menu，但每种语言在 WordPress 中都有各自的菜单，每个菜单
_megamenu项的元数据也各不相同。由于没有自动同步功能，在英文商店页面设置 Pro 模态框后，法文商店页面不会自动同步。如果您有多种语言和大量大型菜单项，这将非常繁琐。 - 图标选择器对管理员来说负担很重。在现代硬件上，以模态框形式加载 5000 多个 Font Awesome 图标没有问题，但在四年前的笔记本电脑上就显得力不从心了。该插件采用懒加载方式加载图标网格，但第一次打开的速度比第二次慢。
常问问题
我是否需要同时拥有免费的 Max Mega Menu 和 Pro 插件？
是的。Pro 版本是附加组件，需要依赖免费插件。请先安装并激活免费插件，然后再安装 Pro 版本。
我可以使用 Max Mega Menu Pro 搭配像 Twenty Twenty-Five 这样的模块化主题吗？
是的。在网站编辑器中编辑页眉模板部分，并插入“Max Mega Menu”模块。将该模块的“菜单位置”设置为您在“Mega Menu > 菜单位置”中注册的位置。
Max Mega Menu会影响我的SEO吗？
不。该插件在服务器端渲染的是标准的HTML <ul>。搜索引擎看到的是正常的菜单结构。主面板的 HTML 在页面加载时就已存在于 DOM 中（它是通过 CSS 隐藏的，而不是通过 JS 延迟加载的），因此面板内的所有链接都可以被抓取。<li><a>
它是否易于访问（符合 WCAG 标准/键盘导航）？
基本没问题。该插件会根据WordPress 导航菜单指南添加正确的 ARIA 属性（aria-expanded，， ） aria-haspopup，并且可以通过 Enter 键使用键盘打开超级面板。面板内的 Tab 键切换功能正常。移动端切换按钮也已启用。不过，偶尔仍会出现一些 ARIA 属性的特殊情况（例如，Tab 键切换的子菜单不会向屏幕阅读器播报 Tab 键切换），因此严格的无障碍审核会发现一些需要修复的地方，但总体而言，基础功能已经相当完善。aria-controlsaria-label
我可以在不同网站之间导入/导出Mega Menu设置吗？
您可以通过“超级菜单”>“菜单主题”>“主题操作”>“导出”导出和导入单个菜单主题。但无法导出单个菜单项的超级菜单设置、菜单树或位置配置。要进行完整的网站迁移，请复制 WordPress 数据库（_megamenu文章元数据值存储在nav_menu_item文章类型行中wp_postmeta）。
它与 UberMenu 相比如何？
UberMenu 功能更强大，开箱即用的预设样式也更多，但它会占用菜单 HTML 代码（取代标准的菜单栏），并且拥有独立于“外观”>“菜单”之外的独立构建器界面。Max Mega Menu 则更兼容主题。如果您想要一个支持拖放操作、拥有丰富内容块的可视化超级菜单构建器，UberMenu 更胜一筹。如果您想要一个能够与主题现有导航系统兼容的超级菜单，Max Mega Menu 则更胜一筹。我会在需要功能强大的构建器界面的网站中使用UberMenu ；而 Max Mega Menu 则是我的默认选择。
它是否兼容 WooCommerce？
是的。购物车数量和购物车总额的更新是一流的功能。WooCommerce 迷你购物车片段会在添加商品时刷新菜单中的购物车数量。
是否有可供我体验的演示版本？
是的。请使用产品页面上的“立即试用”按钮；本文中的屏幕截图就是通过该按钮截取的。
我可以在面板内的列中添加自定义代码吗？
是的。从面板的下拉列表中拖放一个自定义 HTML 小部件到列中即可。任何可以用 HTML/JS 编写的代码都可以在那里运行。
总结
Max Mega Menu Pro 是一款 WordPress 插件，它架构设计精良，并在其上叠加了丰富的功能。它不会取代 WordPress 的菜单管理后台，而是对其进行扩展。它不会提供单独的头部构建器，而是为现有主题的头部添加一个超级菜单。它不会在客户的 WordPress 后台强行插入品牌标识，而是静静地位于“外观”>“菜单”下，默默地完成它的工作。
我会反对按站点向代理商收取专业版费用。我也会反对文档中缺少钩子示例。我希望看到一个用于在测试环境和生产环境之间同步设置的 WP-CLI 命令。但这些抱怨都是针对一个已经运行良好的插件，而不是针对一个存在问题的插件。
如果你一直在手动创建大型菜单，或者与主题自带的大型菜单作斗争，又或者每隔六个月就要因为页面构建器的组件 API 更新而更换页面构建器的大型菜单组件，那么这款插件就是你的理想之选。它已经存在足够长的时间，稳定性极佳，并且仍在持续维护中。
