如何向 WordPress 添加超级菜单（+5 个最佳插件）

菜单在您网站的设计和功能中发挥着重要作用。 它们可以帮助访问者在您的页面之间导航，并可以提高整体可用性。 尽管如此，当您拥有大量内容时，要弄清楚如何在不显得拥挤或混乱的情况下显示它可能具有挑战性。

这就是大型菜单的用武之地。WordPress 大型菜单可以让您的网站看起来更专业，并帮助人们更轻松地找到他们正在寻找的内容。 另外，您可以使用多种方法将一种方法添加到您的网站。

在这篇文章中，我们将解释什么是超级菜单以及在 WordPress 中使用超级菜单的好处。 然后，我们将引导您完成创建一个并探索五个最佳大型菜单插件选项的选项。

什么是 WordPress 中的超级菜单？

您的 WordPress 菜单是您用来组织和显示网站页面的结构。 它通常位于站点的顶部——尽管它也可以位于侧面或以另一种独特的方式显示。

要访问内置菜单系统，您可以先登录您的 WordPress 网站。 然后，从您的管理仪表板中，导航到外观 →菜单。

默认情况下，WordPress 使用标准菜单，显示页面列表，有时带有单列下拉菜单。 没有额外的信息或内容，如图像、描述等——它只是一系列列表。 它通常非常简单明了，但在涉及页数或卷数或可以包含的信息时确实会限制您。 这是 WooCommerce 的一个示例：

超级菜单是一种下拉菜单，允许用户在一个地方访问大量内容。 大型菜单经常在电子商务网站上使用，并且在其他类型上也越来越受欢迎。 您可以在 Nalgene 网站上看到一个示例，该示例以更多的横向样式展示了产品照片、滑块和其他内容：

主要区别在于大型菜单通常具有多列内容，而传统的下拉菜单只有一列。 这样可以提供更强大和更全面的菜单，这对于具有大量信息的网站特别有用。

为什么在 WordPress 中使用大型菜单？

使用大型菜单的好处之一是它可以减少导航到特定内容所需的点击次数。 这对于在您的网站上寻找特定内容的访问者来说非常有用，但它还可以帮助首次访问者更有效地浏览您的网站，从而改善他们的用户体验。

超级菜单还可用于改善网站的外观和感觉，甚至宣传特定内容或鼓励您希望访问者采取的行动。 此外，它们是高度可定制的——因此它们可以发挥您品牌的其余部分，以提供无缝的、视觉上吸引人的体验。

如何创建 WordPress 大型菜单

有几种不同的方法可以在 WordPress 中创建大型菜单。 一种选择是通过添加自定义代码手动完成。 另一个（更快更容易）的选择是使用插件。 让我们看看如何使用这两种方法向 WordPress 添加超级菜单。

手动创建大型菜单（无插件）

如果您习惯使用站点文件，这可能是创建高度独特的东西的好选择。

在此之前，备份您的 WordPress 网站很重要。 您还可以考虑创建一个临时站点来构建和测试您的大型菜单，然后再将其发布。 这将帮助您避免任何破坏实时站点功能的问题。

首先，浏览到 WordPress 仪表板中的外观→菜单并命名您的菜单。

单击创建菜单按钮。 拖放要包含在大型菜单中的页面，并在必要时将它们缩进为子菜单。

完成后，您可以选择Save Menu 。

接下来，导航到您的 cPanel 的文件管理器或使用文件传输协议 (FTP) 客户端连接到您网站的文件。 通过转到/ wp-content → /themes → /your-theme-or-child-theme → /style.css找到您的主题的样式表。 在底部，添加以下代码行：

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

当有人将鼠标悬停在顶级项目上时，这将使您的子菜单项出现。 现在，我们将自定义代码以使其更具视觉吸引力，确保每个子级别项目以全角显示，项目的各个部分彼此相邻。 添加此代码：

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

然后，您可以使用样式，使其看起来像您想要的那样，与您的品牌和网站的其他部分保持一致。 例如，您可能想要切换大型菜单的背景颜色或加粗某些项目。 您可能还想调整列间距或添加照片等额外元素。 如果您是开发人员或有一定程度的代码经验，您可以制作您的大型菜单，使其看起来像您想要的那样！

想要更深入的指南？ Tuts+ 提供了完整的演练。

创建没有插件的大型菜单的另一个选项是检查主题的内置选项。 一些，如 Hestia 主题，默认包含大型菜单选项。 不过，情况并非总是如此。

使用 WordPress 插件创建大型菜单

如果您不习惯编辑站点文件或者您的主题不提供内置的超级菜单选项，那么您可以使用另一种在 WordPress 中创建超级菜单的方法是使用插件。 有很多可用的选项，我们将在下一节中讨论。

