UberMenu插件教程：将WordPress普通菜单转化为多列超级菜单，提升导航效率 - 易服客工作室

📎 原文来源：UberMenu插件教程：将WordPress普通菜单转化为多列超级菜单，提升导航效率 - 易服客工作室

https://gplwp.eastfu.com/ubermenu-shi-yong-jiao-cheng-gou-jian-wordpress-chao-ji-cai/

本文教你用UberMenu插件将WordPress普通菜单转化为多列超级菜单，提升导航效率。

UberMenu将普通下拉菜单转为多列超级菜单
无需修改主题代码即可构建专业导航
支持图标、徽章、描述和响应式移动菜单
利用WordPress原生菜单系统扩展功能
UberMenu：高级WordPress超级菜单插件，可扩展默认菜单为多列、带内容元素的导航。
超级菜单：多列面板、含内容框和图标等元素的导航菜单，优于传统下拉菜单。
WordPress菜单系统：外观-菜单下的原生界面，用于管理网站导航链接和层级。

想象一下，一个小型 WordPress 网站的菜单逐渐超出容纳范围的时刻。你最初只有首页、关于、博客、联系。接着添加了商店链接、服务、几个落地页，现在顶栏有十一个项目，折到了第二行，还有一个单一的下拉菜单，把三十个链接埋在一个词语下面。访问者找不到任何东西，而你也不敢添加真正需要的页面。这正是 UberMenu 要打破的壁垒。

这是一篇漫长而坦诚的文章，全面介绍 UberMenu 的功能、如何在不触碰主题代码的情况下用它构建真正的超级菜单、如果不加注意会踩的坑，以及完整的开发者参考（包含值得了解的过滤器和简码）。无论你是经营商店、只想让导航不再令人尴尬，还是希望用代码强制指定子菜单类型的开发者，读完本文后，你将清楚了解这个插件的工作原理。

目录隐藏

