值得信赖的WordPress教程,当你最需要的时候。
WordPress入门指南
WPB杯
2500万+
使用我们插件的网站
16+
多年WordPress经验
3000+
专家编写的WordPress教程

如何在WordPress中添加导航菜单(初学者指南)

编者按:我们从WPBeginner上的合作伙伴链接中赚取佣金。委员会不会影响我们编辑的意见或评价。了解更多信息编辑过程.

你想在你的WordPress网站上添加导航菜单吗?

WordPress提供了一个拖放菜单界面,您可以使用它来创建标题菜单、带有下拉选项的菜单等等。

在这个分步指南中,我们将向您展示如何在WordPress中轻松添加导航菜单。

如何在WordPress中添加导航菜单

什么是导航菜单?

导航菜单是指向网站重要区域的链接列表。它们通常以链接水平条的形式显示在WordPress网站.

这些菜单提供了您的站点结构,并帮助访问者找到他们想要的内容。以下是WPBeginner上导航菜单的外观:

WPBeginner导航菜单示例

WordPress使添加菜单和子菜单变得非常容易。您可以将链接添加到您的最重要的页面、类别或主题,博客帖子,甚至自定义链接,例如社交媒体简介.

菜单的确切位置取决于您的WordPress主题。大多数主题都有多个选项,因此您可以创建可以在不同位置显示的不同菜单。

例如,大多数WordPress主题都有一个出现在顶部的主菜单。一些主题可能包括二级菜单、页脚菜单或移动导航菜单。

也就是说,让我们看看如何在WordPress中创建自定义导航菜单。

视频教程

订阅WPBeginner

如果你喜欢书面说明,就继续阅读

创建您的第一个自定义导航菜单

要创建导航菜单,您需要访问外观»菜单WordPress管理仪表板中的页面。

注释:如果您没有看到“外观»菜单'在您的站点上选择并且只查看'外观»编辑器',则意味着您的主题启用了完整站点编辑(FSE)。你可以单击此处跳到下面的FSE部分.

创建新菜单

到达后,为菜单提供一个名称,如“顶部导航菜单”,然后单击“创建菜单”按钮。

这将展开菜单区域,如下所示:

WordPress中新创建的菜单

接下来,您可以选择要添加到菜单中的页面。您可以自动添加所有新的顶级页面,也可以从左侧列中选择特定页面。

首先,单击“查看全部”选项卡以查看站点的所有页面。然后单击要添加到菜单中的每个页面旁边的框,然后单击“添加到菜单”按钮。

将页面添加到菜单

添加页面后,可以通过拖放在“菜单结构”部分来移动页面。

这样,您可以更改它们的顺序并重新排列它们。

在菜单中拖放页面

注:所有菜单的项目都列在菜单编辑器中的垂直(从上到下)列表中。当你把菜单放在你的站点上时,它会垂直或水平(从左到右)显示,这取决于你选择的位置。

大多数主题都有几个不同的位置可以放置菜单。在这个示例中,我们使用阿斯特拉主题,有5个不同的位置。

将页面添加到菜单后,选择要显示菜单的位置,然后单击“保存菜单”按钮。

选择菜单位置

提示:如果您不确定每个位置在哪里,请尝试将菜单保存在不同的位置,然后访问您的站点查看其外观。您可能不想使用所有位置,但您可能想使用多个位置。

有关此方面的更多详细信息,您可能想查看我们的教程如何在WordPress中创建垂直导航菜单.

这是我们在网站上完成的菜单:

菜单预览

在WordPress中创建下拉菜单

下拉菜单有时称为嵌套菜单,是带有父菜单项和子菜单项的导航菜单。

当您在父项上运行光标时,所有子项都将显示在子菜单中的父项下。

要创建子菜单,请在父项下方拖动一个项,然后将其稍微向右拖动。我们在菜单中的“服务”下面有三个子项:

创建子菜单

你甚至可以添加多层下拉菜单,这样子菜单就可以有一个子菜单。这可能会导致看起来有点混乱,而且许多主题不支持多层下拉菜单。

