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

已发表: 2022-11-08

您想在您的 WordPress 主题中添加自定义导航菜单吗？

所有主题都设置了可以显示导航菜单的位置。但是，默认情况下，除了这些预定义位置之外，您不能在其他任何地方添加菜单。

在本文中，我们将向您展示如何将自定义导航菜单添加到 WordPress 主题的任何区域。

为什么要在 WordPress 主题中添加自定义导航菜单？

导航菜单是指向网站重要区域的链接列表。它们使访问者可以轻松找到有趣的内容，从而增加网页浏览量并降低 WordPress 中的跳出率。

菜单的确切位置将根据您的 WordPress 主题而有所不同。大多数主题都有多个选项，因此您可以创建不同的菜单并将它们显示在不同的地方。

要查看当前 WordPress 主题中可以在何处显示菜单，只需转到外观 » 菜单，然后查看“显示位置”部分。

下图显示了 Astra WordPress 主题支持的位置。

但是，有时您可能希望在主题中未列为“显示位置”的区域中显示菜单。

考虑到这一点，让我们来看看如何创建 WordPress 导航菜单，然后将它们添加到您的主题中。只需使用下面的快速链接跳转到您喜欢的方法。

方法一、在全站编辑中添加自定义导航菜单
方法 2. 使用 SeedProd 在 WordPress 中创建自定义导航菜单（适用于所有主题）
方法 3. 使用代码在 WordPress 中创建自定义导航菜单（高级）

方法一、在全站编辑中添加自定义导航菜单

如果您使用块主题，则可以使用完整站点编辑 (FSE) 和块编辑器添加自定义导航菜单。有关更多详细信息，您可以查看我们关于最佳 WordPress 全站编辑主题的文章。

此方法不适用于每个主题，并且不会让您自定义菜单的每个部分。如果您想向任何 WordPress 主题添加完全自定义的菜单，那么我们建议使用页面构建器插件。

如果您使用的是基于块的主题，请转到外观»编辑器。

这将启动完整的站点编辑器，其中已选择您的活动主题模板之一。

如果您想将自定义导航菜单添加到不同的模板，请单击工具栏中的箭头并选择“浏览所有模板”。

站点编辑器现在将显示属于您的主题的所有不同模板。

只需找到您要编辑的模板，然后单击即可。

下一步是将导航块添加到要显示菜单的区域。

在左上角，单击蓝色的“+”按钮。

现在，继续并在搜索栏中输入“导航”。

当“导航”块出现时，只需将其拖放到您的布局上即可。

接下来，单击以选择导航块。

如果您已经创建了要显示的菜单，请单击“选择菜单”并从下拉列表中进行选择。

另一种选择是单击“创建新菜单”，它允许您在完整的站点编辑器中构建导航菜单。

要从空白菜单开始，只需单击“从空白开始”。

要将项目添加到新菜单，只需单击“+”图标。

这将打开一个弹出窗口，您可以在其中添加任何帖子或页面，并决定是否应在新选项卡中打开这些链接。

只需重复这些步骤即可将更多项目添加到菜单中。

如果您对菜单的外观感到满意，只需单击“保存”按钮即可。您的网站现在将使用新模板，访问者可以与您的自定义导航菜单进行交互。

方法 2. 使用 SeedProd 在 WordPress 中创建自定义导航菜单（适用于所有主题）

完整的站点编辑器是将基本自定义菜单添加到基于块的主题的快速简便的方法。但是，如果您想为任何主题添加一个高级的、完全可定制的菜单，那么您将需要一个页面构建器插件。

SeedProd 是市场上最好的 WordPress 页面构建器插件，允许您自定义导航菜单的每个部分。

SeedProd 附带 180 多个专业设计的模板，您可以将其用作起点。选择模板后，您可以使用简单的拖放操作将自定义导航菜单添加到您的站点。

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

注意：还有一个免费版本的 SeedProd，允许您在不编写代码的情况下创建自定义导航菜单。但是，在本指南中，我们将使用 SeedProd Pro，因为它有更多模板供您选择。

激活插件后，SeedProd 将要求您提供许可证密钥。

您可以在 SeedProd 网站上的帐户下找到此信息。输入密钥后，单击“验证密钥”按钮。

完成后，转到SeedProd » Landing Pages并单击“添加新的 Landing Page”按钮。

您现在可以为您的自定义页面选择一个模板。

为了帮助您找到合适的设计，SeedProd 的所有模板都被组织成不同的活动类型，例如即将推出和领先挤压活动。您甚至可以使用 SeedProd 的模板来改进您的 404 页面。

要仔细查看任何设计，只需将鼠标悬停在该模板上，然后单击放大镜图标。

当您找到想要使用的设计时，请单击“选择此模板”。

我们在所有图像中都使用“黑色星期五销售页面”模板，但您可以使用任何您想要的模板。

选择模板后，输入该自定义页面的名称。 SeedProd 将根据页面标题自动创建一个 URL，但您可以将此 URL 更改为您想要的任何内容。

输入此信息后，单击“保存并开始编辑页面”按钮。

