诶哎一下

标签：自定义菜单

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

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

在本文中，我们将讨论WordPress的wp_nav_menu函数的工作原理。我们将向您展示哪些参数和类与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( array $args = array() )
```
wp_nav_menu( array $args = array() )
```
您需要指定要显示哪个菜单才能使代码正常工作。实际上，页面模板中的 wp_nav_menu 示例函数如下所示：

wp_nav_menu( array(

‘theme_location’ => ‘custom-menu’) );

wp_nav_menu( array(
‘theme_location’ => ‘custom-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’ ) );

?>

<?php
wp_nav_menu( array(
‘theme_location’ => ‘custom-menu’,
‘container_class’ => ‘menu-class’
‘fallback_cb’ => ‘wp_page_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’ );

function wpb_custom_new_menu() {
register_nav_menu(‘custom-menu’,__( ‘Custom Menu’ ));
}
add_action( ‘init’, ‘wpb_custom_new_menu’ );
```
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’ ) );

?>

<?php
wp_nav_menu( array(
‘theme_location’ => ‘custom-menu’,
‘container_class’ => ‘menu-class’
‘fallback_cb’ => ‘wp_page_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’ ) );

?>

<?php
wp_nav_menu( array(
‘theme_location’ => ‘custom-menu’ ) );
?>
```
<?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函数显示新菜单。
2023年1月13日
创建和定制WordPress导航菜单的深入浅出教程
一个WordPress网站如果没有菜单和子菜单，就不算什么了。在WordPress内根据你的喜好定制这些菜单也是很简单的。因此，你的WordPress菜单是一个 “front line”工具，以获得一个高的搜索排名，并保持访问者在网站上。

WordPress内部的专用屏幕掩盖了你的菜单可以有多复杂。你也能够在你的网站上的几个位置显示菜单。如果你有编码技能，你可以定制你的WordPress菜单，几乎有无限的可能性。

在这篇文章中，我们将给你一个创建WordPress菜单的深入指南。我们还将向你展示如何利用该功能并以几种不同的方式增强它。
剖析WordPress的菜单

对于不熟悉的人来说，WordPress菜单通常是一个链接（包括下拉）的集合。它是一个直接的功能，只是你的网站骨架中的一个 “椎体”。

WordPress网站菜单示例

我们将在下一节中更详细地讨论在网站上看到的菜单。现在，你要知道，它们可以放在你想显示的任何地方。你可能只有几个预选的选项（基于小部件的区域）。不过，从技术上讲，菜单可以放在任何地方。

当然，WordPress的菜单对于导航网站是最重要的。如果你有一个清晰明确的导航菜单，这将有助于用户在你的网站上浏览，它将使你的跳出率下降。

它们也有另一个目的：你的菜单有助于你的搜索引擎优化（SEO）。优化WordPress菜单以利于SEO，更多的是关于舍弃什么，而不是放进什么。对于初学者来说，你可以取消一些元素–如标签云–并保持你所包含的链接的数量较少。

虽然谷歌允许你在一个页面上最多添加250个链接，但保持你的 “链接价值“是至关重要的。因此，减少外部链接的数量从长远来看对你有好处。

WordPress菜单结构的不同类型

你可能已经明白，根据你的应用程序的需要，你可以选择不同的WordPress菜单结构。

例如，标题菜单是最常见的，因为它们处理的是主要的网站导航。你也会经常看到主导航上方的小菜单，因为这是社交媒体图标、搜索栏等的绝佳位置。

SAU/CAL的网站有一个 “飞入 “菜单，包括导航和社交链接：

SAU/CAL网站飞入式菜单

这个菜单表明，WordPress的菜单有比导航网站更多的使用情况。使用WordPress的内置功能（后面会详细介绍），你可以为你需要的几乎任何东西创建一个菜单。

与页眉导航一样流行的是页脚。你经常会用这个区域为向下滚动的用户重复你的主要导航。此外，它也是为你的产品和服务提供更多基于上下文的链接的绝佳场所：

闪电博底部菜单

如果网站使用侧边栏，你还会看到侧边栏内的菜单：

一个侧边栏导航的例子

虽然在很多情况下你不会在这里看到主要导航，但它是一个传统的社交链接、博客文章档案和更多内容的地方。

如何创建一个自定义的WordPress菜单（3种方法）

创建一个WordPress菜单是一个简单的过程，不管你的专业水平如何。有三种主要的方法来完成这项工作：使用WordPress的内置功能；安装一个合适的插件或用代码来弄脏你的手。

接下来，我们将向你展示如何使用这三种方法创建一个WordPress菜单。

1. 使用WordPress的内置功能来创建你的菜单

WordPress有内置的工具来帮助你创建一个菜单。除了最新的用户之外，WordPress管理中的一个专门屏幕对所有的用户来说都是熟悉的。

WordPress的菜单界面

当然，使用本地功能来创建你的WordPress菜单有许多好处。首先，你与你的网站有完全的兼容性。而且，你可以使用一个熟悉的界面和本地工具来建立你的菜单。

要达到这个目的，请前往WordPress内的外观>菜单页面：

WordPress的菜单链接

这个屏幕分为几个不同的部分。在顶部，你会发现选择当前菜单或创建一个新菜单的选项：

菜单选择下拉

如果你决定建立一个新的菜单，给它起个名字，并查看菜单设置部分。

菜单设置选项

这里有很多复选框，但你有两个主要决定要做：
- 自动添加顶级页面到菜单中。这里的 “顶级 “是指你在WordPress中创建的不是其他页面的子页面的页面。例如，一篇博客文章不是一个顶级页面，因为在许多情况下它会有一个父级档案页（例如/blog）。另一方面，一个联系页面通常是顶级的，因为它通常不会有一个父页面。
- 菜单位置。每个主题都会有它的菜单位置。除非你改变了主题的核心文件，否则主题开发者已经硬编码了这些菜单位置。有些主题可能允许你通过其设置来定制它们。
一旦你准备好了，点击创建菜单按钮。屏幕将刷新，并将显示你在你的新菜单中。接下来，看一下屏幕的左侧：

菜单项的手风琴式菜单

这个屏幕列出了你网站上所有的帖子、页面、分类法和其他可链接的资产。你通过勾选左边的方框来建立你的菜单，然后点击添加到菜单按钮。

这将把它们移到菜单屏幕的中央部分：

在菜单结构部分拖放项目

在这里，你可以把菜单项目拖到合适的位置。如果你点击每个项目旁边的扩展箭头，你还可以为你的菜单项目设置一个标签，或者删除它。

展开一个菜单项

一旦你点击了保存菜单，你就可以开始了。不过，如果你展开屏幕顶部的屏幕选项菜单，你可以对你的WordPress菜单做更多事情：

显示选项面板

显示元素组可以让你在左边的侧边栏显示菜单元框。相比之下，显示高级菜单属性组可以显示列表项的链接目标、描述和CSS类。

菜单屏幕还有一个值得注意的方面。自定义链接框让你设置一个你选择的链接，而不是你网站上预定义的页面：

自定义链接框

这个选项是你如何将社交媒体链接添加到你的WordPress菜单中。该平台将根据你选择的网站为你拉出正确的图标，让你有机会为你选择的网站提供显示良好的标识。

2. 使用一个插件来创建你的自定义WordPress菜单

为WordPress添加功能的直接解决方案是通过插件。上一节已经介绍了为什么WordPress的原生选项几乎是你所需要的全部，但是插件可以扩展这个功能。

有一个问题是，你是否需要一个专门的（和额外的）插件来创建一个WordPress菜单，尽管这样做有很多好的理由。对于初学者来说，你经常会根据你在默认设置下无法访问的风格来制作一个菜单。特定的响应式设计、”巨型菜单 “等等，都可以通过插件来实现。

更重要的是，你可以使用一个专门的编辑器建立菜单，并在很多情况下从预设模板中选择。再加上广泛的定制选项，你有一个 “无代码 “解决方案，将提供一个适合你的网站的WordPress菜单。

例如，Max Mega Menu插件在你能实现的方面没有任何意外：

Max Mega Menu插件

一旦它被安装和激活，你会在WordPress内发现一个新的Mega Menu面板：

WordPress内的Menu Locations链接

如果你看一下Menu Locations屏幕，你会发现有更多的自定义功能供你使用：

Max Mega Menu的菜单位置屏幕

你还可以应用菜单主题，并以类似于市场上一些最好的页面生成器的范围来编辑它们：

Max Mega Menu中的 “菜单主题 “屏幕

我们可以在这里挖掘更多的东西，尽管我们会重复自己。我们鼓励你查看我们以前关于WordPress菜单插件的文章。我们详细介绍了如何选择适合你的插件以及如何使用它。

3. 编写代码来创建你的自定义WordPress菜单

为你自己的WordPress菜单编码是一个可靠的方法，可以实现你的勇敢者的目标（或者如果你是一个创建新的WordPress主题的开发者）。当然，你不会每天都打开一个代码编辑器来添加一个菜单。为此，你会使用本地的WordPress工具（或者可能是一个插件）。

也就是说，如果你想开发主题，学习如何为WordPress菜单编码是一个重要的要求。成功有四个部分：
- 注册你的菜单。
- 在前端显示WordPress的菜单。
- 在你的菜单或其项目中显示额外的内容。
- 定义一个回调。
我们假设你对代码编辑器很顺手，你有一个可以工作的开发环境，而且你的技能很敏锐。如果你还没有一个主题可以使用，你可以使用WordPress的默认选项，或者从我们的最快WordPress主题列表中挑选一个。

当你准备好的时候，你要打开主题的 functions.php 文件。注意，这与一般WordPress的同名文件不同。在这里，你需要注册你的菜单。换句话说，你必须告诉WordPress在外观>菜单页面上显示什么。要做到这一点，你需要使用register_nav_menus()函数。

function register_my_menus() {

register_nav_menus(

array(

‘header’ => __( ‘Header Menu’ ),

‘other’ => __( ‘Other Menu’ )

)

);

}

add_action( ‘init’, ‘register_my_menus’ );

function register_my_menus() {
register_nav_menus(
array(
‘header’ => __( ‘Header Menu’ ),
‘other’ => __( ‘Other Menu’ )
)
);
}
add_action( ‘init’, ‘register_my_menus’ );
```
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
```
这段代码告诉WordPress内的Manage Locations标签显示两个菜单：Header Menu和Other Menu：

在WordPress中注册菜单

接下来，你必须使用wp_nav_menu()函数来显示你的菜单。你要把它添加到与你想显示菜单的地方相对应的模板文件中。在我们的例子中，我们要用头，所以我们要在主题的header.php文件中添加以下代码：

wp_nav_menu( array( ‘theme_location’ => ‘header’ ) );

wp_nav_menu( array( ‘theme_location’ => ‘header’ ) );
```
wp_nav_menu( array( 'theme_location' => 'header' ) );
```
可能是这段代码被包裹在 if 语句中，和你的其他一些菜单一起，所以你要遵循你发现的惯例。

在这一点上，你可以像其他的菜单一样在WordPress中工作。虽然，你可能也想考虑为你的菜单项添加额外的内容。例如，你可以扩大定义的数组，以包括将在输出时呈现的HTML标签：

wp_nav_menu(

array(

‘menu’ => ‘primary’,

‘link_before’ => ”,

‘link_after’ => ”,

)

);

wp_nav_menu(
array(
‘menu’ => ‘primary’,
‘link_before’ => ”,
‘link_after’ => ”,
)
);
```
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
```
你在这里的最后一项任务是定义一个回调。默认情况下，当没有找到指定的菜单时，WordPress会显示一个填充的菜单。作为一种选择，当没有选择自定义菜单时，WordPress会显示一个页面的菜单。如果这不是你想要的动作，你可以为 theme-location 参数设置一个不同的参数，也可以添加一个 fallback_cb 参数：

wp_nav_menu(

array(

‘menu’ => ‘primary’,

// do not fall back to first non-empty menu

‘theme_location’ => ‘__no_such_location’,

// do not fall back to wp_page_menu()

‘fallback_cb’ => false

)

);

wp_nav_menu(
array(
‘menu’ => ‘primary’,
// do not fall back to first non-empty menu
‘theme_location’ => ‘__no_such_location’,
// do not fall back to wp_page_menu()
‘fallback_cb’ => false
)
);
```
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
```
一旦你理解了如何创建一个WordPress菜单，你就可以开始增强其功能。我们将在最后一节看一下这个问题，为WordPress创建一个自定义的菜单元框。

如何增强你的WordPress菜单

因为这一部分是高级的，我们在继续之前会做一些假设：
- 你知道如何用PHP创建一个WordPress菜单。
- 你的PHP技能足够好，可以跟随一些高级主题。
- 你知道如何注册和初始化一个WordPress插件。
这超出了本文的范围，但你可以使用WordPress插件模板生成器来创建一个新的、标准化的插件模板。

2023年1月13日