有关更多详细说明,请参阅我们的教程如何在WordPress中创建下拉菜单.

下面是我们演示网站上的实时子菜单:

WordPress中的子菜单预览

向WordPress菜单添加类别

如果你正在使用WordPress运行博客,那么你可能需要添加你的博客类别作为WordPress菜单中的下拉菜单。

我们在WPBeginner上实现了这一点,并有多个类别,如新闻、主题、教程等。

WPBeginner上的类别菜单

通过单击菜单屏幕左侧的“类别”选项卡,可以轻松地将类别添加到菜单中。您可能还需要单击“查看全部”选项卡以查看所有类别。

只需选择要添加到菜单中的类别,然后单击“添加到菜单”按钮。

选择要添加的类别

这些类别将作为常规菜单项显示在菜单底部。

接下来,您可以将它们拖放到位。例如,我们将把所有这些类别都放在博客菜单项下。

拖动主菜单下的类别

有关进一步的说明,请参阅我们的初学者指南如何在WordPress导航菜单中添加主题.

以下是演示站点导航菜单中不同类别的显示方式:

导航菜单中的博客类别

除了类别和页面之外,WordPress还可以非常容易地向菜单添加自定义链接。您可以使用它链接到您的社交媒体档案网上商店以及您拥有的其他网站。

要做到这一点,你必须使用菜单屏幕上的“自定义链接”选项卡。只需添加链接以及您想要在菜单中使用的文本,然后单击“添加到菜单”按钮。

添加自定义链接

你甚至可以变得富有创意在菜单中添加社交媒体图标或调用操作按钮以获得更多转换。

编辑或删除WordPress导航菜单中的菜单项

在自定义导航菜单中添加页面或类别时,WordPress使用页面标题或类别名称作为链接文本。如果你愿意,你可以改变这一点。

单击旁边的向下箭头可以编辑任何菜单项。

编辑或删除菜单项

然后可以从这里更改菜单项的名称。这也是您可以单击“删除”从菜单中删除链接的地方。

如果您正在使用拖放界面,那么您也可以通过单击相应的“移动”链接来移动菜单项。

在Full Site Editor(FSE)中添加导航菜单

新的完整站点编辑器允许您使用块编辑器自定义WordPress主题。它于年发布WordPress 5.9并允许您向模板中添加不同的块,以创建独特的设计。

要使用完整站点编辑器添加导航菜单,请访问外观»编辑器从WordPress仪表板。

我们将在本教程中使用默认的Twenty Twenty-Three主题。有关更多详细信息,请参阅我们关于最佳WordPress完整网站编辑主题.

进入编辑器后,继续并单击“导航”选项卡将其展开。

展开导航选项卡

这将在左栏中打开一些新设置。

从这里,只需单击顶部的“编辑”图标。

单击FSE中的编辑图标

这将在屏幕上启动完整的站点编辑器,您可以单击“+”图标添加导航菜单项。

现在将打开一个提示,您可以选择下拉菜单中显示的选项。

但是,如果要添加自定义链接,则可以为块面板中的导航菜单项添加标签和URL。你也可以在菜单中添加搜索选项.

在完整站点编辑器中添加导航菜单项

添加项目后,从右侧的列切换到“样式”选项卡。

现在可以更改菜单项的排版、外观、高度、间距、字母大小写和文本装饰。

如果要添加子菜单,也可以通过单击块工具栏中的图标来完成。

通过切换到样式块自定义菜单项

完成后,可以预览更改以实时查看菜单的外观。然后别忘了点击顶部的“保存”按钮。

在提要栏和页脚中添加WordPress菜单

您不必只停留在主题的显示位置。您可以在任何使用小部件的区域中添加导航菜单,例如侧边栏或页脚。

只需转到外观»小工具然后单击顶部的“添加块”(+)按钮并添加“导航菜单”窗口小部件块到您的侧边栏。

添加导航菜单

接下来,为小部件添加标题,并从“选择菜单”下拉列表中选择正确的菜单。

完成后,只需单击“更新”按钮。

添加标题并选择菜单

下面是一个自定义WordPress页脚菜单的例子Syed Balkhi的网站.

