一个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' );
这段代码告诉WordPress内的Manage Locations标签显示两个菜单：Header Menu和Other Menu：
在WordPress中注册菜单
接下来，你必须使用wp_nav_menu()函数来显示你的菜单。你要把它添加到与你想显示菜单的地方相对应的模板文件中。在我们的例子中，我们要用头，所以我们要在主题的header.php文件中添加以下代码：
wp_nav_menu( array( 'theme_location' => 'header' ) );
可能是这段代码被包裹在 if 语句中，和你的其他一些菜单一起，所以你要遵循你发现的惯例。
在这一点上，你可以像其他的菜单一样在WordPress中工作。虽然，你可能也想考虑为你的菜单项添加额外的内容。例如，你可以扩大定义的数组，以包括将在输出时呈现的HTML标签：
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 ) );
一旦你理解了如何创建一个WordPress菜单，你就可以开始增强其功能。我们将在最后一节看一下这个问题，为WordPress创建一个自定义的菜单元框。
如何增强你的WordPress菜单
因为这一部分是高级的，我们在继续之前会做一些假设：
- 你知道如何用PHP创建一个WordPress菜单。
- 你的PHP技能足够好，可以跟随一些高级主题。
- 你知道如何注册和初始化一个WordPress插件。
这超出了本文的范围，但你可以使用WordPress插件模板生成器来创建一个新的、标准化的插件模板。
WordPress插件模板生成器
当你准备好了，创建并上传你的插件到WordPress：
在WordPress内安装的一个新插件
接下来，导航到该插件的文件夹，打开主文件。在这里，添加以下代码：
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
WordPress的add_meta_box()函数将在WordPress管理中注册一个元数据框。在官方文档中，有几个参数你要参考。我们也使用nav_menu_meta_box_object()过滤器，因为nav-menus.php文件中没有动作可以挂接。这个语句决定了该函数是否为一个对象类型添加菜单项的元框。当过滤器运行时，add_meta_box 注册了自定义元框。
定义一个回调函数
接下来，我们可以定义一个回调函数来产生元框的HTML内容：
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
全局变量记住了当前的菜单ID，而 $walker 存储了 Walker_Nav_Menu_Checklist 对象的一个新实例。这将建立菜单项的HTML列表。
从这里，我们必须确定自定义元框中的活动标签。要做到这一点，我们设置 $current_tab 的值，在前面代码块中设置的省略号内工作。
我们在这里使用两个标签，但你可以根据你的需要添加更多的标签：
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
The following line will get all users with write privileges and add many properties to the $authors object:
下面一行将获得所有具有写权限的用户，并向 $authors 对象添加许多属性：
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
这里，get_users 返回一个由指定参数选择的 $user 对象的数组。 who参数将强制WordPress查询数据库中具有写作权限的用户。
另外， $admins 数组将存储一个作者数组，而 $removed_args 将存储一个要删除的查询变量的列表。
现在你可以打印元框的标记了。要做到这一点，让我们建立标签和链接。
<div id="authorarchive" class="categorydiv"> <ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs"> <li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>> <a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all"> <?php _e( 'View All' ); ?> </a> </li> <li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>> <a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins"> <?php _e( 'Admins' ); ?> </a> </li> </ul>
记住要给元框元素分配正确的类名、ID和数据属性；否则，菜单就不能按预期工作。
add_query_arg 和 remove_query_arg 函数都是为 authorarchive-tabs 变量设置特定的标签值，并删除不必要的变量。
在这一点上，我们有一个定义了标签的元组框：
作者元框内未填入的标签
我们的下一步是建立标签的HTML内容。
为Meta Box标签建立HTML内容
您需要在 custom_menu_meta_box() 函数中遵循上一节中的代码。要构建内容，请在上一节中编写的 <div> 标记中使用以下内容：
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
简而言之，每个标签都包含一个复选框的列表。walk_nav_menu_tree()函数使用三个参数来打印这个列表。 $items, $depth, 和 $r – 都是必须的。
$items 数组存储了一个管理用户的数组。 array_map() 函数将wp_setup_nav_menu_item()函数应用于 $admins，并为数组元素添加菜单项属性。
用户列表添加至作者meta框
到这里，我们可以完成最后的步骤。
添加一个提交按钮
自定义元框的大部分内容已经完成，尽管我们仍然需要添加一个提交按钮和一个处理 “旋转 “图标。
这里有一段简短的代码，你可以直接放在前面的区块之后：
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
在WordPress内完成的作者元框
有了这些知识，你可以为你的菜单添加几乎所有的功能！请注意，GitHub上也有一个公开的插件Gist，可以免费下载。
小结
WordPress菜单是你网站的一个重要方面。正因为如此，该平台提供了一个原生的、强大的面板，可以让你定制你网站上的每个菜单。然而，它不会默认提供你所需要的一切。
几个屏幕选项可以帮助你添加CSS标签和更多。此外，安装一个插件将让你把你的本地菜单变成巨型菜单，并使用增强的功能，使你的菜单更具响应性（以及其他方面）。编码也是一种可能性，虽然这对一个编码新手来说是一项具有挑战性的任务，但你可以在一个下午的时间里把它放在一起。
你想定制你的WordPress菜单吗，如果是的话，你打算用什么方法？请在下面的评论区分享你的想法和意见。
评论留言