WordPress wp_nav_menu函数自定义菜单创建与使用教程

WordPress菜单是网站设计中不可或缺的元素，而WordPress平台为用户提供了强大的菜单定制功能。当您使用WordPress主题时，如果主题支持菜单功能，您可以通过后台轻松自定义并选择多种显示选项。然而，若需在自定义位置展示菜单，就需要通过编辑主题文件并添加wp_nav_menu函数来实现。通过将wp_nav_menu与register_nav_menu功能结合使用，您可以在网站的任何位置创建和放置菜单，即使您并非专业开发者，也能轻松添加和配置这些功能。此外，您可以直接从WordPress仪表盘编辑菜单，使操作更加便捷。

本文将深入探讨WordPress的wp_nav_menu函数的工作原理，详细解析其参数和CSS类，并指导您如何在主题中有效使用该函数。我们将分步骤介绍如何创建、编辑和显示自定义菜单，帮助您更好地掌握WordPress菜单定制技巧。

### wp_nav_menu函数详解

wp_nav_menu是WordPress中用于显示自定义菜单的核心功能，与仅显示页面列表的wp_page_menu不同，wp_nav_menu专注于自定义菜单的展示。您可以将此函数添加到任何主题的模板文件中，灵活控制菜单的展示位置。以下是wp_nav_menu函数的基本语法示例：

“`php
wp_nav_menu( array $args = array() )
“`

要使函数正常工作，您需要指定要显示的菜单名称。例如，在页面模板中，您可以使用以下代码：

“`php
wp_nav_menu( array( ‘theme_location’ => ‘custom-menu’) );
“`

wp_nav_menu函数支持多个参数，其中theme_location参数用于指定要使用的自定义菜单名称。如果您不熟悉代码编辑，也可以选择使用WordPress菜单插件，这些插件提供了类似wp_nav_menu的功能，使您能够轻松创建和放置自定义菜单。此外，许多WordPress页面构建器也支持自定义菜单功能，如果您正在使用这些工具，可以检查它们是否提供相应的菜单定制选项。

### wp_nav_menu参数与CSS类

WordPress函数通常提供多种参数来调整其功能，wp_nav_menu也不例外。您可以通过参数自定义菜单的展示效果，以下是一些常用的wp_nav_menu参数：

– **menu**：指定要使用的菜单，可以是ID、slug、名称或对象。
– **menu_class**：为菜单配置CSS类，默认使用菜单类。
– **menu_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还会自动为每个显示的菜单项应用一系列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：对应于任何分类的项目。

这些CSS类为您的菜单样式设计提供了极大的灵活性，您可以根据需要使用这些类来设置精确的样式。

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

掌握了wp_nav_menu函数的基本知识后，接下来我们将分步骤指导您如何在主题中使用该函数创建和自定义菜单。

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

首先，您需要使用wp_nav_register函数为特定主题创建或“注册”菜单。这需要在主题的functions.php文件中进行操作。建议您在开始之前创建一个子主题，以避免主题更新时代码丢失。您可以通过WordPress仪表盘中的“外观”->“主题文件编辑器”访问functions.php文件，或使用FTP访问该文件。

在functions.php文件末尾添加以下代码：

“`php
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函数来指定其位置。具体位置取决于您使用的主题，您可以通过“外观”->“主题文件编辑器”访问相关文件。

在模板文件中添加以下代码：

“`php
wp_nav_menu( array( ‘theme_location’ => ‘custom-menu’, ‘container_class’ => ‘custom-menu-container’, ‘fallback_cb’ => ‘wp_page_menu’ ) );
“`

请根据需要更新代码中的自定义主题slug和其他参数。保存模板文件后，访问使用该模板的页面检查菜单是否正常显示。若菜单未显示，请仔细检查theme_location参数的slug是否正确。

### 小结

通过WordPress，您可以轻松创建自定义菜单，但若需在自定义位置展示菜单，wp_nav_menu函数将发挥关键作用。使用register_nav_menu创建自定义菜单，然后通过wp_nav_menu函数在网站的任何位置显示它。以下是简要回顾：

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

掌握这些步骤，您将能够灵活定制WordPress网站的菜单，提升用户体验和网站功能。