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

Do you want to add custom navigation menus in your WordPress theme? Navigation menus are the horizontal list of links displayed on top of most websites.

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

By default, WordPress themes come with pre-defined menu locations and layouts, but what if you wanted to add your own custom navigation menus?

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

In this article, we’ll show you how to easily create and add custom navigation menus in WordPress, so you can display them anywhere on your theme.

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

您何时需要此WordPress导航菜单教程？ (When Do You Need this WordPress Navigation Menu tutorial?)

Most WordPress themes come with at least one spot where you can display your site’s navigation links in a menu.

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

You can manage menu items from an easy to use interface inside your WordPress admin area.

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

If you’re just looking to add navigation menus on your website, then simply follow our beginner’s guide on how to add a navigation menu in WordPress.

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

The goal of this tutorial is to help DIY / intermediate users add custom navigation menus in their WordPress themes.

本教程的目的是帮助DIY /中级用户在其WordPress主题中添加自定义导航菜单。

We’ll be covering the following topics in this article:

我们将在本文中介绍以下主题：

• Creating a custom navigation menu in WordPress themes在WordPress主题中创建自定义导航菜单
• Displaying custom navigation menu in WordPress theme在WordPress主题中显示自定义导航菜单
• Adding a custom navigation menu in WordPress using page builder使用页面构建器在WordPress中添加自定义导航菜单
• Creating mobile-friendly responsive menus in WordPress在WordPress中创建移动友好的响应菜单
• More things you can do with WordPress navigation menus您可以使用WordPress导航菜单执行更多操作

Having said that, let’s take a look at how to add custom WordPress navigation menus in your theme.

话虽如此，让我们看一下如何在主题中添加自定义WordPress导航菜单。

在WordPress主题中创建自定义导航菜单 (Creating Custom Navigation Menus in WordPress Themes)

Navigation menus are a feature of WordPress themes. Each theme can define its own menu locations and menu support.

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

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

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

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

You can now go to Appearance » Menus page in your WordPress admin and try to create or edit a new menu. You will see ‘My Custom Menu’ as theme location option.

现在，您可以转到WordPress管理员中的外观»菜单页面，然后尝试创建或编辑新菜单。 您将看到“我的自定义菜单”作为主题位置选项。

If you want to add more than one new navigation menu location, then you would need to use a code like this:

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

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' );

Once you have added the menu location, go ahead and add some menu items in the WordPress admin by following our tutorial on how to add navigation menus for beginners.

添加菜单位置后，请按照我们有关如何为初学者添加导航菜单的教程，继续并在WordPress管理中添加一些菜单项。

This will allow us to move on to the next step which is displaying the menu in your theme.

这将使我们继续进行下一步，即在您的主题中显示菜单。

在WordPress主题中显示自定义导航菜单 (Displaying Custom Navigation Menus in WordPress Themes)

Next, we need to display the new navigation menu in your WordPress theme. The most common place where navigation menus are usually placed is in the header section of a website just after the site title or logo.

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

However, you can add your navigation menu anywhere that you want.

但是，您可以在所需的任何位置添加导航菜单。

You will need to add this code in your theme’s template file where you want to display your menu.

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

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

The theme location is the name that we selected in the previous step.

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

The container class is the CSS class that will be added to your navigation menu. Your menu will appear as a plain bulleted list on your website.

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

You can use the CSS class .custom_menu_class to style your menus. Here is a sample CSS to help you get started:

您可以使用CSS类.custom_menu_class设置菜单样式。 这是一个示例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;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline;
} 
div.custom-menu-class a { 
    color:#FFFFFF;
}

To learn more about styling a navigation menu, see our detailed tutorial on how to style WordPress navigation menus

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

使用页面构建器在WordPress中添加自定义导航菜单 (Adding a Custom Navigation Menu in WordPress Using Page Builder)

If you are creating a custom landing page or home page layout, then using a WordPress page builder plugin would make the whole thing a lot easier.

如果要创建自定义登录页面或主页布局，则使用WordPress页面构建器插件会使整个过程变得容易得多。

We recommend using Beaver Builder, which is the best WordPress page builder on the market. It allows you to create any type of page layout using simple drag and drop tools (no coding required).

我们建议使用Beaver Builder ，这是市场上最好的WordPress页面构建器。 它允许您使用简单的拖放工具(无需编码)来创建任何类型的页面布局。

This also includes adding a custom navigation menu to your page layout.

这还包括向页面布局添加自定义导航菜单。

First, you’ll need to install and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, you need to create a new page or edit an existing one where you would like to add the navigation menu. On the post editor screen, click on the ‘Launch Beaver Builder’ button.

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

If it is a new page, then you can use one of the ready-made templates that come with Beaver Builder. You can also edit your exiting page right away.

如果是新页面，则可以使用Beaver Builder随附的现成模板之一。 您也可以立即编辑退出页面。

Next, you need to add Menus module and drag and drop it on your page to the place where you want to display the menu.

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

This will bring up the Menu module settings in a popup. First, you need to select the navigation menu you want to use. You can always create new menus or edit an existing menu by visiting Appearance » Menus page in WordPress admin area.

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

You can review other settings as well. Beaver Builder allows you to choose custom colors, background, and other style properties for your menu.

您也可以查看其他设置。 使用Beaver Builder，您可以为菜单选择自定义颜色，背景和其他样式属性。

Once you are done, you can click on the Save button and preview your menu.

完成后，您可以单击“保存”按钮并预览菜单。

在WordPress中创建适合移动设备的响应菜单 (Creating Mobile-Friendly Responsive Menus in WordPress)

With the increase in usage of mobile devices, you may want to make your menus mobile-friendly by adding one of the many popular effects.

随着移动设备使用率的增加，您可能想通过添加许多流行效果之一使菜单移动友好。

You can add a slide-out effect (above), dropdown effect, and even a toggle effect for mobile menus.

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

We have a detailed step by step guide on how to make mobile-ready responsive WordPress menus.

我们有详细的分步指南， 介绍如何制作支持移动设备的WordPress菜单 。

使用WordPress导航菜单做更多事情 (Do More With WordPress Navigation Menus)

Navigation menus are a powerful web design tool. They allow you to point users to the most important sections of your website.

导航菜单是功能强大的网页设计工具。 它们使您可以将用户指向网站的最重要部分。

WordPress allows you to do a lot more than just displaying links in your menu. Try these useful tutorials to extend the functionality of navigation menus on your WordPress site.

WordPress不仅可以在菜单中显示链接，还可以做更多的事情。 尝试这些有用的教程，以扩展WordPress网站上的导航菜单的功能。

• How to add image icons with navigation menus in WordPress如何在WordPress中使用导航菜单添加图像图标
• How to add conditional logic to menus in WordPress如何在WordPress中向菜单添加条件逻辑
• How to add menu descriptions in your WordPress theme如何在WordPress主题中添加菜单描述
• How to add a fullscreen responsive menu in WordPress如何在WordPress中添加全屏响应菜单
• How to add a mega menu to your WordPress site 如何向您的WordPress网站添加大型菜单

That’s all, we hope this ultimate guide helped you learn how to add a navigation menu in WordPress. You may also want to see our list of 25 most useful WordPress widgets, and our list of the must have WordPress plugins.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/