首页 » 博文 » wpbeginner » 最佳插件 » 如何在 WordPress 网站上添加超级菜单(分步)

如何在 WordPress 网站上添加超级菜单(分步)

您想在您的 WordPress 网站上添加大型菜单吗?

超级菜单允许您将数十甚至数百个链接排列到用户友好的列和行中。然后,您可以添加丰富的内容,例如图像和视频,使您的大型菜单更加有用。

在本文中,我们将向您展示如何逐步向您的 WordPress 网站添加大型菜单。

如何在 WordPress 网站上添加大型菜单(分步)

为什么要在 WordPress 网站上添加超级菜单?

WordPress 附带了一个拖放构建器,您可以使用它来创建各种菜单,包括下拉菜单、标题菜单等。甚至还有一些插件可以让您在 WordPress 主题中创建自定义导航菜单

但是,如果您的网站有大量内容,那么您可能需要创建一个大型菜单。这允许您将多列下拉菜单添加到标准 WordPress 菜单中。

您可以使用大型菜单在不同的标题和副标题下组织内容,以便访问者可以快速找到他们想要的内容。例如,如果您创建一个在线市场,那么您可以将所有产品类别和子类别排列在一个大型菜单中。

电子商务大型菜单的示例

大型菜单还可以向访问者显示丰富的内容,例如视频、文本、搜索和最近的帖子。

您还可以添加图像,这使得大型菜单更易于扫描。

内容丰富的大型菜单示例

也就是说,让我们看看如何轻松地将大型菜单添加到您的 WordPress 网站。

如何为您的 WordPress 网站创建大型菜单

在 WordPress 网站上添加大型菜单的最简单方法是使用Max Mega Menu。该插件允许您向大型菜单添加丰富的内容,包括视频、图片库、搜索等。

通过这种方式,您可以创建更具吸引力和有用的菜单。

WordPress 大型菜单

您还可以通过添加不同的颜色、更改字体大小和使用不同的图标来设计大型菜单的每个部分。

首先,您需要安装并激活该插件。如果您需要帮助,请参阅我们有关如何安装 WordPress 插件的指南。

在您的 WordPress 网站上启用超级菜单

激活后,转到超级​​菜单»菜单位置以查看可以添加超级菜单的所有不同区域。

根据您的WordPress 主题,您可能会看到不同的选项。

在 WordPress 网站或博客的不同区域启用大型菜单

首先,您需要在您想要使用大型菜单的每个位置启用它们。

为此,只需单击展开某个位置,然后选中其“启用”框即可。

在 WordPress 中启用超级菜单功能

之后,您可以更改将打开大型菜单的“事件”。

默认设置是“悬停意图”,这意味着访问者必须将鼠标悬停在大型菜单上几秒钟才能触发它。这适用于大多数WordPress 网站,但您也可以打开“效果”下拉列表并选择“悬停”或“单击”。

如果您选择“点击”,则访问者将需要点击才能浏览大型菜单。如果您担心访问者可能会意外触发菜单,这可能会很有用,这可能会令人沮丧。

同时,一旦访问者将鼠标移到“悬停”上,“悬停”就会打开您的大型菜单。这可以鼓励访问者探索网站的不同区域,因此您可能需要在登陆页面或网站主页上使用“悬停” 。

更改超级菜单触发事件

做出此决定后,您可以使用“效果”设置更改菜单的打开方式。

Max Mega Menu 有不同的动画可供您尝试,包括淡入淡出和向上滑动。您还可以更改动画的速度。通过尝试不同的动画,您可以创建一个吸引访问者注意力的大型菜单。

更改大型菜单上的动画效果

如果您不想使用任何动画,只需打开第一个下拉列表并选择“无”。

默认情况下,Mega Menu 不在移动设备上使用动画,因为智能手机和平板电脑的处理能力通常较低。但是,如果您想为移动设备访问者创建独特的动画,则可以使用“效果(移动设备)”区域中的设置。

如果您想在移动设备上测试大型菜单,请查看我们的指南,了解如何从桌面查看 WordPress 网站的移动版本

如果您从“事件”下拉菜单中选择“点击”,请确保接下来选择“高级”选项卡。

在这里,您可以使用“点击事件行为”来定义访问者单击大型菜单时会发生的情况。例如,第二次单击可能会关闭菜单或打开新链接。

更改大型菜单中的事件单击行为

您还可以查看更多设置,但这对于大多数WordPress 博客和网站来说应该足够了。

如果您对插件的配置方式感到满意,请单击“保存更改”。

要为更多位置启用大型菜单,只需遵循上述相同的过程即可。

为多个位置启用大型菜单

自定义超级菜单在您网站上的外观

下一步是配置大型菜单在您网站上的外观。

您可以通过选择屏幕左侧的“菜单主题”选项卡来执行此操作。

为大型菜单创建自定义主题

在此屏幕上,您可以更改箭头图标的方向、使用不同的行高、添加阴影等等。

