您想在 WordPress 中创建下拉菜单吗?

当您将鼠标悬停在菜单项上时,下拉菜单会显示链接列表。您可以使用这些菜单在较小的空间中显示大量选项,并通过将链接组织到类别中来帮助访问者找到他们正在寻找的内容。

在本初学者指南中,我们将向您展示如何在 WordPress 中创建下拉菜单。

为什么在 WordPress 中使用下拉菜单?

WordPress 附带一个内置的菜单管理系统,可让您轻松地将导航菜单添加到您的网站。

导航菜单是指向您网站最重要页面的链接,通常显示在网站徽标旁边的一行中。

如果您要创建 WordPress 博客或创建只有几个页面的网站,那么将菜单创建为单行可能是有意义的。然后,访问者可以一目了然地看到您的所有重要页面。

但是,如果你如果您经营一家在线商店或大型网站,那么您可能拥有大量内容。将所有这些链接添加到菜单可能会让人不知所措,并使您的网站看起来很混乱。

下拉菜单通过仅在访问者将鼠标悬停在父项上时显示菜单链接来解决此问题。它们还允许您将内容组织为主题、类别或组。

话虽这么说,让我们看看如何轻松创建 WordPress 下拉菜单,然后将其添加到您的网站。

视频教程

订阅 WPBeginner

如果您不喜欢该视频或需要更多说明,请继续阅读。

第 1 步:选择支持下拉菜单的主题

WordPress 附带一个内置菜单管理系统,但这些菜单的外观会根据您的 WordPress 主题而有所不同。

默认情况下,几乎所有 WordPress 主题都支持下拉菜单。豪维呃,某些主题可能没有适当的下拉支持。首先,您需要确保您的主题支持下拉菜单。

如何知道您的主题是否支持下拉导航?

如果您从官方 WordPress 存储库下载了主题,则只需访问该主题的页面并单击“预览”按钮即可观看现场演示。

然后您可以检查演示是否包含下拉菜单。

如果您使用的是高级 WordPress 主题,那么开发人员可能会在其网站上提供现场演示。您还可以查看主题的文档以获取更多信息。

如果您仍然不确定,可以随时向开发人员寻求帮助。有关此主题的更多信息,请参阅我们的指南,了解如何正确请求 WordPress 支持并获得支持。

如果您的 WordPress 主题不支持下拉菜单,那么您需要找到一个支持下拉菜单的主题。有关大量提示,请参阅我们有关如何选择的指南他完美的 WordPress 主题。您还可以查看我们关于如何正确更改 WordPress 主题的终极指南。

为了帮助您,这里有一些支持下拉菜单的优秀主题:

  • Astra – 多用途 WordPress 主题,附带多个入门网站和大量功能。
  • StudioPress 主题 – 这些专业主题构建于 Genesis 主题框架之上,可帮助您的网站加载速度更快。
  • OceanWP – 一款流行的 WordPress 主题,适合各种网站。
  • Ultra – 这款拖放式 WordPress 主题由 Themify 构建器提供支持,具有精美的模板和灵活的主题选项。
  • Divi – Elegant Themes 的流行主题,使用 Divi 页面构建器,并具有大量拖放功能,包括下拉菜单。

话虽如此,让我们来看看如何创建 WordPress 下拉菜单。

第 2 步:在 WordPress 中创建导航菜单

让我们从创建一个简单的菜单开始。

如果您已经在网站上设置了导航菜单,则可以跳到下一步。

要开始使用,请转到 WordPress 仪表板中的外观 » 菜单,然后单击顶部的“创建新菜单”链接。

注意:如果您看到“外观”»“编辑器”,则表示您的主题已启用“全站编辑”(FSE)。在这种情况下,您可以跳到下面的 FSE 部分。

接下来,您需要输入导航菜单的名称。

这仅供您参考,因此您可以使用任何可以帮助您识别 WordPress 管理区域内的菜单的内容。

在“菜单名称”字段中输入标题后,继续并单击“创建菜单”。WordPress 现在将为您创建一个新的空菜单。

接下来,您需要添加顶部 links 到导航菜单。这些项目将出现在下拉菜单的顶行中,并将充当所有其他帖子和页面的父项。

在左侧栏中,只需选中要添加的每个页面旁边的框即可。然后,单击“添加到菜单”按钮。

这些页面现在将显示在“菜单结构”下的右侧栏中。

您还可以选择博客文章、类别或添加自定义链接。有关更详细的说明,请参阅我们有关如何在 WordPress 中添加导航菜单的指南。

第 3 步:向菜单添加子项

接下来,我们需要添加将出现在下拉菜单中的子项目。您可以在任何现有菜单项下添加子项。

在本指南中,我们将向您展示如何在“博客”菜单项下添加主题类别,但无论您添加什么内容,步骤都是相似的。

在左边-手栏,只需选择要添加为子项目的所有页面,然后单击“添加到菜单”按钮。您的项目现在将显示在右侧栏中。

但是,默认情况下,这些链接都显示为常规菜单项,这意味着它们将添加到顶行。

我们需要将它们设为父项的子项。

为此,只需拖放一个菜单项并将其放置在所需的父菜单项下即可。然后,稍微向右移动,它就会成为一个子项。

现在,只需对您想要在下拉列表中显示的每个子项重复此过程即可。

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

