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

您想在您的 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’ );

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

自定义导航菜单添加到主题

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

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

但是，您可以在任何地方添加导航菜单。

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

‘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;}

自定义菜单已修复