0

0

解析功能:wp_nav_menu的考察

WBOY

WBOY

发布时间:2023-09-02 21:33:07

|

1416人浏览过

|

来源于php中文网

原创

当 WordPress 3 向我们提供新的菜单功能时,它永远改变了我们查看导航菜单的方式。我们不再必须使用普通的页面列表功能或构建我们自己的自定义菜单功能来集成类别和页面菜单以及导航菜单中的外部或硬链接项目。但我们可以如何利用这个新功能进行定制呢?在本教程中,我们将深入探讨 wp_nav_menu 函数可以执行的所有操作,使用 Walker 类添加子描述,并触及其一些相关函数。


参数

该函数有多个参数可供使用。以下是 wordpress.org codex 中列出的默认值:

 ,
	'menu'            => ,
	'container'       => 'div',
	'container_class' => 'menu-{menu slug}-container',
	'container_id'    => ,
	'menu_class'      => 'menu',
	'menu_id'         => ,
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => ,
	'after'           => ,
	'link_before'     => ,
	'link_after'      => ,
	'items_wrap'      => '%3$s',
	'depth'           => 0,
	'walker'          =>
);
?>


主题位置

使用此参数,我们可以设置主题位置,然后在“菜单”页面上使用该位置来设置在主题的该部分中工作的菜单,而无需手动定义应在此处显示的菜单。这对于主题分发者非常有帮助,因为仅当用户为该位置定义了菜单时,您才能使用条件来显示菜单。唯一的其他要求是您使用函数 register_nav_menu() 来注册这些位置。当您设置菜单支持时,这通常是通过函数文件完成的。

让我们开始构建自定义菜单功能参数,假设我们已经注册了一个名为“primary”的主题位置。

$params = array(
	'theme_location' => 'primary'
);

菜单

此参数用于手动定义应使用哪个菜单。在我们的示例中,我们仅设置一个通用菜单位置,而不是定义要使用的确切菜单位置,但如果我们想要告诉函数使用名为“主导航”的菜单,我们的参数将如下所示:

$params = array(
	'theme_location' => 'primary',
	'menu' => 'Primary Navigation'
);

容器

默认情况下,我们的菜单将包含在 div 中,但如果您像我一样,通常不需要这个,并且可能希望减少 divs 和其他标签的使用量尽可能保持代码整洁。您还可以使用此参数定义不同的标签,例如 html5

。对于我们的示例,我们不希望容器更改默认容器值,因为二十一主题样式依赖于它的存在。

容器类和容器ID

您几乎可以猜到,这些参数用于设置容器的类和 ID。由于我们完全忽略了这一点,因此我们不需要定义值。

菜单类和菜单 ID

这些工作方式与前面的参数类似,只是这次我们肯定要设置“nav”的 ID,因为这是我们将在样式表中用于设置导航栏样式的 ID。

$params = array(
	'theme_location' => 'primary',
	'container' => false,
	'menu_id' => 'nav'
);

回声

您可以使用此参数来决定是否要显示(回显)结果,或返回它以在 PHP 中使用。该项目是布尔值,因此要返回它,只需将此参数设置为 0。

后备CB

这是一个回调函数,如果没有找到菜单,您可以回退到该函数。默认情况下,它使用旧的支持 wp_page_menu() 并将所有相同的参数传递给该函数。

之前和之后

这些项目用于定义可以在锚标记之前和之后放置的内容 ()。您可以使用它们在每个项目之前添加一个竖线,或者将导航项目包装在 span 标记中。

链接之前和链接之后

它们的工作方式与我们之前介绍的项目相同,只是您定义的任何内容都将位于锚标记内。我们的示例不要求我们使用这些,因此我们将忽略它们并保留默认的空项目。

物品包裹

默认情况下,项目包含在带有菜单 ID 和菜单类的无序列表中。如果您愿意,您可以通过此参数进行更改。

深度

当您想要使用同一菜单两次但不希望任何子项显示在您使用 wp_nav_menu() 函数设置的位置时,此参数非常有用。例如,如果您希望主导航包含二级下拉菜单,您可以将其保留为默认设置。然后,如果您想在页脚导航中使用相同的父项并省略子项,您可以将此参数设置为深度 1。默认“0”表示将输出所有级别。为了使示例简洁,我们假设主导航不包含任何子项。

沃克

该参数用于定义一个walker对象,该对象可用于操纵整个函数如何工作并输出其信息。我们将在下一节中讨论一个很好的示例。


向导航菜单项添加说明

