如何在 WordPress 中创建菜单(3 种简单方法)

已发表: 2022-03-19

导航菜单是您网站中访问量最大的部分之一。 它为您的访问者提供了一个明确的方向,即他们需要去哪里获取他们想要的产品或信息。 这就是为什么您需要一个结构良好的网站菜单,以便用户可以轻松访问您的网站内容。

如果您有 WordPress 网站,制作菜单并不难。 但是您可能害怕在主题代码中工作,或者可能认为这只是专业人员的工作。

为了帮助您,今天我们将向您展示如何在您的 WordPress 网站内轻松创建标准导航菜单。 在这里,您将学习编码过程和完全没有任何技术知识的过程。

让我们快速浏览一下我们今天将在此博客中介绍的内容-

  • 什么是导航菜单
  • 不同类型的导航菜单
  • 如何创建 WordPress 菜单
  • 如何在 WordPress 中创建自定义菜单
  • 如何使用 Elementor 添加导航菜单
  • 关于 WordPress 菜单的常见问题解答

阅读到最后以获得设计Mega Menu的独家奖励。

让我们从基础开始——

什么是导航菜单?

导航菜单是通常用于导航到网站的基本内部页面或其他 Web 内容的链接列表。 导航菜单主要经常被视为网站顶部的水平条。

Happy Addons Navigation Mneu

但是,您可以在网站的侧边栏和页脚区域找到菜单。 它可以帮助用户快速找到有关您网站的重要信息。 WordPress 允许其用户创建自定义菜单和子菜单。

此外,您可以将类别、博客文章和自定义链接(如 Google 地图和社交媒体渠道)添加到菜单中。

不同类型的导航菜单

您可以根据当前的 WordPress 主题设置菜单的不同位置。 通常,主菜单出现在页眉中,而二级菜单出现在页脚中。 此外,许多主题为移动设备提供导航菜单。

这些是用于网站不同目的和不同区域的典型导航菜单-

  1. 水平导航菜单
  2. 下拉导航菜单
  3. 页脚导航菜单
  4. 汉堡导航菜单
  5. 垂直侧边栏导航菜单

1.水平导航菜单

这是主要出现在网站顶部的水平导航栏的示例。

Horizontal Navigation Menu

2.下拉导航菜单

在下拉菜单中,您可以将多个页面放在父菜单下。 让我们看看下拉导航菜单是什么样子的。

Dropdown menu

3.页脚导航菜单

这类菜单主要显示在网站底部。 这是页脚菜单的理想示例。

Footer Menu Example

4.汉堡导航菜单

您为移动设备创建一个汉堡导航菜单,如下面的菜单。

Hamburger Navigation Menu

5.垂直侧边栏导航菜单

在许多餐厅或食品配送网站中,您会发现这种类型的垂直侧边栏导航菜单。

Vertical Sidebar Navigation Menu
图片来源

如何创建 WordPress 菜单(3 种简单方法)

在深入学习本教程之前,让我们先弄清楚我们在此博客中展示的内容。 在这里,我们将通过三种简单的方法展示如何在 WordPress 中创建菜单。 您可以根据需要选择任何人。

方法是:

方法 1:默认 WordPress 菜单设置
方法二:手动添加自定义代码
方法 3:使用 Elementor Page Builder

方法 1:配置默认 WordPress 菜单设置

是时候深入学习创建我们的第一个导航菜单的教程了。 如果您按照以下步骤操作,您将能够轻松地为您的网站创建菜单。

第 1 步:在 WordPress 中创建新菜单
第 2 步:向 WordPress 菜单添加新页面
第 3 步:组织您的菜单结构
第 4 步:设置菜单位置

让我们开始吧:

第 1 步:在 WordPress 中创建新菜单

首先,登录到您的网站仪表板区域并转到外观->菜单

Go to Appearance Menu

其次,您需要将菜单名称写入菜单名称区域。 最后,您必须单击“创建菜单”按钮来保存菜单。

Create Menu

第 2 步:如何将新页面添加到 WordPress 菜单

创建菜单后,您的下一个工作是将基本页面添加到菜单中。 转到此处的左侧边栏,您将获得“添加菜单项”选项。 选择查看全部选项卡并勾选相关页面。 最后,单击添加到菜单按钮。

按照下图了解如何将新页面添加到 WordPress 菜单。

Add Pages to the WordPress Menu

了解如何在 WordPress 上创建新页面。

第 3 步:组织您的菜单结构

在 WordPress 中组织菜单项很容易。 您需要拖放一个菜单项来完成这项工作。 您可以在下面查看此图像。

Organize Your Menu Structure

第 4 步:设置菜单位置

设置菜单结构后,您必须设置菜单的正确位置。 由于这是我们的第一个菜单,我们选择了显示位置作为主菜单并选中自动添加页面选项以自动将新页面添加到此菜单中。

Menu Settings

最后,单击保存菜单按钮以更新菜单。

方法 2:在 WordPress 中创建自定义菜单

WordPress 主题带有预定义的菜单布局和位置,用于将导航菜单添加到您的网站。 但是,如果您想制作自定义菜单布局并希望在主题菜单位置之外显示菜单,您应该为您的网站创建自定义菜单。

要创建自定义菜单,您可以使用 3rd 方菜单制作​​插件或编辑您的核心主题文件。 在这里,我们将展示如何在 WordPress 中手动创建自定义菜单。

首先,您需要打开主题的“ function.php ”文件。 在这里,您必须通过添加此代码来注册新的导航菜单。

 function custom_nav_menu() { register_nav_menu('new-nav-menu',__( 'New Nav Menu' )); } add_action( 'init', 'custom_nav_menu' );

