如何在 WordPress 主题中添加自定义导航菜单

您想在 WordPress 主题中添加自定义导航菜单吗?导航菜单是显示在大多数网站顶部的水平链接列表.

默认情况下，WordPress 主题带有预定义的菜单位置和布局，但如果您想添加自己的自定义导航菜单怎么办?

在本文中，我们将向您展示如何在 WordPress 中轻松创建和添加自定义导航菜单，以便您可以在主题的任何位置显示它们.

什么时候需要这个 WordPress 导航菜单教程?

大多数 WordPress 主题都带有至少一个位置，您可以在其中在菜单中显示您网站的导航链接.

您可以从 WordPress 管理区域内易于使用的界面管理菜单项.

如果您只是想在您的网站上添加导航菜单，那么只需按照我们的初学者指南，了解如何在 WordPress 中添加导航菜单.

本教程的目标是帮助 DIY/中级用户将自定义导航菜单添加到他们的 WordPress 主题中.

我们将在本文中讨论以下主题:

• 在 WordPress 主题中创建自定义导航菜单
• 在 WordPress 主题中显示自定义导航菜单
• 使用 SeedProd 在 WordPress 中添加自定义导航菜单
• 使用 Beaver Builder 在 WordPress 中添加自定义导航菜单
• 在 WordPress 中创建适合移动设备的响应式菜单
• 您可以使用 WordPress 导航菜单执行更多操作

话虽如此，让我们来看看如何在您的主题中添加自定义 WordPress 导航菜单.

在 WordPress 主题中创建自定义导航菜单

导航菜单是 WordPress 主题的一个功能.每个主题都可以定义自己的菜单位置和菜单支持.

要添加自定义导航菜单，您需要做的第一件事是通过将此代码添加到主题的functions.php 文件来注册新的导航菜单.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

您现在可以转到外观»菜单页面并尝试创建或编辑新菜单.您将看到"我的自定义菜单"作为主题位置选项.

提示:如果要添加多个新的导航菜单位置，则需要使用如下代码:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

一旦您添加了菜单位置，请继续按照我们关于如何为初学者添加导航菜单的教程在 WordPress 管理中添加一些菜单项.

这将使我们能够继续下一步，即在您的主题中显示菜单.

在 WordPress 主题中显示自定义导航菜单

接下来，我们需要在您的 WordPress 主题中显示新的导航菜单.通常放置导航菜单的最常见位置是在网站标题或徽标之后的标题部分.

但是，您可以将导航菜单添加到您想要的任何位置.

您需要将此代码添加到要显示菜单的主题模板文件中.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

主题位置是我们在上一步中选择的名称.

容器类是将添加到导航菜单中的 CSS 类.您的菜单将在您的网站上显示为简单的项目符号列表.

您可以使用 CSS 类 .custom_menu_class 通过添加自定义 CSS 代码来设置菜单样式.以下是帮助您入门的示例 CSS:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;	
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a { 
    color:#000;
}

要了解有关设置导航菜单样式的更多信息，请参阅有关如何设置 WordPress 导航菜单样式的详细教程

使用 SeedProd 在 WordPress 中添加自定义导航菜单

这种方法简单很多，推荐给所有用户.您可以使用拖放构建器添加自定义导航菜单，而不是编写代码.

为此，我们将使用 SeedProd.它是市场上最好的 WordPress 页面构建器插件，可让您轻松为您的网站创建自定义页面.

它带有漂亮的模板，您可以将其用作起点.之后，您只需拖放元素即可将设计编辑为您自己的风格.

首先，您需要安装并激活 SeedProd 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，您需要输入您的插件许可证密钥.您可以在 SeedProd 网站上的帐户下找到此信息.

接下来，您需要前往SeedProd »页面页面，然后单击添加新着陆页按钮.

然后，系统会要求您选择一个模板作为设计的起点.只需单击模板即可选择它.

系统会要求您为页面提供标题，然后单击"保存并开始编辑页面"按钮继续.

这将启动页面构建器界面，并实时预览您的页面.您只需指向并单击任何项​​目即可对其进行编辑和更改.

要添加自定义导航菜单，只需将导航菜单块从左列拖放到您的页面即可.

之后，您需要选择要在此处显示的菜单.您还可以调整字体大小、对齐方式以及打开移动菜单.

提示:您可以通过转到外观»来创建新菜单.如果需要，菜单页面.

接下来，您需要切换到"高级"选项卡.从这里，您可以自定义菜单颜色、排版和其他高级选项.

对导航菜单感到满意后，您可以保存更改或发布页面.然后，您可以预览该页面以查看其运行情况.

使用 Beaver Builder 在 WordPress 中添加自定义导航菜单

此方法也有助于用户为其网站创建自定义页面并需要无代码解决方案.

首先，您需要安装并激活 Beaver Builder 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，您需要创建一个新页面或编辑要添加导航菜单的现有页面.在帖子编辑器屏幕上，单击"启动 Beaver Builder"按钮.

如果是新页面，那么你可以使用Beaver Builder自带的一个现成的模板.您还可以立即编辑退出页面.

接下来，您需要添加 Menus 模块并将其拖放到您的页面上要显示菜单的位置.

这将在弹出窗口中显示菜单模块设置.首先，您需要选择要使用的导航菜单.您可以随时通过访问 外观 » 创建新菜单或编辑现有菜单.WordPress 管理区域中的菜单页面.

您也可以查看其他设置.Beaver Builder 允许您为菜单选择自定义颜色、背景和其他样式属性.

完成后，您可以单击"保存"按钮并预览菜单.

在 WordPress 中创建适合移动设备的响应式菜单

随着移动设备使用量的增加，您可能希望通过添加众多流行效果之一来使您的菜单对移动设备友好.

您可以为移动菜单添加滑出效果(上图)、下拉效果，甚至切换效果.

我们有详细的分步指南，介绍如何制作适合移动设备的响应式 WordPress 菜单.

使用 WordPress 导航菜单做更多事情

导航菜单是一种强大的网页设计工具.它们允许您将用户指向您网站最重要的部分.

WordPress 允许您做的不仅仅是在菜单中显示链接.尝试这些有用的教程来扩展 WordPress 网站上导航菜单的功能.

• 如何在 WordPress 中添加带有导航菜单的图像图标
• 如何在 WordPress 的菜单中添加条件逻辑
• 如何在 WordPress 主题中添加菜单描述
• 如何在 WordPress 中添加全屏响应式菜单
• 如何向您的 WordPress 网站添加大型菜单

就是这样，我们希望这份终极指南能帮助您学习如何在 WordPress 中添加导航菜单.您可能还想查看我们列出的 25 个最有用的 WordPress 小部件列表，以及我们必须拥有的 WordPress 插件列表.