值得信赖的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中新创建的菜单

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

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

将页面添加到菜单

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

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

在菜单中拖放页面

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

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

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

选择菜单位置

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

有关这方面的更多详细信息,您可能希望参阅我们的教程如何在WordPress中创建垂直导航菜单.

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

菜单预览

在WordPress中创建下拉菜单

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

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

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

创建子菜单

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

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

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

WordPress中的子菜单预览

向WordPress菜单添加类别

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

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

WPBeginner上的类别菜单

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

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

选择要添加的类别

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

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

拖动主菜单下的类别

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

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

导航菜单中的博客类别

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

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

添加自定义链接

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

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

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

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

编辑或删除菜单项

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

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

在完整站点编辑器(FSE)中添加导航菜单

新的完整站点编辑器允许您使用块编辑器自定义WordPress主题。它于年发布WordPress 5.9(文字出版社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. 净现值LLC

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

    谢谢!

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

留下答复

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