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

2020-05-07
WordPress

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

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

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

您何时需要此WordPress导航菜单教程？

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

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

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

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

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

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

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

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

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

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

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

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

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

functionwpb_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主题中显示新的导航菜单。通常放置导航菜单的最常见位置是网站标题或徽标之后的网站标题部分。

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

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

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

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

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

您可以使用CSS类.custom_menu_class来设置菜单样式。这是一个示例CSS，可以帮助您入门：

div.custom-menu-class ul {    margin:20px0px20px0px;    list-style-type: none;    list-style: none;    list-style-image: none;    text-align:right;}div.custom-menu-class li {    padding: 0px20px0px0px;    display: inline;} div.custom-menu-class a {     color:#FFFFFF;}

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