导航菜单预览

进一步使用导航菜单

如果你想创建一个带有大量链接的真正史诗般的菜单,我们有一个关于如何在WordPress中创建大菜单.

这允许您创建一个包含许多项目(包括图像)的下拉列表。

超大菜单预览

如果你有一个大型网站,比如网上商店新闻网站这类菜单被路透社、Buzzfeed、星巴克等网站使用。

WordPress菜单常见问题解答

以下是我们从初学者那里听到的关于WordPress导航菜单的一些最常见的问题。

1.如何将主页链接添加到WordPress菜单?

要将主页添加到导航菜单中,您需要单击Pages下的“View All”选项卡。从那里,你应该可以看到你的主页。

选中“主页”旁边的框,然后单击“添加到菜单”。别忘了保存更改。

将主页添加到菜单

2.如何在WordPress中添加多个导航菜单?

在WordPress中,您可以创建任意数量的菜单。要在您的网站上放置菜单,您需要将其添加到主题的菜单位置之一,或添加到我们上面显示的小部件区域。

如果你想在WordPress站点上添加多个导航菜单,首先按照我们上面的教程创建菜单。

要将其放置在您的站点上,请单击“管理位置”选项卡。

管理菜单位置

从这里,您可以选择要在主题中可用的菜单位置中显示的菜单。

如果您想在站点中添加新的菜单位置,请参阅我们的教程如何向WordPress主题添加自定义导航菜单.

我们希望本文能帮助您学习如何在WordPress中添加导航菜单。您可能还想查看我们的指南,了解如何WordPress中的样式导航菜单以及如何在WordPress中创建一个粘性浮动导航菜单.

如果你喜欢这篇文章,那么请订阅我们的YouTube频道用于WordPress视频教程。您也可以在上找到我们推特脸谱网.

披露:我们的内容是读者支持的。这意味着如果你点击我们的一些链接,那么我们可能会赚取佣金。请参见WPBeginner的资金来源,为什么重要,以及您如何支持我们。以下是我们的编辑过程.

编辑人员

WPBeginner的编辑人员是由Syed Balkhi领导的WordPress专家组成的团队,在WordPres、Web托管、电子商务、SEO和市场营销方面拥有超过16年的经验。从2009年开始,WPBeginner现在是业界最大的免费WordPress资源站点,通常被称为WordPressWikipedia。

终极版WordPress工具包

免费访问我们的工具包-每个专业人士都应该拥有的WordPress相关产品和资源的集合!

读者互动