对于我们的示例,我们希望向每个主菜单项添加子描述。 WordPress 菜单系统中已经具备添加描述本身的功能。要打开此功能,请转到菜单,然后按右上角的屏幕选项选项卡。您需要确保单击的选项应为“描述”。选中此选项后,菜单项现在应如下所示:

方科网络ERP图文店
方科网络ERP图文店

方科网络ERP图文店II版为仿代码站独立研发的网络版ERP销售程序。本本版本为方科网络ERP图文店版的简化版,去除了部分不同用的功能,使得系统更加精炼实用。考虑到图文店的特殊情况,本系统并未制作出入库功能,而是将销售作为重头,使用本系统,可以有效解决大型图文店员工多,换班数量多,订单混杂不清的情况。下单、取件、结算分别记录操作人员,真正做到订单全程跟踪!无限用户级别,不同的用户级别可以设置不同的价

下载

解析功能:wp_nav_menu的考察

填写完描述后,我们需要创建 walker 类并将其添加到 wp_nav_menu() 参数中。我们将调用该类 description_navigation 因此我们完整的参数代码应如下所示:

$params = array(
	'theme_location' => 'primary',
	'menu_id' => 'nav',
	'walker' => new description_walker()
);
wp_nav_menu($params);

沃克级

现在我们准备使用 Walker 类添加这些描述:

class description_walker extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="'. esc_attr( $class_names ) . '"';

		$output .= $indent . '

这里发生了很多事情。有关 Walker 类的更多信息,请参阅另一个教程:了解 Walker 类。您在这里应该理解的最重要的部分是我们正在重建每个链接项的输出并添加描述。在上面代码片段的第 19 行,您可以看到我们在哪里获取项目描述(如果存在),并将其设置为包含在 span 标记中的 $description 的值,以便我们可以单独设置描述的样式。然后,在第 24-29 行中,我们将链接项重新组合在一起,在锚标记结束之前添加描述,以便它成为链接本身的一部分。

使用“二十一十一”主题,您现在应该拥有如下所示的内容:

解析功能:wp_nav_menu的考察

风格化

让我们添加一些样式以使其更清晰:

#nav a {
	line-height: 20px;
	padding: 10px 15px;
}

#nav a span {
	display: block;
	font-size: 11px;
	color: #ccc;
}

#nav a:hover span {
	color: #999;
}

这将更改每个链接的高度和填充,导致 span 标记内的描述下降到自己的行,并稍微调整字体大小和颜色以获得如下所示的最终结果:

解析功能:wp_nav_menu的考察


关系函数

您不仅可以使用 wp_nav_menu() 输出包含所有自定义内容的菜单,您还可以进一步使用其一些相关功能。

has_nav_menu()

此功能非常适合仅显示特定菜单(如果该菜单已分配给您的主题位置)。例如,您可能希望在主题上为用户可能不希望出现在主导航中的较少导航项创建顶部导航。这可能是主页链接、“与我们一起做广告”或其他较低级别的号召性用语。但作为主题分发者,如果您不知道这是否是用户想要使用的内容,只需使用如下条件:

if (has_nav_menu('top-menu')) {
	wp_nav_menu('theme_location='top-menu');
}

wp_get_nav_menu_items()

此函数将从特定菜单返回项目数组。如果您想在不使用 Walker 类的情况下构建自定义菜单列表,这可能特别有用。您会失去很多功能,例如菜单项的当前类,但这是循环遍历菜单项数组以获得简单解决方案的好方法。


结论

当您更多地了解内置参数提供的灵活性并能够通过 Walker Class 进行更好的控制时,您可以做很多事情来自定义导航菜单。需要为每个项目添加另一个带有“icon”类的span标签来自定义图标吗?没问题。

能够完全控制菜单的放置和输出,可以扩展您作为主题开发人员的能力,带来不可估量的可能性。您可以使用 Walker 类来做哪些事情?

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

16

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

136

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

7

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作
windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

6

2026.01.26

2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

122

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表
个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例,应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元,专项扣除 1000 元,专项附加扣除 2000 元,当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元,对应税率为 3%,速算扣除数为 0,则当月应纳税额为 2000×3% = 60 元。

35

2026.01.26

oppo云服务官网登录入口 oppo云服务登录手机版
oppo云服务官网登录入口 oppo云服务登录手机版

oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时,可以随时将这些存储在云端的数据快速恢复到手机中。

121

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 9.5万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.9万人学习

Django 教程
Django 教程

共28课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号