虽然这比手动创建更安全，但您仍应在进行任何更改之前备份您的 WordPress 网站。

插件的具体特性和功能将根据您决定使用的工具而有所不同。 但总的来说，这个概念是一样的。

我们将使用 Max Mega Menu 作为示例。 首先，您可以在 WordPress 网站上安装并激活该插件。

接下来，您需要通过导航到Appearance → Menus来启用超级菜单功能。 您可以为菜单选择所需的位置，然后单击启用旁边的框。

完成后保存更改。 要自定义您的超级菜单外观和设置，您可以转到超级菜单→菜单主题。

在这里，您可以找到多种用于设置菜单样式的选项。 您可以修改菜单类型及其外观和功能。

五个最好的 WordPress 大型菜单插件

如果您决定要使用大型菜单 WordPress 插件，则有很多选项可供选择。 在研究它们时，重要的是要考虑您正在寻找的特定功能以及您的预算。 考虑到这一点，让我们详细了解五个最好的 WordPress 大型菜单插件。

1. 最大超级菜单

Max Mega Menu 是一个非常受欢迎的插件，可让您轻松地将高质量、可自定义的菜单添加到您的 WordPress 网站。 它包括一个易于使用的拖放构建器。 它还支持您网站上不同位置的多个大型菜单。

Max Mega 菜单的主要特点：

• 多个可单独配置的菜单位置
• 网格布局构建器
• 菜单悬停和过渡选项
• 拖放式构建器
• 简码
• 菜单项图标
• 一个搜索框
• 菜单标志

Max Mega 菜单的优点：

• 有免费和高级选项可供选择。
• 它是轻量级的，代码简洁。
• 它包括对 WooCommerce 和 Easy Digital Downloads 的支持。
• 您可以将大型菜单放置在多个位置。
• 这些小部件可让您添加地图、联系表格等。
• 您还可以从头开始构建大型菜单或使用现有菜单。
• 键盘导航可提供更好的可访问性。

Max Mega 菜单的缺点：

• 高级自定义选项仅适用于专业许可证。
• 高级计划没有免费试用。

易于使用：

Max Mega Menu 非常易于使用。 它会自动将现有菜单转换为大型菜单。 它具有易于浏览的用户友好界面。 专业版许可证还包括更新和优先支持。

定价：

Max Mega Menu 提供具有有限自定义选项的免费版本。 具有高级功能的 Pro 计划的单站点许可证起价为 29 美元。 这还包括一年的支持。

2. 四重菜单

QuadMenu 是另一个流行的大型菜单插件，无论您的经验水平如何，它都易于使用。 这个灵活的工具包括一个直观的拖放构建器以及用于为 WordPress 构建菜单和子菜单的各种样式和自定义选项。

QuadMenu 的主要特点：

• 拖放式构建器
• 多个菜单位置
• 画布外、粘性和垂直菜单
• 对齐链接的选项
• 浮动下拉菜单
• Font Awesome 图标和 Google 字体
• 下拉动画
• 多种过滤器
• 显示小部件

QuadMenu 的优点：

• 有免费版和高级版。
• 它适合初学者和开发人员。
• 它支持子主题。
• 有自动和手动菜单集成。
• 它直观且易于使用。
• 专业版提供选项卡和轮播菜单。

QuadMenu 的缺点：

• 高级样式选项需要专业许可证。
• 实时预览选项有限。

易于使用：

QuadMenu 适合初学者和开发人员。 拖放式构建器可让您快速轻松地创建和自定义大型菜单。

价钱：

QuadMenu 有一个免费版本。 单个站点的 Pro 许可证起价为 30 美元。

3. 优步菜单

如果您正在寻找优质的大型菜单构建器，UberMenu 值得一试。 这款功能强大、功能丰富的工具使用复杂的网格系统，让您可以快速构建具有专业外观的大型菜单。

UberMenu 的主要特点：

• 独特的网格系统
• 超过 50 种风格设置
• 动态项目生成
• 基于帖子、类别等的子菜单
• 在菜单中添加选项卡的选项
• 触控式菜单
• 下拉 CSS3 过渡
• 多个菜单触发器（悬停、悬停意图和单击）
• 各种菜单位置
• 灵活的布局

优步菜单的优点：

• 它在 WordPress 网站所有者中得到广泛使用和高度评价。
• 有添加自定义 HTML、短代码和小部件的选项。
• 它使用原生 WordPress 定制器界面。
• 有无限的菜单主题。

优步菜单的缺点：

• 只有高级版本可用。
• 根据您的主题，如果您没有 CSS/PHP 编程技能，它可能不是最佳选择。

易于使用：

