WordPress wp_nav_menu,自定义菜单 文字详细教程

菜单是网站上一些最常见的元素。使用WordPress，如果您的主题支持，您可以轻松自定义菜单并从多个显示选项中进行选择。但是，如果您想在自定义位置使用菜单，则需要编辑主题文件并添加wp_nav_menu函数。

通过将此功能与register_nav_menu结合使用，您将能够在网站的任何位置创建和放置菜单。即使您不是开发人员，添加和配置这些功能也相对简单。此外，您可以直接从WordPress仪表盘编辑菜单。

在本文中，我们将讨论WordPress的wp_nav_menu函数的工作原理。我们将向您展示哪些参数和类与wp_nav_menu一起使用，然后解释如何在您的主题中使用该函数。

• wp_nav_menu参数
• wp_nav_menu CSS类
• 步骤 1：使用wp_nav_register函数创建自定义菜单
• 步骤 2：编辑您的自定义WordPress菜单
• 步骤 3: 使用wp_nav_menu函数显示新菜单

什么是wp_nav_menu函数？

wp_nav_menu是一个可以在WordPress中显示自定义菜单的功能。与显示现有页面列表的wp_page_menu不同， wp_nav_menu仅适用于自定义菜单。

您可以将该功能添加到任何主题的模板文件中，以控制您希望菜单出现的位置。这是一个没有任何特定参数的函数的快速示例：

wp_nav_menu( array $args = array() )

您需要指定要显示哪个菜单才能使代码正常工作。实际上，页面模板中的 wp_nav_menu 示例函数如下所示：

wp_nav_menu( array( 
    'theme_location' => 'custom-menu') );

wp_nav_menu函数可以包含多个参数。在该示例中，我们使用theme_location来指定我们要使用的自定义菜单的名称。

如果您不习惯将代码添加到您的网站，您可以选择WordPress菜单插件。一些工具将使您能够创建和放置自定义菜单，就像您使用wp_nav_menu一样。

您也许还可以使用一些WordPress页面构建器。如果您已经在使用这些工具之一，请检查它是否提供自定义菜单功能。

WordPress的wp_nav_menu参数和CSS类

大多数WordPress函数都提供了各种预先确定的参数来修改它们的效果。对于wp_nav_menu，您同时拥有参数和CSS类。

wp_nav_menu参数

您可以使用一个或多个参数自定义wp_nav_menu函数。以下是可用选项：

• ‘menu’ – 表示您正在使用哪个菜单。您可以使用ID、slug、名称或对象来指定菜单。
• ‘menu_class’ – 为您的菜单配置CSS类。默认情况下，该函数将使用菜单类。
• ‘menu_id’ – 指定菜单的ID。默认值或ID 是带有附加或递增数字的菜单的 slug。
• ‘container’ – 选择用于菜单的容器类型。默认情况下，该函数使用div容器。
• ‘container_class’ – 设置一个直接应用于菜单容器的CSS类。默认情况下，该菜单类将是menu-{menu slug}-container。
• ‘container_id’ – 设置菜单容器的ID。与菜单的ID一样，容器将默认使用递增的 slug。
• ‘fallback_cb’ – 如果WordPress找不到您要显示的菜单，此参数会告诉它应该显示哪个其他元素。
• ‘theme_location’ – 如果您使用register_nav_menu注册自定义菜单，此参数将显示它。
• ‘items_wrap’ – 默认情况下，您的菜单将以无序列表 (ul)格式显示。此参数允许您配置如何包装菜单项。
• ‘item_spacing’ – 大多数菜单使用空格来分隔项目。如果要禁用该空格，可以将此参数设置为discard。

我们没有提到一些额外的wp_nav_menu参数，包括用于向菜单添加文本的选项。但是，上面列出的参数是将自定义菜单添加到主题时使用的主要元素。

下面是一个使用多个参数的函数示例：

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

如果可用参数的数量似乎过多，请不要担心。在大多数情况下，您只会使用theme_location和container_class参数。这使得配置函数非常简单。

wp_nav_menu CSS类

当您使用wp_nav_menu函数时，它会自动将一系列CSS类应用于每个显示的菜单项。

以下是最重要的wp_nav_menu CSS类：

• .menu-item – 此类自动应用于每个菜单项。
• .menu-item-has-children – 仅适用于带有子项的菜单项。
• .menu-item-object-{object} – 适用于每个菜单项。对象占位符可以是post_type或分类。
• .menu-item-object-category – 这些菜单项对应于特定的WordPress类别。
• .menu-item-object-tag – 对应于 WordPress 标签的菜单项。
• .menu-item-object-page – 静态页面中的菜单项。
• .menu-item-object-{custom} – 对应于自定义文章类型的项目。
• .menu-item-type-{type} – 适用于每个菜单项。类型占位符可以是post_type或taxonomy 。
• .menu-item-type-post_type – 对应于任何post_type的项目。
• .menu-item-type-taxonomy – 对应于任何分类的项目。