[什么是 UberMenu？](#什么是 UberMenu？)

[UberMenu vs Max Mega Menu vs 默认 WordPress 菜单](#UberMenu vs Max Mega Menu vs 默认 WordPress 菜单)

什么是 UberMenu？

UberMenu 是一款由 SevenSpark 工作室（由开发者 Chris Mavricos 运营）开发的高级 WordPress 超级菜单插件。它接入 WordPress 自带的菜单系统------你已经在"外观">>"菜单"下使用的那一个------ 外观 >> 菜单 并将普通的下拉菜单转变为完整的超级菜单：多列面板、内容框、图标、徽章、描述，以及合适的移动端模式。它已在 CodeCanyon 上销售多年，当人们觉得主题默认导航不够用时，UberMenu 是他们会想到的两个选择之一。

以下是整个插件所围绕的核心论点。默认情况下，WordPress 菜单是一个扁平的链接列表。你可以嵌套项目，但输出结果是一个垂直下拉菜单，在你悬停的项目下方展开。这对于只有五个页面的宣传网站来说还行，但一旦你有了分类、子分类、特色产品和搜索框（它们都应该出现在导航中），它就崩了。UberMenu 采用相同的菜单结构，让它横向扩展为有组织的列，这样访问者一眼就能看到整个网站的轮廓，而不是滚动浏览一窄列文本。

在深入之前，先快速说明一下。UberMenu 功能强大，而强大的工具也给了你足够的余地来搞砸。我会指出哪些地方默认设置是合理的，哪些地方如果你不小心，绝对会毁掉自己的导航。

你实际得到什么

与其复制销售页面上的功能列表，不如看看一旦运行 UberMenu，你的导航行为究竟会发生哪些变化。

超大子菜单。 顶级菜单项可以展开为宽大的多列面板，而非细长的下拉菜单。您可以选择全宽（面板横跨整个页面）或对齐（面板悬浮在菜单项下方）。这是核心功能，也是让繁忙站点变得可用的关键。
弹出式和标签式子菜单。 并非每个菜单项都需要超大面板。您可以将某些项保留为普通样式的弹出式下拉菜单，也可以构建标签式子菜单，每个标签切换可见内容。在同一菜单中混合使用不同类型的菜单项完全可行。
菜单中的内容。 这部分是人们容易低估的。一个菜单项可以包含搜索框、近期文章列表、Google 地图、图片或任何 WordPress 小工具。您的导航可以执行实际功能，而不仅仅是指向页面。
菜单中的 WooCommerce 购物车。 UberMenu 内置了短代码，可以将实时购物车信息和购物车链接直接插入菜单，如果您希望构建产品驱动的菜单，还可以提供产品价格和促销徽章过滤器。
图标、徽章和描述。 每个菜单项可以携带图标、"New"或"Sale"徽章，以及标签下方的简短描述文本。适度使用可使菜单易于扫描；过度使用则会使菜单变得杂乱。
真正的响应式模式。 在您设定的断点以下，菜单会折叠为一个切换按钮（汉堡图标），点击后打开一个垂直的、可点击的移动菜单，其中包含可展开的区块。这是可配置的，并非事后添加的功能。
皮肤加上精细样式控制。 UberMenu 附带 CSS 皮肤和样式定制面板，并与 WordPress 定制器集成，可实时预览调整颜色、边框和排版，无需编写 CSS。
多配置支持。 您可以运行多个 UberMenu 配置，每个菜单位置一个，这样主导航和页脚超级菜单可以拥有完全不同的设置。
WPML 与 WooCommerce 集成。 多语言菜单通过 UberMenu 的 WPML 过滤器实现，而 WooCommerce 钩子让您能够构建感知商店的菜单。

以上只是表面。本指南的其余部分将按照您在构建菜单时实际遇到的顺序逐一介绍每个部分。

工作原理（针对网站所有者）

设置真的非常快，所以我一口气说完：在以下位置上传插件压缩包 插件 → 安装插件 → 上传插件 ，激活它，然后将UberMenu分配到你主题的一个菜单位置。最后一步是整个关键，值得仔细了解。

UberMenu 提供两种方式将其附加到你的网站。

自动集成 是大多数人选择的路径。你进入UberMenu控制面板，选择主题已注册的菜单位置（Primary、Header，或者你的主题所称呼的名称），然后UberMenu接管该位置的输出。在底层，它挂钩 wp_nav_menu_args 过滤器来拦截菜单并渲染自己的标记。好处是你不需要编辑任何主题文件，并且它适用于任何注册了经典菜单位置的主题。

手动集成 用于其他所有情况。你可以通过 [ubermenu] 短代码在任何地方放置菜单，将UberMenu小部件拖到小工具区域，或者通过PHP调用。这是针对区块主题（全站编辑主题并不总是暴露一个经典菜单位置供自动集成使用）以及自定义放置（如特定页面区域内的超级菜单）的路线。

控制面板位于 **外观 >> UberMenu**左侧导航是插件所有功能的概览，值得通读一遍以了解各功能模块的位置： 集成、基本配置、位置与布局、子菜单、响应式与移动端、样式定制、图标、徽章、描述、图片、字体、其他、高级、 以及 导入/导出此外还有一个"定制器"按钮，可打开实时预览样式工具。刚开始你不需要改动大部分设置。真正的决策集中在集成、子菜单、响应式与移动端以及样式定制这几个部分。

提示： 你可以创建多个 UberMenu 配置，每个菜单位置对应一个配置。例如，如果你希望在页眉中使用一个功能丰富的巨型菜单，而在页脚使用一个简洁的菜单，你可以创建两个配置，分别分配给各自的位置。它们不共享设置，这正是你所需要的。

一旦 UberMenu 占用了某个位置，你就可以按照常规方式构建实际菜单，在 外观 >> 菜单 添加你的页面、文章、分类和自定义链接，然后将它们拖拽到所需的父/子层级结构中。UberMenu 的革新之处在于：每个菜单项现在都有一个 UberMenu 菜单项设置 面板（从菜单项打开的自定义模态窗口）。该面板用于设置 子菜单类型 （大型、弹出、选项卡式或无），以及布局和对齐方式、列宽、项目布局、图标、徽章、描述、图像，以及术语或最新文章等动态内容。菜单结构是原生的 WordPress，所有行为由 UberMenu 驱动。

你可能会想，这是否意味着要学习一个全新的菜单构建器。其实不必。如果你会使用 WordPress 的菜单界面，你就已经掌握了 UberMenu 80% 的功能。新的部分只是每个菜单项的一个设置模态窗口。

构建大型子菜单（成果展示）

让我们直奔主题。要将顶级菜单项转换为大型菜单，请打开它的 UberMenu 菜单项设置 并设置 子菜单类型 为 Mega。一旦你这样做，该菜单项的子项就不再堆叠成细窄的下拉菜单，而是以网格形式布局。

那个截图显示了一个 Shop 菜单项，它打开了一个全宽度的 Mega 面板，其中的项目在网格中排列。在 DOM 中，该面板带有 ubermenu-submenu-type-mega 和 align-full_width 类，这告诉浏览器"这是一个全宽度的 Mega 子菜单"。你可以选择全宽度（横跨页面，适合商店和大网站）和对齐（整齐地位于菜单项下方，适合更整洁的导航）。

有三种值得了解的子菜单类型，你可以在同一个菜单中混合使用：

子菜单类型	外观示例	适用场景
Mega	宽幅多列网格面板	商店、大分类树、内容丰富的导航
Flyout	标准样式的下拉列	简单的父子链接，如"关于 >> 团队"
Tabbed	通过标签切换内容的面板	在有限空间内容纳大量分组内容

超级菜单面板内部采用行列网格布局。您可以通过设置面板中的每项布局控件来构建，也可以将布局简码直接放入菜单项的内容中： [ubermenu-col] 定义一个列， [ubermenu-colgroup] 将列分组为一行。（UberMenu 也接受别名 [wpmega-col] 和 [wpmega-colgroup] 如果您使用的是旧版设置。）对大多数人来说，可视控件已足够；当您需要对复杂面板进行像素级控制时，可以使用简码。

注意： 全宽超级子菜单会占据页面宽度，无论其父项在菜单栏中的位置如何。这是有意设计而非缺陷，但会让期望面板紧贴菜单项的人感到意外。如果您希望面板出现在菜单项下方，请使用对齐选项而非全宽。

角色审视。如果您经营大型在线商店，超级子菜单可以让您在一个面板中向购物者展示完整的分类树（男装、女装、童装、特卖），附带特色产品和搜索框，而无需他们通过狭窄的下拉菜单逐一查找。这就是商店购买此插件的首要原因。

在菜单中放入真实内容

这正是 UberMenu 有别于"加宽下拉菜单"的功能。菜单项不再局限于链接，你可以放入可交互的内容，UberMenu 为此内置了一套简码。

[ubermenu-search] 在菜单中放置一个实时搜索框。当搜索是主要操作时（例如文档网站或大型商店），非常方便。
[ubermenu-recent-posts] 将最新文章列表拉入一列，让您的超级菜单同时充当"博客最新文章"的预告。
[ubermenu-map] 嵌入 Google 地图，对于希望地址随处可一键访问的单门店商家来说非常实用。
[ubermenu_image_portal] 在菜单中放置图片内容，适合商店喜爱的可视化分类面板。
[ubermenu_toggle] 以及 [ubermenu_mobile_close_button] 让您自定义响应式切换按钮和移动端关闭按钮。

您还可以通过菜单项设置将任何标准 WordPress 小工具放入菜单项中，因此新闻简报表单、促销模块或自定义 HTML 小工具都可以在导航中显示。

对于 WooCommerce 商店，有两个我经常使用的简码： [ubermenu_woocommerce_cart_info] 显示实时购物车信息（商品数量、总额）以及 [ubermenu_woocommerce_cart_url] 输出购物车链接。将这些放在菜单栏中，顾客就能在每个页面上随身携带购物车，而无需你构建自定义头部。

注意： 菜单中的内容是该插件最被滥用的功能。搜索框和最新文章栏目能增加价值。而一个地图、三个小工具、六张图片和一个联系表单挤在同一个面板中，则会把导航变成一个杂乱的着陆页。更多内容请参见反模式部分，因为这比任何设置都更重要。

移动菜单，以及它为何能成就或毁灭你

如果忽略移动端，在桌面上看起来华丽的大菜单在手机上可能会成为灾难。UberMenu 并没有忽略移动端，但它确实需要你去配置和测试。

在你设置的断点以下，菜单会折叠成响应式切换按钮，即默认标有 "MENU" 的熟悉汉堡图标，点击后会打开一个带有可展开区块的垂直移动菜单。该行为的所有设置位于 响应式与移动 控制面板中：菜单切换至移动模式的断点、切换按钮的文本和图标，以及子菜单的展开方式。切换按钮的标记本身对开发者是可过滤的（更多关于 ubermenu_toggle_class 和 ubermenu_toggle_html_atts 过滤器的内容后面会提到），以便你可以将其与自定义头部匹配。

这个部分之所以如此重要，是因为如今大多数网站半数以上的流量来自手机。如果你的移动菜单出现问题，大部分访问者会体验到有问题的版本，而不是你花了一个下午打磨的精美桌面版。将断点设置得与你的主题匹配，然后在一部真实的手机上打开网站，逐项点击每一个部分。仅靠鼠标悬停的交互在触摸屏上毫无作用，这也是一个"完成"的大型菜单通常会悄然让一半用户失败的原因。

样式、皮肤和定制器

UberMenu 提供三个层次的样式设置，如果你愿意，可以完全不接触 CSS。

皮肤是随插件提供的现成 CSS 包（它们存放在插件的 assets/css/skins 文件夹中）。选择一个作为起点，这样菜单就不会显得简陋，然后在此基础上进行调整。开发者可以通过以下方式注册自己的皮肤包： ubermenu_skin_packs filter，这是在不编辑核心文件的情况下提供品牌皮肤的干净方式。

样式自定义 是无需代码的细节控制面板。如截图所示，你可以设置菜单栏背景、边框和圆角，透明菜单栏选项，以及顶级排版（字体大小、行高、文字转换、字重、颜色以及激活/悬停颜色）。这些设置让菜单感觉是你网站的一部分，而不是后加上的。

定制器 通过实时预览，它为您提供同样的控制。您更改一个值，就能立即在真实网站上看到更新，这远比保存-刷新-保存-刷新省心得多。

有一项设置值得特别说明。 Force Styles 告诉 UberMenu 用自身的 CSS 覆盖主题已有的菜单样式。 关键问题在于： 如果您对主题菜单样式的定制程度较高，关闭 Force Styles 会让 UberMenu 看起来半成品且错乱；开启它又会覆盖您本想要保留的样式。没有绝对正确的答案。切换一下，查看效果，然后选择与您主题冲突较小的那个。

如果您使用过像 Astra Pro 这样的主题，您已经知道主题菜单样式有多固执。预计需要花些时间决定菜单栏上谁说了算------是主题还是 UberMenu。

巨型菜单在何处大显身手

并非每个网站都需要巨型菜单。一个只有五页的宣传网站更适合使用简单的下拉菜单。以下场景才能真正带来回报。

大型在线商店。 这是一个教科书式的案例。当你在数十个品类间进行销售时，巨型子菜单能让购物者同时看到"男装""女装""童装""配饰"和"促销"等大类，每个大类下还有子类、特色图片和搜索框。搭配WooCommerce购物车短代码后，导航栏就能真正实现销售转化。如果你商店的主题菜单已经不够用，这正是升级之选。

大学或大型机构。 大学面临严峻的导航难题：招生、学术、研究、校园生活、体育，每个类别都有二十多个子页面。平铺式菜单行不通。分组式的巨型菜单配上整洁的列和区块标题，才能让大型机构网站保持易用性，而UberMenu的列网格正是为此而设计。

多服务型企业。 如果你经营一家多服务型企业（比如同时提供屋顶、管道、电气和翻新服务的承包商），巨型菜单可以让你在一个面板内展示所有服务，外加"获取报价"行动号召和服务区域地图。访客无需点击三次就能找到所需服务。

内容出版商。 杂志和大型博客使用巨型菜单来同时展示分类结构和近期文章。这 [ubermenu-recent-posts] 内容短代码将菜单变成发现界面，而不仅仅是目录。

共同点：巨型菜单的价值在于，当你有太多导航内容，普通下拉菜单无法容纳而不隐藏项目时，它才真正有用。如果你的菜单可以轻松放在普通下拉菜单中，那你就不需要这个插件------这是评测中诚实的话。

开发者参考

这是UberMenu让人惊喜的地方。它是一个专注的插件（79个PHP文件），而不是一个庞大的框架，但它提供了真正的开发者接口：大约57个独特的 ubermenu_ 过滤器和少量动作，加上短代码、小工具和配置访问器。这里没有营销夸大，它有几十个过滤器，而不是几百个，而且都是恰到好处的。

没有REST API，也没有WP-CLI命令。不要去找 wp ubermenu 命令或 /ubermenu/v1 路由，因为它们不存在。扩展模型是过滤器、短代码、 ubermenu_op() 配置访问器和小工具。仅此而已，对于一个导航插件来说，这是正确的接口。

在代码中强制子菜单类型。 该 ubermenu_submenu_type 过滤器允许你通过编程方式覆盖项目的子菜单类型，当你希望某个特定项目始终显示为超级面板（mega panel）而忽略其保存的设置时，这很方便。

bash 复制代码

add_filter( 'ubermenu_submenu_type', 'mysite_force_mega', 10, 4 );
function mysite_force_mega( $submenu_type, $item, $depth, $args ) {
    // Force menu item 42 to always use a mega submenu.
    if ( isset( $item->ID ) && 42 === (int) $item->ID ) {
        return 'mega';
    }
    return $submenu_type;
}

覆盖菜单项的UberMenu设置。 该 ubermenu_item_settings 过滤器传递项目的设置数组和项目ID，因此你可以更改每个项目的配置而无需打开设置对话框。

bash 复制代码

add_filter( 'ubermenu_item_settings', 'mysite_item_settings', 10, 2 );
function mysite_item_settings( $settings, $item_id ) {
    if ( 42 === (int) $item_id ) {
        $settings['align'] = 'full_width';
    }
    return $settings;
}

向菜单链接添加属性。 该 ubermenu_anchor_attributes 过滤器允许你添加或更改菜单项锚点的HTML属性，这是你附加一个 data- 属性、跟踪钩子或一个 rel 值。

bash 复制代码

add_filter( 'ubermenu_anchor_attributes', 'mysite_anchor_atts', 10, 4 );
function mysite_anchor_atts( $atts, $item_type, $item_id, $object ) {
    $atts['data-track'] = 'mainnav-' . $item_id;
    return $atts;
}

过滤已渲染的项目标题。 该 ubermenu_menu_title 过滤器提供了标题以及菜单、配置和参数上下文，以便你可以在渲染时追加标签或转换文本。

bash 复制代码

add_filter( 'ubermenu_menu_title', 'mysite_menu_title', 10, 4 );
function mysite_menu_title( $title, $nav_menu_id, $config_id, $args ) {
    if ( 'Sale' === $title ) {
        $title .= ' <span class="hot">!</span>';
    }
    return $title;
}

更改默认配置值。 该 ubermenu_settings_defaults 过滤器接收默认数组，并让你在代码中提供自己的基准配置，这在跨多个站点维护相同 UberMenu 设置时非常有用。

bash 复制代码

add_filter( 'ubermenu_settings_defaults', 'mysite_um_defaults' );
function mysite_um_defaults( $defaults ) {
    $defaults['responsive_breakpoint'] = '959';
    return $defaults;
}

在代码中读取设置。 当你需要了解某个配置当前设置为什么值时，使用 ubermenu_op() 访问器。它从给定的配置部分读取 UberMenu 选项，并可选地带有默认值。

bash 复制代码

// Read the responsive breakpoint from the 'general' section.
$breakpoint = ubermenu_op( 'responsive_breakpoint', 'general', '959' );

除此之外，还有更多的过滤器名称值得记住，尽管我无法猜测它们的确切参数列表： ubermenu_row_atts （行标记属性）， ubermenu_icon_custom_class （图标类）， ubermenu_dp_custom_taxonomies （动态术语项目的来源）， ubermenu_custom_item_layout_data 自定义布局 ubermenu_settings_panel_fields 和 ubermenu_settings_panel_sections 扩展控制面板本身）， ubermenu_wpml_* 系列（多语言行为），以及 ubermenu_woocommerce_* 系列（ubermenu_woocommerce_product_price， ubermenu_woocommerce_sale_badge_content以及更多）。切换标记也可通过...过滤， ubermenu_toggle_class 和 ubermenu_toggle_html_atts。

短代码和小工具。 该 [ubermenu] 短代码将配置好的菜单放置在任何位置，这是在区块主题上的集成路径。布局短代码（[ubermenu-col]， [ubermenu-colgroup]）在超大面板内构建列结构。内容短代码（[ubermenu-search]， [ubermenu-recent-posts]， [ubermenu-map]， [ubermenu_image_portal]）注入有效的内容。而该 UberMenu_Widget 小工具让你无需代码即可将菜单放置在任何小工具区域。

一些公共辅助函数 为主题开发者完善界面： ubermenu_get_menu_items_data()， ubermenu_get_menu_item_data( $item_id )、以及 ubermenu_get_item_layouts() 让您可以通过编程方式访问 UberMenu 所整理的菜单数据，这对于在已配置菜单之上构建自定义功能非常便捷。

如果您是开发者并比较扩展模型，会发现这比页面构建器的界面更清晰。像 Elementor Pro 这样的构建器提供可直观配置的导航组件，而 UberMenu 的筛选器集允许您通过主题或小型插件控制菜单输出，当您维护多个共享同一导航模式的站点时，这是正确的方式。

大多数买家真正想要的是将 UberMenu 与另一款旗舰级超级菜单插件以及不采取任何操作进行比较。以下是我的对比框架。

	默认 WordPress 菜单	Max Mega Menu	UberMenu
大型子菜单	否	是	是（全宽、分组、选项卡式）
菜单中的内容	否	有限（小工具）	搜索、文章、地图、图片、WooCommerce 购物车
样式控制	仅主题	后台主题编辑器	皮肤 + 定制器 + 样式自定义
定价模式	免费	免费核心，付费 Pro 扩展	一次性购买，无续费
最佳适用场景	小型网站	希望以简洁免费起步的网站	希望完全控制的内容丰富的网站

一些可衡量的指标，为那张表格提供依据。

定价模式。 这是最明显的区别，也是许多买家决策的关键。UberMenu 是 CodeCanyon 上的一次性购买，常规许可证通常在几十美元左右，无需每年续费。Max Mega Menu 有免费核心，但其专业版功能需要每年支付续费许可证才能保持更新。几年下来，一次性许可证是更便宜的开销，你应该把它与你实际需要新功能的频率进行权衡。

页面权重。 超级菜单并非免费。CSS、JavaScript 以及你放在其中的任何图片，都会在菜单出现的每个页面上加载，而菜单出现在每个页面上。实际上，对于一个样式化的菜单来说，这通常会增加 30 KB 到 60 KB 的资源，如果你在面板中塞入图片和小工具，这个数字会迅速攀升。两个插件都有这个成本；区别在于你选择在菜单中放多少内容。这是真实存在的，也是需要诚实面对的主要问题。

移动端覆盖。 超过 50% 的访客通常通过手机访问，因此响应式模式并非锦上添花，而是大多数用户将体验到的实际方式。两个插件都提供了响应式切换。决定性因素是你实际会配置和测试哪一个，而不是哪个规格表更长。

我不会假装一个插件在所有方面都胜出。如果你想要最低门槛的免费起点，Max Mega Menu 的免费核心是一个不错的起点。如果你想要最深入的菜单内容功能、最广泛的样式控制以及一次性价格，UberMenu 是更强的选择。两者都很成熟，都被广泛使用，当你的导航变得复杂时，它们都会比默认的 WordPress 菜单表现更好。

不要把你的超级菜单变成垃圾场

这是评论中源于观察错误的部分，而非来自功能列表。有两个反复出现的失败模式，一旦你意识到它们，就很容易避免。

第一个问题是内容过溢的大型菜单。由于 UberMenu 允许你把所有东西（列、图片、小工具、最新文章、地图）放进一个子菜单，人们就这么做了。导航菜单悄悄地变成了一个杂乱的着陆页，让访客不知所措，而不是引导他们。好的导航是关于帮助某人快速找到一样东西。一个六列六十个链接的墙恰恰相反，它把真正重要的三条链接埋没在五十七条不重要的链接之下。而且它还在每个页面加载所有这些标记、CSS 和每个菜单图片，从而拖慢了网站上每个访客都会接触到的那个元素。决定大多数访客真正需要的少数路径，并围绕这些路径设计菜单。克制才是这里的特性。

第二个问题是仅考虑桌面的思维。一个在宽屏上看起来很棒的大型菜单，在手机上可能变成破碎、无法点击的混乱局面，而你的流量可能有一半以上来自手机。UberMenu 拥有真正的响应式模式（切换按钮和移动菜单），但需要配置和测试。设置断点，检查子菜单是否通过点击而非悬停（触屏无法执行悬停）展开，确保点击目标足够大以便拇指操作，确认菜单在加载时不会挤开内容或导致布局偏移。跳过这一步的代价是丢失移动端的转化，而这些转化在桌面预览中永远看不到，因为访客在你意识到问题之前就已经离开了。构建菜单，然后在实际手机上打开它，确认无误后再宣告完成。每次都这样。

移动端、速度，以及那些容易出问题的地方

在发布之前需要规划的几个现实问题。

主题兼容性。 自动集成适用于任何注册了经典菜单位置的主题（大多数主题都是如此）。区块主题（全站编辑）是个例外：它们并不总是暴露一个经典位置供 UberMenu 附加。解决方法很简单：使用 [ubermenu] 短代码或小工具进行手动放置，但在认为自动切换能找到你的导航之前，值得了解这一点。

主题样式冲突。 你的主题已经设计了菜单样式，UberMenu 也是如此。当它们不一致时，你会得到一个半成品的菜单。"强制样式"设置正是为此存在的，但这是一个粗暴的手段：开启时，UberMenu 胜出并覆盖；关闭时，你的主题胜出，UberMenu 可能看起来没有样式。预计要花一点时间选择胜出者，并依赖定制器的实时预览，这样你就不会瞎猜了。

页面重量，实话实说。 我要再说一遍，因为这很重要：菜单的CSS和JS会在每个页面上加载，你添加到面板的每张图片都是每个页面上的额外请求。一个简洁的基于文本的超级菜单几乎不消耗什么资源。而一个在每个列中包含小部件的图片密集型菜单，则会给最常加载的元素增加真正的负担。确保菜单图片经过优化且尺寸正确，不要过度填充面板，并对页面进行缓存，这样菜单周围的HTML就不会在每个请求时重建。像WP Rocket这样的缓存插件虽然不会缩小菜单自身的资源，但它能让页面其他部分保持快速，这样你唯一需要管理的就只有菜单的重量了。

移动端测试。 上文已提及，我特意重复。UberMenu最常见的一个错误就是制作了桌面菜单，却从未在手机上打开检查。请务必进行手机端测试。

WooCommerce和WPML。 两者都是一流的。购物车简码和产品筛选器让商店菜单真正实用，而WPML筛选器则能处理多语言菜单。如果你使用其中任何一个，都在支持范围之内。

常见问题

UberMenu能与我的主题兼容吗？

几乎可以肯定能，只要你的主题注册了经典菜单位置（大多数主题都这样）。UberMenu使用自动集成来接管该位置的输出，无需编辑主题文件。不过要诚实地说一个注意事项：样式方面。你的主题现有的菜单CSS可能会与UberMenu的冲突，你需要使用"强制样式"开关和定制器来决定谁胜出。为此预留一点时间，尤其是对于样式复杂的主题。

它是否支持区块主题和全站编辑？

支持，但入口不同。区块主题不一定提供经典菜单位置供自动集成抓取。在这种情况下，你需要手动放置菜单，使用 [ubermenu] 短代码或UberMenu小工具。它能工作，只是需要手动操作，而不是一键分配位置。

它会拖慢我的网站速度吗？

它确实会增加网页"重量"，你需要对此有清醒认识。UberMenu会在菜单出现的每个页面上加载自身的CSS和JavaScript，以及你放入面板中的每一张图片。一个精简、基于文本的大型菜单几乎不会增加什么负担。而一个图片密集、每列都带有小工具的菜单，会为你加载最重的元素增加实实在在的KB数。请保持菜单图片经过优化，不要过度填充面板，并对页面进行缓存。

它在移动设备和触控设备上能用吗？

能。低于你设置的断点宽度时，菜单会折叠成一个汉堡图标，点击后打开一个可触摸的垂直移动菜单。关键点在于它需要配置和测试，而不仅仅是启用。仅靠悬停交互在触控设备上不奏效，因此要确认子菜单在点击时展开，且点击目标足够大。始终在真机上测试。

我可以在菜单中放置联系表单或小工具吗？

可以。一个菜单项可以容纳任何WordPress小工具，因此新闻通讯表单、自定义HTML区块或促销小工具都可以放在导航中。UberMenu还提供了专用的内容短代码，用于搜索框、最新文章、谷歌地图和图片。只是要忍住把所有东西都塞进一个面板的冲动。

UberMenu vs Max Mega Menu，我该选哪个？

两者都是成熟的核心插件。Max Mega Menu 有免费核心，所以如果你想不花钱尝试超级菜单，它是门槛更低的起点。UberMenu 在菜单内容深度、样式控制以及一次性定价模式（相对于 Max Mega Menu 的年度 Pro 授权）上胜出。如果你确定需要完整功能集且偏好一次性付款，UberMenu 是更划算的长期选择。

会与主题现有的菜单样式冲突吗？

可能会，这是最常见的摩擦点。你的主题有自己菜单样式，UberMenu 也有自己的样式，有时会冲突。"强制样式"设置让 UberMenu 覆盖主题的菜单 CSS，但这是全有或全无的，所以需要测试两种状态。定制器的实时预览功能让这个过程远比保存再刷新的猜测方式轻松。

我能在同一个网站上运行多个超级菜单吗？

可以。UberMenu 支持多个配置，每个菜单位置一个配置，每个配置有各自独立的设置。一个厚重的头部超级菜单和一个轻量的页脚菜单可以共存，拥有完全不同的布局和样式。

它支持 WooCommerce 和多语言网站吗？

都支持。UberMenu 自带 WooCommerce 短代码，用于实时购物车信息和购物车链接，还有产品价格和促销徽章的过滤器，因此商店菜单可以真正具备功能性。对于多语言网站，WPML 集成过滤器可处理翻译后的菜单。

总结

UberMenu 只做一件事，而且无需你放弃已经熟悉的 WordPress 菜单界面。这正是我不断选择它的原因。你无需学习新的菜单构建器；只需为已有的菜单项添加一个设置弹窗，决定哪些项展开为超级面板。对于分类繁杂的商店、站点地图庞大的大学，或者任何顶部导航已悄然变得难以使用的企业来说，这正是合适的工具。

区分优秀与糟糕的 UberMenu 配置的两个因素与插件本身无关，而完全在于克制。不要把所有内容塞进一个面板，也不要发布你只在桌面上测试过的菜单。做好这两点，你就能获得真正帮助用户找到信息的导航，而这正是全部意义所在。

它不适合只有五个页面的网站，也不会神奇地让臃肿的菜单变快。但当你的导航需求超越了简单的下拉菜单时，UberMenu 是值得你花钱的两个品牌之一，并且当你追求功能深度时，其一次性定价策略使其比订阅制竞争对手更值得推荐。