当您对设置感到满意时,请不要忘记单击“保存更改”。

自定义大型菜单在 WordPress 网站上的外观

如果您想随时删除这些更改,只需选中“重置小部件样式”框,然后单击“保存更改”即可。

接下来,您可以自定义菜单栏,这是访问者在菜单处于默认折叠状态时看到的栏。

WordPress 大型菜单中的菜单栏示例

要进行这些更改,请单击“菜单栏”选项卡,然后使用设置更改背景颜色、填充、边框半径等。

您甚至可以通过在“菜单背景”部分中选择两种不同的颜色来创建颜色渐变。

将自定义颜色添加到 WordPress 超级菜单

如果向下滚动,则可以更改顶级菜单的外观。

这是第一行项目,当超级菜单处于折叠状态时可见。

自定义顶级菜单项的外观

由于它们非常重要,您可能希望使顶级菜单项脱颖而出。

例如,在下图中,我们使用不同的背景颜色。

网站大型菜单的示例

在“悬停状态”部分中,您可以突出显示当前选择的顶级菜单项。

例如,在下图中,我们使用了下划线效果。

将悬停状态添加到 WordPress 大型菜单

这可以帮助访问者查看他们在菜单中的位置,这对于需要大型菜单的网站特别有用。

如果您确实添加悬停状态,请滚动到屏幕底部并选中“突出显示当前项目”框。

突出显示大型菜单中的当前项目

之后,您可以更改子菜单的外观。

这是出现在顶级父级下的菜单,如下图所示。

WordPress 大型菜单的示例

要自定义子菜单,请单击“超级菜单”选项卡。

您现在可以使用这些设置来更改子菜单的背景颜色、增加半径以创建弯角、添加填充等。

自定义网站或博客上的子菜单

您可以使用小部件将内容添加到大型菜单中。例如,您可以添加一个 Gallery 小部件并显示您最流行的 WooCommerce 产品,或者在大型菜单中嵌入标签云。这些小部件可以提供额外的信息,或鼓励访问者单击某些菜单项。

您可以通过滚动到“小部件”部分来自定义这些小部件的外观。例如,您可以更改小部件标题的颜色、增加字体大小、添加填充以及调整对齐方式。

如何逐步在 WordPress 网站上添加大型菜单

在此屏幕上,您还可以自定义二级菜单项和三级菜单项在您的网站、博客或在线市场上的外观。这些是顶级菜单项的子项。

构建菜单时,可以添加四个甚至更多级别来创建嵌套的大型菜单。如果您这样做,那么 WordPress 将简单地对所有后续级别使用第三级样式。

您可以在下图中看到它的实际效果。第二级有红色文本,第三级和第四级都使用相同的蓝色文本。

如何为 WordPress 创建大型菜单

当您对菜单的设置感到满意时,请不要忘记单击“保存更改”。

如何在您的 WordPress 网站上添加超级菜单

完成大型菜单的自定义后,就可以将其添加到您的网站了。

只需转到外观»菜单

编辑 WordPress 网站上的菜单

如果您想将现有菜单变成大型菜单,请打开“选择要编辑的菜单”下拉列表并从列表中选择它。请注意,您选择的菜单必须分配到已启用大型菜单功能的位置。

如果您想从头开始,请单击“创建新菜单”,然后输入新超级菜单的标题。

在 WordPress 中创建导航菜单

然后,您可以选择要使用的位置,然后单击“创建菜单”。再次强调,这必须是您启用大型菜单的位置。

将内容添加到您的 WordPress 菜单

之后,添加所有页面、帖子、WooCommerce产品以及您想要包含在大型菜单中的任何其他内容。有关分步说明,请参阅有关如何在 WordPress 中添加导航菜单的初学者指南。

接下来,您需要将项目排列到要在大型菜单中使用的父菜单和子菜单中。要创建子菜单,请将项目拖动到父菜单下方,然后将其稍微向右拖动,然后释放它。

将页面和帖子排列到父子布局中

要创建多个级别,只需向右拖动项目即可使它们在彼此下方缩进。这类似于在 WordPress 中创建下拉菜单

启用超级菜单功能

完成后,单击展开“Max Mega Menu Settings”并选中“Enable”旁边的框。

启用超级菜单功能

在此框中,您还可以覆盖默认的大型菜单设置。这允许您为 WordPress 网站的不同区域创建独特的大型菜单,因此请继续进行您想要的任何更改。

之后,点击“保存”。

创建超级菜单布局

现在,将鼠标悬停在第一个顶级项目上,您将看到一个新的“超级菜单”按钮。继续并单击按钮。

配置 Max Mega 菜单设置

您现在将看到该顶级项目的所有设置。

默认情况下,Max Mega 菜单将使用弹出样式,其中子菜单从侧面“弹出”。要创建大型菜单,请打开“子菜单显示模式”下拉列表,然后选择“标准布局”或“网格布局”。