对于有经验的 WordPress 用户来说，使用 UberMenu 可能会轻而易举，因为该界面是建立在本机定制器之上的。 您可以在构建菜单时查看其实时预览。 但是，对于 WordPress 初学者来说，这可能比直观的拖放构建器界面更难导航。

定价：

单个站点的 UberMenu 许可证费用为 26 美元。 这包括六个月的开发人员支持。

4.元素套件

如果您熟悉并使用 Elementor 页面构建器，ElementsKit 是一个值得考虑的优秀大型菜单插件。 该工具包括一个扩展的自定义模块库，具有页眉和页脚构建器。

ElementsKit 的主要特点：

• 实时内容界面
• 自定义模块库
• 页眉和页脚构建器
• 视差滚动
• 超过 200 个预先设计的页面模板
• 倒计时小部件
• 下拉动画
• 关闭画布、粘性和垂直菜单
• 字体真棒图标
• 明暗主题
• 两种移动菜单布局
• 自定义 CSS

ElementsKit 的优点：

• 它与 Elementor 页面构建器完全集成。
• 它包括拖放功能。
• 它是初学者和用户友好的。
• 它具有图标和徽章文本颜色的自定义。
• 它具有内置的 WooCommerce 功能。
• 它提供了高级的大型菜单选项。

ElementsKit 的缺点：

• 除非您使用 Elementor 页面构建器，否则它并不理想。
• 如果您只是在寻找一个大型菜单构建器工具，那可能会让人不知所措。

易于使用：

ElementKits 是一个简单易用的多功能工具。 如果您不熟悉 Elementor，则该界面可能需要一些时间来适应。 虽然，如果您已经使用了页面构建器插件，您可能很快就会掌握这个附加组件的窍门。

定价：

ElementsKit 提供免费版本。 单个站点的高级许可证起价为每年 39 美元。

5. WP 超级菜单

如果您正在寻找一个简单直接的免费增值工具来在 WordPress 中构建大型菜单，那么 WP Mega Menu 是另一个可靠的选择。 该插件易于使用，并提供了为各种网站构建优质大型菜单所需的所有基本特性和功能。 对于免费工具，它还提供了一组令人印象深刻的自定义和样式选项。

WP Mega Menu 的主要特点：

• 直观的导航
• 拖放界面
• 创建和保存菜单主题的选项
• 徽标、搜索栏和背景图片
• Google 字体和 Font Awesome 图标
• 社会图标
• 菜单标签

WP Mega Menu 的优点：

• 它完全免费下载和使用，并提供专业升级。
• 它易于导航和使用。
• 它具有其他插件仅包含在高级版本中的功能。
• 它可以选择创建和保存菜单主题以在多个网站上使用。

WP Mega Menu 的缺点：

• 与其他插件选项相比，它缺乏为开发人员设计的工具。
• 免费版本没有粘性或画布外选项。

易于使用：

WP Mega Menu 是一个对初学者友好的插件，有很多选项。 它带有一个易于理解和导航的直观界面。

定价：

WP Mega Menu 是免费的。 但它还提供单个许可证每年 29 美元起的高级计划。

WordPress 顶级大型菜单插件的比较

有关大型菜单的常见问题解答 (FAQ)

在这一点上，希望您对如何在 WordPress 中创建和添加大型菜单有充分的了解。 但是，让我们花点时间来总结一些常见问题解答 (FAQ)。

我可以将图像和图标添加到 WordPress 大型菜单吗？

是的，您可以将图像和图标添加到 WordPress 大型菜单。 一些插件内置了对此的支持。 或者，您也可以通过编辑网站代码来添加图像和图标。

我可以在我的 WordPress 侧边栏中添加一个大型菜单吗？

是的，您可以在 WordPress 侧边栏中添加一个大型菜单。 您可以使用一些不同的插件将大型菜单添加到侧边栏。 大多数让您将菜单显示为小部件的插件也可以让您将它们添加到侧边栏。

开始自定义您的 WordPress 菜单

菜单在您网站的设计和功能中起着至关重要的作用，因为它们可用于改善任何网站的外观和感觉。 因此，如果您有一个包含大量内容和页面的大型 WordPress 网站，您可能需要考虑添加一个大型菜单。

正如我们在这篇文章中所讨论的，您可以使用三种主要方法在 WordPress 中创建大型菜单。 一种是使用您的主题选项来添加大型菜单。 第二种是手动编码。 如果这些都不可能，或者如果您只是想节省一些时间，您可以尝试一个超级菜单插件，如 Max Mega Menu、QuadMenu 或 ElementsKit。

您想进一步提高您的 WordPress 网站的性能吗？ 除了提供简单的自动备份和其他 WordPress 安全功能外，Jetpack 还可以帮助提高您网站的速度和用户体验！