首页 > 文章专栏 > 正文

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

什么是导航菜单?

导航菜单是一个指向网站重要区域的链接列表,通常以水平链接栏的形式出现在 WordPress 网站的每个页面顶部。这些菜单为网站提供结构,帮助访问者快速找到他们想要的内容。以下是猫哥(原名 WPBeginner)网站上的导航菜单示例:

猫哥导航菜单示例

WordPress 让添加菜单和子菜单变得非常简单。你可以添加最重要页面的链接、分类或主题、博客文章,甚至自定义链接,例如你的社交媒体资料。菜单的具体位置取决于你的 WordPress 主题。大多数主题有多个选项,因此你可以创建不同的菜单显示在不同的位置。例如,大多数 WordPress 主题在顶部有一个主菜单,有些主题还包括辅助菜单、页脚菜单或移动导航菜单。

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

要创建导航菜单,请访问 WordPress 管理后台的 外观 → 菜单 页面。

注意:如果你的网站没有“外观 → 菜单”选项,只有“外观 → 编辑器”,则意味着你的主题启用了全站编辑 (FSE)。你可以点击此处跳转到下方的 FSE 部分。

创建新菜单

进入后,为菜单提供一个名称,例如“顶部导航菜单”,然后点击“创建菜单”按钮。这将展开菜单区域:

新建的菜单

接下来,选择要添加到菜单的页面。你可以自动添加所有新顶级页面,也可以从左侧列中选择特定页面。首先点击“查看全部”选项卡查看所有页面,然后勾选要添加的页面,点击“添加到菜单”按钮。

将页面添加到菜单

添加页面后,你可以通过拖放来调整它们在“菜单结构”中的顺序和排列。

拖放页面到菜单

注意:所有菜单项在菜单编辑器中按垂直(从上到下)列表显示。当菜单上线后,它会根据你选择的位置显示为垂直或水平(从左到右)。

大多数主题有多个不同的菜单位置。在本例中,我们使用的是 Astra 主题,它有 5 个不同的位置。添加页面后,选择要显示菜单的位置,然后点击“保存菜单”按钮。

选择菜单位置

提示:如果不确定每个位置在哪里,可以尝试在不同的位置保存菜单,然后访问你的网站查看效果。你可能不需要使用所有位置,但可能会用到多个。

这是完成后的菜单在网站上的样子:

菜单预览

在 WordPress 中创建下拉菜单

下拉菜单(有时称为嵌套菜单)是具有父级和子级菜单项的导航菜单。当鼠标悬停在父级项目上时,所有子级项目会以下拉菜单的形式显示。要创建子菜单,将一个项目拖到父级项目下方,然后稍微向右拖拽。我们在“服务”下方添加了 3 个子项目:

创建子菜单

你甚至可以添加多层下拉菜单,这样子菜单还可以有自己的子菜单。不过,这可能会显得杂乱,许多主题不支持多层下拉菜单。更多详情请参考我们的教程:如何在 WordPress 中创建下拉菜单

以下是子菜单在演示网站上的效果:

WordPress 子菜单预览

将分类添加到 WordPress 菜单

如果你使用 WordPress 运行博客,可能希望将博客分类作为下拉菜单添加到导航菜单中。猫哥的网站就是这样做的,包含新闻、主题、教程等多个分类。

猫哥网站上的分类菜单

要添加分类,请点击菜单屏幕左侧的“分类”选项卡,然后点击“查看全部”查看所有分类。选择要添加的分类,然后点击“添加到菜单”按钮。

选择要添加的分类

分类会作为常规菜单项出现在菜单底部。然后你可以拖放它们到合适的位置。例如,我们将所有分类放在“博客”菜单项下。

将分类拖到主菜单下

以下是不同分类在导航菜单中的显示效果:

导航菜单中的博客分类

将自定义链接添加到 WordPress 导航菜单

除了分类和页面,WordPress 还允许你轻松添加自定义链接。你可以用它链接到社交媒体资料、在线商店或其他你拥有的网站。在菜单屏幕中使用“自定义链接”选项卡,添加链接和链接文本,然后点击“添加到菜单”按钮。