标准布局以列形式显示所有子菜单。

具有标准布局的大型菜单的示例

同时,网格布局允许您将子菜单项组织成列和行。

如果您想要展示大量内容(例如在线商店中的所有数字产品),或者考虑到非常具体的布局,那么这是理想的选择。

将菜单项排列成行和列

选择标准或网格布局后,您将看到分配给该父级的所有子菜单。

现在,您可以继续更改这些项目在大型菜单中的排列方式。

将标准布局添加到导航菜单

如果您使用标准布局,则可以使用右上角的下拉菜单更改列数。

如果您使用网格布局,则可以使用“+Column”和“+Row”按钮添加列和行。

将网格布局添加到 WordPress 菜单

当您对布局感到满意时,您可以使用拖放将子菜单项排列到不同的列和行中。

之后,是时候更改每个项目在列中占用的空间了。Max Mega 菜单将当前尺寸显示为总可用宽度的一部分。

例如,在下图中,两列都占用了一半的可用空间。

为 WordPress 菜单创建自定义布局

要更改项目的大小,只需单击其箭头按钮即可放大或缩小分数。

创建适合移动设备的超级菜单(仅限网格布局)

默认情况下,Max Mega Menu 将在桌面和移动设备上显示相同的内容。这可能是网格布局的问题,因为智能手机和平板电脑通常具有较小的屏幕,并且水平滚动可能很困难。

如果您使用网格布局,那么您可以为移动设备创建不同的大型菜单。例如,您可以使用更少的列,这样用户就不必水平滚动。通过这种方式,您可以创建一个适合移动设备的 WordPress 菜单

您可以使用“在移动设备上隐藏”图标隐藏整个列或行,该图标看起来像一个小手机。

如何在 WordPress 中创建移动响应菜单

只需打开和关闭图标,即可在桌面和移动设备上隐藏和显示不同的内容。

使用大型菜单小部件添加丰富的内容

完成后,您可以开始将小部件添加到大型菜单中。这允许您在子菜单中显示额外的内容,例如最近的评论、视频、图库等。

例如,您可以使用图像来促进在线商店的销售,或突出显示您的最新产品。

在线商店菜单中内容丰富

要添加小部件,只需单击打开“选择小部件…”。落下。

您现在可以从列表中选择一个小部件。

向网站导航添加丰富的多媒体内容

WordPress 会自动将小部件添加到列或行,但您可以使用拖放将其移动到新位置。

要配置该小部件,请继续并单击其小扳手图标。

在大型菜单中配置小部件

这将打开一个弹出窗口,您可以在其中向小部件添加内容并更改其设置。

根据您创建的小部件的类型,您将看到不同的选项。例如,如果您将音频音乐播放器小部件添加到大型菜单中,那么您将看到可以上传音轨的设置。

在 WordPress 中添加音频小部件

所有小部件都有一个“标题”字段,您可以在其中添加将显示在小部件上方的文本。

完成后,单击“保存”以存储更改,然后选择“关闭”。要将更多小部件添加到大型菜单中,只需遵循上述相同的过程即可。

将页面和帖子排列成网格布局

查看默认超级菜单设置

接下来,只需单击“设置”选项卡。

在这里,您可以使用复选框来隐藏或显示子菜单中的不同内容。

Max Mega 菜单设置

您还可以在移动设备和桌面上隐藏或显示子菜单,并更改对齐方式,以便子菜单在顶级父菜单的左侧或右侧打开。

如果您对默认设置进行任何更改,请不要忘记单击“保存更改”。

将图像图标添加到 WordPress 超级菜单

图像图标可以帮助访问者了解菜单项的含义,甚至无需阅读导航标签。这对于大型菜单特别有用,访问者可能更喜欢快速浏览内容而不是阅读每个导航标签。

带有图标的大型菜单的示例

您可以使用图标来突出最重要的内容。例如,您可以通过向“结帐”菜单添加购物车图标来鼓励访问者完成购买。

要将图像图标添加到导航菜单中,请单击“图标”选项卡。

将 dashicon 添加到 WordPress 菜单

您现在可以从内置库中选择任何 dashicon 或使用您自己的图像。如果您升级到 Max Mega Menu pro,那么您还可以访问其他图标字体、Genericons 和 FontAwesome。

完成在您的 WordPress 网站上配置超级菜单

完成所有这些设置后,您可以关闭弹出窗口以返回主外观»菜单页面。

您现在可以为每个顶级父级重复此过程。

当您对大型菜单的设置方式感到满意时,请单击“保存菜单”按钮以使其生效。

将大型菜单发布到您的 WordPress 网站

现在,只需访问您的网站即可查看正在运行的大型菜单。

我们希望本文能帮助您了解如何在 WordPress 网站上添加大型菜单。您还可以阅读我们关于最佳拖放 WordPress 页面构建器以及如何增加博客流量的指南。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top