117条评论留下回复

  1. 赛义德·巴尔基

    嘿,WP初学者读者,
    你知道你可以通过评论WPBeginner获得激动人心的奖项吗?
    每个月,我们的顶级博客评论员都会获得丰厚的奖励,包括高级WordPress插件许可证和现金奖励。
    你可以获得有关比赛的更多详细信息从这里开始.
    开始在下面分享你的想法,有机会获胜!

    • WP初学者支持

      这主要是个人偏好的问题。在这两者之间没有更好的选择。目前,我们使用静态菜单而不是粘性菜单:)

      行政

  2. 大约·奥洛巴约

    这正是我所需要的。我一直想让我的网站看起来更专业,添加导航菜单是其中重要的一部分。感谢您的明确指示!

  3. 吉·范克(Jiři Vaněk)

    关于向菜单添加页面,不知道如何解决搜索问题?或者如果你还没有见过他。我有一个网站,目前大约有600页,主要用于字典目的。问题是,当我想将其中一个页面添加到菜单中时,我会在搜索中写入它的链接,所以wordpress找不到它,我必须首先显示所有页面并按字母顺序查找。它耽误了我的工作,我还没有弄清楚问题出在哪里。

    • WP初学者支持

      您可能想尝试写入页面的标题,否则,如果您直接拥有URL,则可以使用自定义链接并链接到页面。

      行政

      • 吉·范克(Jiři Vaněk)

        是的。我在搜索框中输入站点名称,WordPress会列出类似的站点,但通常不是我要找的那个。因此,我将进一步研究问题所在。

  4. 大卫·基维斯

    非常感谢你的精彩教程。我们正在用多个CPT构建我们的网站,这篇帖子清楚地解释了需要什么。几分钟后就实施了。我们正在使用Generate Press/Generate Blocks,查询循环非常强大。你们都让我们高兴了!!!!

  5. NPH有限责任公司

    如果我在主导航菜单中“删除”了一个链接,我能很容易地将其恢复吗?我们希望在重新配置页面时使其脱机。

    谢谢!

    • WP初学者支持

      是的,您可以轻松添加和删除菜单项,即使菜单项当前不在菜单上。您需要确保清除站点上的所有缓存,以便访问者看到最新菜单。

      行政

  6. 阳光灿烂

    这是一个非常基本的问题。如何将网站URL链接到主页?意思是,拥有网站URL,也可以作为菜单中的主页部分。谢谢

    • WP初学者支持

      您可以将菜单设置为您在“设置”>“常规”下为站点设置的主页,也可以创建自定义URL并在其中添加域以指向您的主页。

      行政

  7. 丽莎

    我对如何把我的帖子放到我想要的地方感到困惑……我有一个菜谱博客。在我的网站顶部,我有你可以点击的类别,如“晚餐食谱”和“配菜”……当你点击页面顶部的标题时,我如何让我的特定帖子进入这些特定页面?

  8. HJ公司

    非常基本的问题,但如何在子页面上启用菜单?我设计了一些子页面,但菜单在顶部不可见。在我的主页上可以看到菜单。如何使菜单在子页面上可见?

    • WP初学者支持

      你可能想为你的特定主题寻求支持,听起来你的主题可能会删除某些页面的菜单。如果您联系支持人员,他们应该让您知道如何重新添加菜单。

      行政

  9. 贾尼恩

    我正在尝试获得一个粘性且不透明的导航菜单。我什么都试过了。允许我更改主题中的导航栏吗?

    • WP初学者支持

      你是,但这需要一些编码知识,我们建议联系你的主题的支持,他们通常可以提供帮助。

      行政

  10. 米兰达

    我制作了一个导航菜单,但它不会显示在手机网站上,当我转到导航菜单设置时,它没有手机菜单选项。你知道我该如何解决这个问题吗?或者我需要找一个不同的主题吗?

    • WP初学者支持

      您需要寻求对您的特定主题的支持,因为它没有正确显示,他们将能够提供帮助。

      行政

  11. 阿塔

    谢谢你的详细指导。我有一个问题:我们如何添加一个导航栏(用于登录页面)来链接登录页面的节/元素,而不是导航到其他页面。维基百科就是一个例子。在任何维基百科页面上,你都可以点击该部分的名称,它会立即转到该部分。

  12. 吉娜

    你好,

    我创建了类别并将其添加到我的菜单中,以便读者单击后可以找到该类别中的所有博客帖子。我的问题是,我不希望博客名称出现在页面顶部,也就是说,博客类别=>博客类别描述=>博客帖子,我该如何删除它?

    • WP初学者支持

      这将取决于您特定主题的样式。如果您寻求主题的支持,他们应该能够帮助您更改所显示的内容

      行政

  13. 琳达·麦克米兰

    您好,我正在使用Elementor和OceanWP。我在菜单中设置了一个自定义链接,以便在单击时可以转到主页。我怎样才能让它转到主页,而不是只转到某个部分?我感谢你的帮助。

  14. 安妮

    导航功能非常强大。尽管有一个问题,我在导航“产品”中有一点,它从那里分为其他3个部分(下拉菜单出现)。我不希望访问者能够访问此产品页面,因为它将是空的,我希望他们直接从下拉菜单中选择,而不是先访问产品页面。因此,产品仍将显示在导航中,但无法访问,访问者必须单击下拉菜单选择他们想要的内容。我该怎么做?我正在删除整个产品部分,它将不再显示在nav中,如何使产品页面无法访问?

    • WP初学者支持

      您可以在“外观”>“菜单”下创建一个标题为“产品”的自定义链接,并将其链接到不同的页面或#,这样可以使用户保持在同一个页面上。

      行政

  15. 娜塔莉五世

    你好!非常感谢你的来信。这对我帮助很大。我有“卡鲁纳”主题。每当我添加更多菜单选项(我有4个)时,它们都会显示在两行中。我希望他们都在一排。有办法解决这个问题吗?非常感谢!

  16. 大卫

    需要链接一个“立即购买”按钮以吸引商务车页面。花了两天的时间兜圈子。试图联系吴,但收效甚微。然后找到了你们这些帮助解决问题的人。
    往往是一些小事会让我们停滞不前。非常感谢您提供了一套简化的清晰说明。

  17. 埃利奥特·科尔肖

    你好,

    我正在用Ocean WP和Elementor制作一个网站,但是我无法在我所有页面的顶部看到菜单。它只出现在主页的顶部。因此,人们可以从主页导航到任何页面,然而,如果有人想从主页导航回主页或从那里导航到另一个页面,这将很棘手。你有解决方案吗?谢谢您!

  18. 林赛

    谢谢您的指导,非常有用!我有一个问题,我认为与我的菜单有关,但我不完全确定。当我从主页单击菜单项时,站点地址会在主地址和菜单页之间添加“aboutme”。我的网站上没有任何叫做“关于我”的东西。我不明白为什么要在每页上添加这条额外的信息。关于如何删除这个“关于我”的信息,有什么建议吗?

  19. 凯伦

    你好。我正在使用Ocean WP和Elementor。
    我有一个组织好的菜单,但在我的Nested菜单下拉部分中,我希望第一个类别不要链接到页面(我试图删除链接,但失败了)。
    嵌套部分如下:治疗(顶部)>个体>组
    我不想让《治疗》引向一页,它是空白的,我想它只是一个类别。我在以前的网站上做过,但我一辈子都不记得该怎么做!
    我确实创建了一个名为Therapy的“页面”,这样它就会出现在菜单选项中……帮帮我,欧比旺,克诺比,你是我唯一的希望!
    Karen医生

  20. 沙特阿拉伯

    你好,

    我们在网站上使用两个菜单系统(即主菜单/顶部菜单和主菜单/辅助菜单)。并且手机网站上没有显示顶部/主菜单。
    我们的一个客户希望这两个菜单在移动网站上都可见。对如何做到这一点有什么建议吗?

    (如果有帮助的话,该网站正在以报纸为主题运行。)

  21. 艾哈迈德

    假设我想发布许多与android相关的文章。我应该在wp菜单中创建一个android页面或android类别吗。

    • WP初学者支持

      你好,艾哈迈德,

      类别可以更好地将内容分类为不同的主题。你可以在网站的导航菜单中添加一个类别,然后它会显示该类别下的所有帖子。

      行政

  22. 莱里萨

    嗨,谢谢你提供这个。

    我的页面部分没有任何项目,这很奇怪,因为我的网站有几个。我配置错误了吗?

    莱里萨

  23. 马尼什兰苏赫语

    你好,先生

    谢谢你,我已经开始写我的新WordPress博客,我卡在菜单上了,我不知道如何添加菜单,谢谢你的这篇有用的帖子,你的网站帮助我启动了我的网站。

  24. 辛迪·贾维斯

    嗨,谢谢你的支持。我有一个几乎完成的网站,非常基本,但希望将菜单项链接到相关文本存在的页面,并能以某种方式用后退按钮将用户带回主菜单。你能帮忙吗。
    谢谢

    • 辛迪

      谢谢你的帮助。我没有在网站上寻找任何与我的菜单不一样的东西。我的菜单项设置为主页、关于我们、服务、联系人。菜单名称为First menu并设置为primary。结果是,我点击主页,页面会闪烁,但我哪儿也不去。我单击的所有菜单项都会出现这种情况。有什么建议吗?
      谢谢

      • WP初学者支持

        你好,辛迪,

        你可以试试这个。转到外观»菜单页面并单击创建新菜单。本文中的以下说明通过从左到右添加页面来创建新菜单。然后选择菜单“主菜单”的位置,然后单击保存菜单按钮。

        如果这不能解决你的问题,那么用默认主题预览你的网站。如果您的导航菜单与默认主题一起正常工作,那么当前主题可能存在一些问题。希望这能有所帮助。

        行政

  25. 里贾娜·克拉克

    这很有帮助,在我的笔记本电脑上运行得很好。但在我的iPhone上,我将子菜单类别放在博客菜单中(所有类别都缩进显示),其中还包括我创建的类别描述。在我的笔记本电脑上,每个类别的存档页面都会出现,但在手机上,它会出现在下拉列表中,这让它看起来很混乱。有没有办法只为每个类别下的描述创建另一个缩进,有效地嵌套三个级别?

    非常感谢您的建议。

  26. 吉利安

    您好,我已经创建了一个嵌套菜单,在桌面版本中看起来很棒,但当它到达移动版本时,所有嵌套的内容都会立即显示在菜单上!它创建了一个超长的菜单页。我有一个回应主题,不确定是否可以修复。

  27. 巴尔泰克

    我有一个问题,wordpress不再允许我添加任何类别,甚至删除和更改了一些曾经添加的类别的位置。有人知道什么是原因吗?

  28. 艾哈迈德·阿齐姆

    我的网站没有主菜单、次菜单,但有主菜单和页脚菜单。我想在我的网站上添加顶部菜单,你能指导我如何添加顶部菜单吗。此外,在我的投资组合页面中,我添加的任何项目都没有显示出来,所以请帮助我解决这一问题。提前谢谢。

  29. 约翰

    我以为这是关于如何在WordPress站点中添加导航菜单的解释,但它缺少将其添加到网站的关键代码。这是我见过的最愚蠢的教程(或文章标题)。

  30. 希巴尼

    我有一个网站,我想在那里显示自定义菜单,这是一个类别-如旅游。它工作正常,但在帖子上方显示了–类别–旅行。我该怎么掩饰?我正在使用wordpress.com和免费计划。

  31. 普拉杰

    假设我的网站是example.com

    我想创建一个名为HOME的选项卡并将其放置在菜单中。

    每当我创建这个主页时,url都不接受example.com
    它正在成为example.com/home。

    我该怎么办?

    • WP初学者支持

      你好,普拉奇,

      WordPress已经有了一个可以使用的导航菜单。在导航菜单屏幕上单击页面,然后单击查看全部。在那里,您将看到所有页面和一个名为Home的项目。选择主页,然后单击添加到菜单按钮。

      行政

  32. 约翰

    我已经遵循了上述指示。但我的菜单实际上不会出现在任何站点页面上。请给我一些指导好吗?

    约翰

    • 海萨姆·阿尔纳盖布

      尝试过不同的主题吗?有些时候,这些未来不支持您使用的主题。

  33. 艾克·埃泽安尼

    我创建了第二个下拉菜单,但当我单击主菜单时,我看到了下拉菜单,但是它变成了一个空白页面。请帮忙。

  34. 斯蒂芬·B

    你好,

    当我登录到wordpress时,我的编辑菜单看起来完全不同,因此我很难添加菜单和定制我的站点。你能帮助我吗?

  35. 露西

    嗨,我真的很难为客户网站导航,不知道如何解释我需要什么。当你点击一个顶级菜单项时,我希望它在下面打开一个额外的菜单。每个顶级都有一个不同的子菜单,当您处于站点的该区域时,该子菜单将保持激活状态。

    喜欢这个网站
    当你点击“商业太阳能”时,另一个菜单出现,允许你浏览商业太阳能区域。顶部菜单始终处于选中状态。

    你能提供的任何帮助都会很棒!谢谢,露西

  36. 大卫·布拉斯卡

    我想把我的页面链接到主页上的标题上,以便对这些页面进行概要分析。如何做?(比如“我们的历史”、“我们是谁”等)我在主页上为每个人都有一个页面,但每个页面上都有一条小广告。希望访问者单击每个标题。

留下答复

感谢您选择发表评论。请记住,所有评论都是根据我们的评论策略,并且不会发布您的电子邮件地址。请不要在名称字段中使用关键字。让我们进行一次有意义的私人谈话。