第 4 步:发布您的下拉菜单

如果您正在编辑网站上已存在的菜单,那么访问者将立即看到您的更改。

何但是,如果您要创建新菜单,那么您需要为该菜单选择一个位置。

每个 WordPress 主题都定义了自己的菜单位置,您将在“菜单设置”下的右侧列中看到这些位置。只需选中要使用的位置旁边的框,然后单击“保存菜单”即可。 ‘

您现在可以访问您的网站以查看实际的下拉菜单。

如何使用全站点编辑器创建下拉菜单

如果您使用的是基于块的主题(例如 Hestia Pro),那么您可以使用完整网站编辑器将下拉菜单添加到网站的任何部分。

要开始使用,只需转到 WordPress 仪表板中的“主题”»“编辑器”。

默认情况下,全站编辑器将显示主题的主页模板。

要将下拉菜单添加到网站的不同部分,请单击“模板”或“模式”。

编辑器现在将显示构成 WordPress 主题的所有模板或模板部分的列表。

只需继续并单击要添加下拉菜单的区域即可。例如,如果您正在创建主导航菜单,那么您通常需要选择标题模板部分。

WordPress 现在将显示模板或模板部分的预览。

要编辑此模板,请继续并单击小铅笔图标。

完成后,点击左上角的蓝色“+”图标。

在出现的搜索栏中输入“导航”。

当出现正确的块时,将其拖放到您的设计上。

现在,只需单击选择该块,您就会看到可用于自定义导航块的所有不同设置。

例如,您可以更改布局、编辑 di展开设置,更改文本和背景的颜色,以及调整字体大小。

要将顶级页面添加到菜单中,只需单击“+”按钮即可。

然后,选择“页面链接”。

在出现的弹出窗口中,开始输入要添加的页面的标题或 URL。

当右侧页面出现时,单击将其添加到菜单中。

只需重复此过程即可将所有顶级项目添加到下拉菜单中。

完成后,您可以向任何父项添加子菜单。

在右侧菜单中,单击父项旁边的虚线图标。然后,选择“添加子菜单链接”。

在出现的弹出窗口中,输入您想要在下拉菜单中显示的页面的标题或 URL。

当出现右侧页面时,单击将其添加为子菜单项。

现在,只需对要在下拉菜单中显示的所有项目重复这些步骤即可。

如果您对菜单的设置感到满意,请点击“保存”来存储您的更改。

现在,如果您访问您的网站,您将看到正在运行的下拉菜单。

创建交互式下拉菜单的提示

导航菜单很重要,因为它们是访问者寻找有趣内容或特定信息的第一个地方。

正确使用它们将帮助访问者在您的网站上找到方向。它还将帮助您获得更多转化和销量,同时增加网页浏览量并降低跳出率。

考虑到这一点,这里有一些关于创建有用且用户友好的下拉菜单的提示。

1.创建多级下拉菜单

在本指南中,我们向您展示了如何创建顶行和一组子项目。但是,您也可以在另一个子项下面添加一个子项以创建多级下拉菜单。

这可以是我们对于具有大量内容或许多不同内容类别的网站来说非常有效。

例如,如果您使用 WooCommerce 等插件在线销售产品,那么您可能有“电子产品”类别和“笔记本电脑”子类别。但是,您可能还有更多子类别,例如“Apple 笔记本电脑”或“笔记本电脑包和保护套”。

在这种情况下,为您的在线商店创建多级下拉列表可能是有意义的。为此,只需将任何页面拖动到子项目下方,然后将其稍微向右移动即可。

2.创建多个下拉菜单

您可以根据需要创建任意数量的下拉菜单,然后将它们显示在网站的不同区域。

例如,如果您运营在线市场,那么您可以创建一个仅显示产品类别的下拉菜单。

这对于您的产品页面来说非常有用,但您可能还想为您的主页创建一个独特的下拉菜单o 购物者可以找到您网站的不同区域,例如联系表单和博客。

只需按照上述相同过程创建一个新的下拉菜单,然后使用“位置”设置来控制该下拉菜单在您网站上的显示位置。

3.创建带有实时预览的菜单

如果在仪表板中创建下拉菜单变得太复杂,那么您可以切换到 WordPress 定制器。只需转到“外观”»“自定义”即可启动实时 WordPress 主题定制器。

从这里,单击“菜单”选项卡,然后选择导航菜单。现在,您将在左侧栏中看到一个拖放编辑器,并在右侧面板中看到您网站的实时预览。

您现在可以处理菜单,所做的任何更改都将显示在实时预览中。

4.在 WordPress 中创建一个大型菜单作为下拉菜单

如果您有很多内容,那么您可能会很难或使用标准下拉菜单整齐地组织它。

相反,您可以将网站的完整结构显示为大型菜单,仅当用户将鼠标悬停在主菜单上时才会显示该菜单。

大型菜单类似于下拉菜单,但它们可以显示更多链接、子菜单和其他项目。有关详细说明,请参阅有关如何在 WordPress 中创建大型菜单的分步教程。

我们希望本文能帮助您了解如何在 WordPress 中轻松创建下拉菜单。您可能还想查看我们关于如何正确将 WordPress 从 HTTP 迁移到 HTTPS 的指南,或者我们专家精选的商业网站必备 WordPress 插件。

如果您喜欢这篇文章,请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。

By

发表回复

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