如何使用UberMenu插件创建WooCommerce Mega Menu

网站上显示的菜单是访问整个网站内容的门户。 它们为用户提供了一种快速简便的方法，以在他们的网站上准确找到所需的内容。

不幸的是，WordPress主题中的菜单自定义选项非常有限。 即使您已经为站点购买了专用主题，这些菜单也只能为您提供一些基本的自定义功能。 通过使用UberMenu WordPress插件，您将可以灵活创建适合您网站任何需求的菜单。 这个功能丰富的插件是市场上最先进的WordPress菜单，如果您需要的不仅仅是几个基本的菜单自定义选项，那么它是必不可少的。

在本文中，我将通过为在线服装店创建嵌套的标题菜单，向您展示此插件的功能。 观看下面的视频，了解我们的操作方式。

我们将要建设的

电子商务商店需要时尚且结构深刻的菜单，以使用户可以轻松浏览网站的方式对公司的所有产品进行分类。 我们的服装公司也不例外。 通过使用UberMenu插件 ，我们将能够创建嵌套菜单结构以适合我们所有不同的服装类别和子类别。 我们还将对菜单进行样式设置以使其符合我们网站的主题。

我们将从在WordPress仪表板中设置实际菜单开始，然后转到插件的设置以进一步自定义菜单。 下面是WordPress电子商务服装网站上完成的嵌套和样式菜单外观的图像。

创建超级菜单

首先，我们将从菜单的创建开始。 为此，我们首先需要安装UberMenu插件。

安装插件后，我们可以转到WordPress仪表板中的外观>菜单 。 我们将在菜单编辑器中通过单击编辑器顶部的“ 创建新菜单”链接并将其标记为“ 电子商务菜单 ”来创建新 菜单 。

从这里开始，我们可以开始添加所有页面。 对于我们的服装店菜单，我们要确保在详细菜单中包含所有男女服装，以便我们的客户可以找到所需的确切服装。 我们将从菜单编辑器左侧的页面下拉菜单中添加30个不同的页面。 这些页面包括男女服装。 我们将选中所有30个类别的复选框，然后单击“ 添加到菜单”按钮。 这将显示菜单结构编辑器中的所有页面。

现在该使用我们所有不同的子类别创建嵌套菜单了。 我们将在顶部拖放男女页面。 同样，创建此自定义菜单的目的是确保网站易于浏览。 在“ 添加菜单项”的左侧编辑器中，有一个名为UberMenu高级项的部分。 通过打开此菜单，您可以看到可用于添加以构造菜单的项目列表。 对于我们的菜单，我们想创建标签来嵌套我们的不同类别，如下图所示。

要添加这些标签，我们将选中“ 标签块 ”旁边的框 ，然后点击添加到菜单 。 再次重复此过程，因为我们需要两个选项卡，一个用于男性，一个用于女性。 从那里开始，我们将移动每个选项卡块，以使其在男性和女性页面的下方嵌套。 这是应该的样子。

添加完这些标签后，我们现在将构建服装类别。 男士类别的第一页将是运动服页面。 我们将拖放此页面以使其位于选项卡块的正下方。 在此男装运动服类别中，还包括运动夹克，健身短裤和健身衬衫这些子类别。 这三种衣服将套在运动服衣服类别中。 到目前为止，我们的菜单与嵌套式男式运动服的外观相同。

现在，我们将重复此过程，将添加到菜单编辑器中其余页面的特定服装嵌套在其适当类别下。 我们将确保在女士的父类别下添加插入到编辑器中的第二个选项卡块。 将所有页面放在各自的位置后，菜单将显示如下。

造型UberMenu

现在我们已经创建了菜单结构，是时候继续菜单的样式了，以便它可以与我们网站的主题无缝结合。 转到 WordPress仪表板中的Appearance> UberMenu 。 这将打开UberMenu设置。

从这里开始，我们将单击菜单中的“ 基本配置”选项卡并设置菜单的外观。 从下拉菜单中，我们将选择“ 红色和黑色 ”皮肤，因为此红色顶级标题和黑色子菜单颜色将非常适合我们网站的主题。 这里有很多选项可供选择，因此请浏览它们，找到最适合您主题的选项。