大多数模板已经包含一些块，它们是所有 SeedProd 页面布局的核心组件。

要自定义块，只需在页面编辑器中单击以选中它。

左侧工具栏将显示该块的所有设置。例如，在下图中，我们正在更改“标题”块中的文本。

您可以使用左侧菜单中的设置设置文本格式、更改其对齐方式、添加链接等。

要向您的设计添加新块，只需在左侧菜单中找到任何块，然后将其拖到您的设计中。如果您想删除一个块，只需单击以选择该块，然后单击垃圾桶图标。

由于我们要创建自定义导航菜单，因此将“导航菜单”块拖到页面上。

这将创建一个带有单个默认“关于”项的导航菜单。

要自定义此菜单项，请在左侧菜单中单击以选中它。

这将打开一些控件，您可以在其中更改文本，以及添加要链接到的菜单项的 URL。

默认情况下，菜单项将是一个“dofollow”链接并在同一浏览器窗口中打开。要更改这些设置中的任何一个，只需使用“URL 链接”部分中的复选框即可。

在下图中，我们正在创建一个将在新窗口中打开的“nofollow”链接。

要向菜单添加更多项目，只需单击“添加新项目”按钮。

然后，您可以按照上述相同的过程自定义这些项目中的每一个。

左侧菜单还具有更改字体大小和文本对齐方式的设置。

您甚至可以创建一个分隔线，它会出现在菜单中的每个项目之间。

之后，继续并切换到“高级”选项卡。在这里，您可以更改菜单的颜色、间距、排版和其他高级选项。

当您进行更改时，实时预览会自动更新，因此您可以尝试不同的设置来查看您的设计中看起来不错的部分。

当您对自定义菜单的外观感到满意时，就可以发布它了。

只需单击“保存”旁边的下拉箭头，然后选择“发布”。

您的自定义导航菜单和页面现在将在您的 WordPress 博客上生效。

方法 3. 使用代码在 WordPress 中创建自定义导航菜单（高级）

如果您不想设置页面构建器插件，则可以使用代码添加自定义导航菜单。通常，您需要将自定义代码片段添加到主题的 functions.php 文件中。

但是，我们不建议高级用户以外的任何人使用此方法，即使这样，代码中的一个小错误也可能导致许多常见的 WordPress 错误，或者完全破坏您的网站。

这就是我们推荐使用 WPCode 的原因。这是在 WordPress 中添加自定义代码而无需编辑任何核心 WordPress 文件的最简单和最安全的方法。

您需要做的第一件事是在您的网站上安装并激活免费的 WPCode 插件。有关更多详细信息，请参阅我们关于如何安装 WordPress 插件的分步指南。

激活后，转到Code Snippets » Add Snippet在您的 WordPress 仪表板中。

在这里，您会看到所有可以添加到站点的不同现成片段。

由于我们要添加我们自己的代码段，请将鼠标悬停在“添加您的自定义代码”上，然后单击“使用代码段”。

首先，输入自定义代码片段的标题。这可以是帮助您识别代码段的任何内容。

之后，打开“代码类型”下拉菜单并选择“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 仪表板中，转到外观 » 主题文件编辑器。

在右侧菜单中，选择要编辑的模板。例如，如果您想在网站的页眉中显示自定义导航菜单，那么您通常需要选择 header.php 文件。

如需帮助找到正确的模板文件，请参阅我们的指南，了解如何在您的 WordPress 主题中找到要编辑的文件。

选择模板文件后，您需要添加一个 wp_nav_menu 函数并指定您的自定义菜单的名称。例如，在以下代码片段中，我们将我的自定义菜单添加到主题的标题中：

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

添加代码后，单击“更新文件”按钮以保存您的更改。

现在，如果您访问您的站点，您将看到正在运行的自定义菜单。

默认情况下，您的菜单将显示为普通的项目符号列表。

您可以通过向您的站点添加自定义 CSS 代码来设置自定义导航菜单的样式，以更好地匹配您的 WordPress 主题或公司品牌。

为此，请转到外观 » 自定义。

在 WordPress 定制器中，单击“其他 CSS”。

这将打开一个小型代码编辑器，您可以在其中输入一些 CSS。

您现在可以使用添加到主题模板的 CSS 类来设置菜单样式。在我们的示例中，这是.custom_menu_class 。

在下面的代码中，我们添加边距和填充，将文本颜色设置为黑色，并在水平布局中排列菜单项：

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 定制器将自动更新以显示菜单在新样式下的外观。

如果您对菜单的外观感到满意，请单击“发布”以使您的更改生效。

有关更多信息，请参阅我们关于如何设置 WordPress 导航菜单样式的指南。

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

使用 WordPress，您可以做的不仅仅是在菜单中显示链接。以下是如何从导航菜单中获得更多信息：

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

我们希望这份终极指南能帮助您了解如何在 WordPress 中添加自定义导航菜单。您可能还想了解增加博客流量的最佳方式，以及如何跟踪 WordPress 网站的网站访问者。

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

如何在 WordPress 主题中添加自定义导航菜单一文首次出现在 WPBeginner 上。