如您所见，wp_nav_menu CSS类有很多重叠之处。您可以使用的大量选项意味着您可以在使用CSS设置自定义菜单样式时非常具体。

请记住，您还可以使用带有wp_nav_menu参数的自定义CSS类。如果预先确定的类都没有针对您想要设置样式的确切菜单或项目，那么这种方法可能是一个很好的选择。

如何使用WordPress的wp_nav_menu函数创建和自定义菜单

既然您知道wp_nav_menu函数是如何工作的，那么是时候学习如何在您的主题中使用它了。让我们从讨论wp_nav_register开始。

步骤 1：使用 wp_nav_register 函数创建自定义菜单

正如我们之前提到的，wp_nav_menu不允许您创建自定义菜单，但允许您放置它们。这意味着您需要在使用该功能之前手动制作菜单。

wp_nav_register允许您为特定主题创建或“注册”菜单。您需要编辑主题的functions.php文件才能使用它。

在开始工作之前，如果您还没有使用子主题，我们建议您设置一个子主题。使用子主题将防止对主题代码的任何更改在您更新时消失。在更改基本文件之前完全备份您的网站也是明智之举。

解决此问题后，您需要访问主题的functions.php文件。最简单的方法是导航到仪表盘中的外观 -> 主题文件编辑器页面。

主题编辑器应该打开到您的活动主题，您可以使用右侧的菜单选择functions.php文件。

或者，您可以使用文件传输协议 (FTP)访问 functions.php 。如果您更喜欢使用成熟的文本编辑器，我们推荐这种方法。您只需添加一段代码，因此内置的WordPress代码编辑器就足够了。

导航到文件末尾并将以下代码添加到其中：

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

您需要修改custom-menu菜单的名称和slug，这将是Custom Menu字段。但是，您可以为自定义菜单设置任何名称。

保存对functions.php文件的更改。现在是时候编辑哪些项目将包含在新菜单中了。

步骤 2：编辑您的自定义WordPress菜单

要编辑您刚刚设置的自定义菜单，请前往外观 -> 菜单。查找屏幕右下角的菜单设置部分。

该部分应包括您在第一步中注册的新菜单位置。

要编辑该位置将显示的项目，请使用“选择要编辑的菜单： ”选项选择一个菜单或创建一个新菜单。

然后，使用左侧的列表选择您希望菜单包含的元素，然后在“菜单结构”部分下重新排列它们。

每个菜单项包括一个显示名称和一个链接。当您对您的选择感到满意时，请记住在“菜单设置”下验证您的新自定义菜单是否处于活动状态。如果是，请将更改保存到菜单。

步骤 3：使用wp_nav_menu函数显示新菜单

在这个阶段，您应该有一个使用您的主题注册的现成菜单。但是，尽管菜单存在，但在您使用wp_nav_menu函数指定其位置之前，它不会出现在任何地方。

您需要在页面模板中添加wp_nav_menu函数来放置自定义菜单。您有权访问的页面模板文件取决于您使用的主题。

导航到外观 -> 主题文件编辑器以访问仪表盘中的这些文件。右侧的主题文件部分包含您可以从此屏幕编辑的所有文件的列表。

在我们的示例中，我们选择了主题的单页模板。您需要添加到模板的代码应如下所示：

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

在将更改保存到模板文件之前，请记住使用自定义主题的 slug 和您要使用的其他参数更新占位符。我们在示例中包含了container_class和fallback_cb参数。

但是，您使用的代码可以很简单：

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu' ) ); 
?>

该代码的位置将决定页面上菜单的位置。如果您不确定该展示位置的工作原理，您可以在模板文件中尝试不同的位置。

我们不建议在编辑模板文件时更改代码的任何其他部分，除非您知道它的作用。由于您只添加了几行代码，因此如果有任何错误，您可以将其删除。

编辑后，通过访问使用您正在处理的模板的页面之一来检查菜单是否正在加载。如果菜单未显示，则可能是theme_location参数的slug有错误，因此请继续仔细检查。

小结

尽管您可以通过WordPress创建自定义菜单，但wp不允许您添加自定义菜单位置。这就是wp_nav_menu函数的用武之地。使用此功能，您可以在网站的任何部分显示使用register_nav_menu创建的自定义菜单。

以下是如何使用wp_nav_menu函数的快速回顾：

1. 使用register_nav_menu函数创建自定义菜单。
2. 编辑您的自定义WordPress菜单。
3. 使用wp_nav_menu函数显示新菜单。