如果您想查看不同外观的外观或查看在设置中所做的任何更改，则始终可以单击“全部显示”选项卡，然后单击“ 沙箱中的查看菜单”按钮。 这将在浏览器上打开一个单独的选项卡，您可以在其中查看使用UberMenu创建的任何菜单。

我们要更改的下一个设置是在UberMenu设置的“ 位置和布局”标签中。 向下滚动到“ 顶层菜单项”>“水平项对齐”。 我们希望顶级菜单项向左对齐，因此我们将单击“ 左”旁边的圆圈。

最后，我们将转到“ 样式自定义”选项卡。 我们将更改顶级标题和列标题的字体大小，以便我们的网站访问者可以轻松阅读它们。 我们将顶级字体大小更改为15并将列标题字体大小更改为13 。

现在我们已经完成了菜单的结构和样式，是时候将其集成到我们的网站了。

整合UberMenu

要将UberMenu集成到我们的网站中，我们将转到“ 集成”选项卡。 我们将在“ 自动集成主题位置”部分中选中“ 主要”框。 这将使我们刚刚创建的菜单被设置为主题的主菜单。

接下来，我们将转到WordPress仪表板中的主题>自定义>菜单 。 在菜单标题下，选择我们创建的电子商务菜单 。

最后，选择菜单底部的菜单位置标签，然后选择电子商务菜单 。

你有它！ 我们创建并实现了一个嵌套菜单，该菜单非常适合我们的电子商务网站。 要查看菜单创建过程和菜单集成，请观看下面的视频。

充分利用插件

UberMenu插件是一个非常复杂的插件，可让您自定义菜单的各个方面。 借助众多可用功能，很容易在插件设置的所有下拉菜单和文本字段中迷失方向。 下面，我收集了此功能强大的插件的三个最重要的功能，因此您只能将最重要的功能应用于菜单。

1.高级菜单项

在WP仪表板>外观>菜单下 ，您可以找到我们用来添加选项卡的UberMenu Advanced Items下拉菜单。 您不仅可以像在示例中一样在菜单中创建选项卡，还可以添加行，列，水平分隔线和菜单段以创建唯一的菜单结构。 您选择添加到菜单中的特定菜单项将取决于菜单的特定需求以及外观，因此需要对这些高级项进行试验。

2.添加图像和图标

添加图像和图标可以使您的菜单栩栩如生。 为此，请回到WordPress仪表板中的菜单 。 要将图标或图像添加到特定的菜单项，请将鼠标悬停在菜单项选项卡上，您会看到黑色的超级菜单按钮出现在其名称旁边。 单击此按钮，将弹出一个带有图像和图标部分的菜单。

3.自定义内容和简码

在菜单中添加自定义内容和简码将带来全新的可能性。 可以在WordPress网站中使用的所有简码都可以插入UberMenu，因此请在此处在框外思考，并添加有用的简码，以增强网站访问者的体验。

在我们的示例中，我们可以在单独的菜单项上添加商店位置的地图。 只需在我们标题为“ Location ”的页面上再次单击Uber按钮，然后向下滚动到自定义内容设置，然后单击它。 接下来，我们将添加我们的商店位置简码：

[ubermenu-map address="Boston, MA" zoom="15" title="My Store"]

这会将地图添加到您的UberMenu，以便您的网站访问者可以快速找到您的商店所在的位置。

您可以在此字段中插入任​​何文本，HTML或简码，因此请尝试最适合您的网站的方法！

结论

如果您经营的是企业或任何类型的网站，则需要易于浏览。 如果没有易于使用的导航，您的网站流量无疑会下降。 网站上具有完整的菜单，其中显示了网站的所有页面或部分，这是拥有易于浏览的网站的关键。

翻译自: https://code.tutsplus.com/tutorials/how-to-use-the-ubermenu-plugin-to-create-a-woocommerce-mega-menu--cms-34245