添加自定义链接

你还可以发挥创意,在菜单中添加社交媒体图标或行动号召按钮,以提高转化率。

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

当你将页面或分类添加到自定义导航菜单时,WordPress 会使用页面标题或分类名称作为链接文本。你可以更改它。点击菜单项旁边的向下箭头即可展开编辑。

编辑或删除菜单项

你可以在此更改菜单项的名称,也可以点击“删除”将其从菜单中移除。如果拖放操作有困难,还可以使用“移动”链接来调整顺序。

在全站编辑器 (FSE) 中添加导航菜单

新的全站编辑器允许你使用块编辑器自定义 WordPress 主题。它从 WordPress 5.9 开始提供,让你可以在模板中添加不同的块来创建独特的设计。要使用全站编辑器添加导航菜单,请访问 WordPress 仪表盘的 外观 → 编辑器。我们使用默认的 Twenty Twenty-Three 主题进行演示。更多详情请参考我们的文章:最佳 WordPress 全站编辑主题

进入编辑器后,点击“导航”选项卡展开它。

展开导航选项卡

此时左侧列会显示新设置。点击顶部的“编辑”图标。

点击 FSE 中的编辑图标

这将启动全站编辑器,你可以点击“+”图标添加导航菜单项。弹窗中可以选择下拉菜单中的选项。如果要添加自定义链接,可以在块面板中为导航菜单项添加标签和 URL。你还可以为菜单添加搜索选项。

在全站编辑器中添加导航菜单项

添加项目后,切换到右侧列的“样式”选项卡。你可以更改菜单项的排版、外观、高度、间距、字母大小写和文本装饰。还可以通过块工具栏中的图标添加子菜单。

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

完成后,可以预览更改效果,然后点击顶部的“保存”按钮。

在侧边栏和页脚中添加 WordPress 菜单

你不必局限于主题的显示位置。你可以在任何使用小工具的区域内添加导航菜单,例如侧边栏或页脚。只需访问 外观 → 小工具,然后点击顶部的“添加块”(+) 按钮,将“导航菜单”小工具块添加到侧边栏。

添加导航菜单

接下来,为小工具添加标题,并从“选择菜单”下拉列表中选择正确的菜单。完成后点击“更新”按钮。

添加标题并选择菜单

这是猫哥网站上一个自定义 WordPress 页脚菜单的示例。

导航菜单预览

进一步探索导航菜单

如果你想创建包含大量链接的史诗级菜单,可以参考我们的教程:如何在 WordPress 中创建超级菜单。这让你可以创建包含大量项目(包括图片)的下拉菜单。

超级菜单预览

超级菜单非常适合大型网站,例如在线商店或新闻网站。这种类型的菜单被 Reuters、Buzzfeed、Starbucks 等网站使用。

视频教程

如果你更喜欢观看视频教程,请查看下方视频:

(请订阅猫哥的 YouTube 频道以获取更多 WordPress 视频教程)

关于 WordPress 菜单的常见问题

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

要添加主页链接,请在“页面”下点击“查看全部”选项卡,你会看到主页。勾选“首页”旁边的复选框,然后点击“添加到菜单”。记得保存更改。

将主页添加到菜单

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

在 WordPress 中,你可以创建任意数量的菜单。要将菜单放置在网站上,你需要将其添加到主题的菜单位置或小工具区域。首先按照上述教程创建菜单,然后点击“管理位置”选项卡。

管理菜单位置

在这里,你可以选择在主题可用的菜单位置中显示哪个菜单。如果你想添加新的菜单位置,请参考我们的教程:如何向 WordPress 主题添加自定义导航菜单

希望这篇文章能帮助你学会如何在 WordPress 中添加导航菜单。你可能还想了解如何样式化导航菜单以及如何创建粘性浮动导航菜单

文章标签:#WordPress#下拉菜单#全站编辑器#导航菜单#菜单位置

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/如何在wordpress中添加导航菜单(猫哥初学者指南)