如果要添加多个新菜单位置,可以使用此代码段。

 function custom_nav_menu() { register_nav_menus( array( 'new-nav-menu' => __( 'New Nav Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'custom_nav_menu' );

添加代码后,您需要转到您的网站仪表板_>外观->菜单区域。 现在专注于菜单设置区域。 在这里,您注意到出现了新创建的菜单“ New Nav Menu ”。

New Nav Menu

是时候在您的 WordPress 主题中显示新的导航菜单了。 使用下面的代码并将其粘贴到主题的“ function.php ”文件中。

 <?php wp_nav_menu(array('theme_location' => 'new-nav-menu')); ?>

现在,您可以在网站的任何位置显示自定义菜单。 我们在“关于”页面上添加了新的自定义菜单。

New Custom Menu

就是这样。

方法三:使用 Elementor 添加导航菜单

Elementor 是流行的拖放页面构建器插件之一,可帮助用户立即制作他们的网站。 它带有大量易于使用的小部件,其中导航菜单是一种流行的小部件,可让您在几分钟内为您的网站设计导航菜单。 您可以使用此小部件以自己的方式创建和自定义导航菜单。

每当您使用 Elementor Nav Menu 小部件时,您都需要安装以下插件。

先决条件

  1. 元素(免费)
  2. 元素专业版

按照以下步骤操作,了解如何将导航菜单添加到 Elementor 支持的网站。

  • 第一步:打开一个新页面
  • 第二步:添加一个部分
  • 第三步:添加导航菜单小部件
  • 第四步:自定义导航菜单

在此处查看此博客,我们已经介绍了上述每个步骤并最终创建了一个菜单。

如何使用 Elementor 导航菜单小部件创建和自定义菜单

此外,了解如何设计自定义 Elementor 标头。

奖励:使用快乐插件在 WordPress 中创建超级菜单

超级菜单是一种包含大量基本页面或其他导航链接的菜单,主要显示在网站顶部。 它可以帮助用户立即找到所需的信息。 此外,它还改善了您网站的用户体验和导航过程。 您经常在大型网站上看到大型菜单,例如。

  • 电子商务网站
  • 酒店网站
  • 新闻/杂志/博客网站
  • 基于服务/产品的网站

您无法使用默认的 WordPress 菜单功能为您的网站创建大型菜单。 您需要使用大型菜单 WordPress 插件或通过编写代码手动构建自己的大型菜单功能。

但是,如果您使用 Elementor 页面构建器来创建您的网站并安装 Happy Addons' Pro,您可以轻松创建大型菜单,而无需编写自定义代码。

Happy Addons 带有拖放式“ Happy Mega Menu ”小部件,可让您构建大尺寸的超级菜单,如 Adidas、Puma、Dribbble、weDevs、InVision 等。 此高级工具还允许您将自定义模板添加到菜单中。

让我们观看这个方便的视频教程,学习如何在 WordPress 中创建大型菜单。

查看 Happy Addon 的 Happy Mega Menu 小部件文档并了解如何正确使用此小部件。

关于 WordPress 菜单的常见问题解答

有很多关于如何在 WordPress 中创建菜单的问题,人们经常在网上提出这些问题。 在这里,我们回答了一些常见问题,可以帮助您向 WordPress 网站添加菜单。

1. 如何在 WordPress 中创建下拉菜单?

要创建子菜单,您需要将一个菜单项拖放到另一个菜单下。 您可以检查下图以完成工作。

How to Create a Drop Down Menu in WordPress

2. 如何删除和重命名菜单项?

打开一个项目,然后您可以重命名Navigation Label 。 并单击删除链接以删除该项目。

How to Delete and Rename Menu Items

3. 如何在菜单中添加帖子?

您可以将博客文章添加到菜单中。 打开帖子选项卡并选择帖子。 最后,单击添加到菜单按钮。 您可以按照下图将帖子添加到菜单。

How to Add Posts to the Menu

4. 如何在您的菜单中添加自定义链接?

您还可以向菜单添加自定义链接。 打开自定义链接选项。 现在,插入URL并编写链接文本。 最后,单击“添加到菜单”按钮将项目添加到菜单中。 在这里,我们添加了我们的 Facebook 频道。

How to Add Custom Links to Your Menu

5. 如何在 WordPress 菜单中添加分类?

如果要将类别添加到菜单中,则需要打开类别选项卡并选择类别。 最后,单击“添加到菜单”按钮将它们添加到菜单中。

How to Add Categories to WordPress Menu

6. 如何删除菜单?

要删除菜单,您需要转到“菜单设置”区域并单击“删除菜单”链接。

How to delete a menu

准备好创建您的 WordPress 菜单

如果您按照上述步骤操作,在 WordPress 中创建菜单不再困难。 在本教程博客中,我们介绍了如何在 WordPress 中创建菜单。 我们已经展示了如何制作自定义菜单。

但是,我们已经讨论了如何使用 Elementor 页面构建器创建菜单,并介绍了有关 WordPress 大型菜单的额外主题。 最后但同样重要的是,我们已经回答了一些常见问题 WordPress 菜单。

如果您需要更多帮助或对此博客有任何疑问,可以在下面的评论部分提出您的意见。

如果您喜欢,请在您的社交渠道上分享此博客。 并且,加入我们的时事通讯以获得更方便的 WordPress 和 Elementor 教程。 免费!

订阅我们的新闻

获取有关 Elementor 的最新消息和更新