wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML
WordPress 中有一个导航菜单函数wp_nav_menu
,通过这个函数可以控制菜单输出的HTML 结构,一般开发者用这个函数的一般是在输出HTML 中自定义一些id 或者class 而已,整体的HTML 结构还是WordPress 默认的。项目的需求是各种各样的,了解如何自定义导航菜单HTML 结构就十分重要了。
wp_nav_menu 函数
囿于篇幅,本文不会教你怎么使用wp_nav_menu 函数,请自行补习。通过设置wp_nav_menu 的参数,前台输出的HTML 结构大概都是这样的(为了简洁,去除了一些id、class):
<nav> <div class=""> <ul id="" class=""> <li id="" class=""><a href="">首页</a></li> <li id="" class=""><a href="">存档</a></li> <ul class="sub-menu"> <li><a href="">WP开发</a></li> <li><a href="">WP开发</a></li> </ul> <li id="" class=""><a href="">学习</a></li> </ul> </div> </nav> |
---|
这个默认的菜单HTML 结构有非常大的限制(比如说我想在每个li前面添加个标签办不了,一些class的名称也定义不了),如果只这么用根本不能适应各种各样的项目需求,好在WordPress 提供了一个类Walker_Nav_Menu
,通过这个类我们可以自定义HTML 结构。
Walker_Nav_Menu 的用法(例子)
wp_nav_menu 函数中有个参数 $walker,“自定义的遍历对象,调用一个对象定义显示导航菜单。”,默认调用的是Walker_Nav_Menu (其实输出默认结构的就是这个在作怪,位于wp-includes/nav-menu-templates.php)。为了能够自定义HTML 结构,你必须打开wp-includes/nav-menu-templates.php,查看默认的代码,搞清楚与前端输出代码的关系,并在其基础上修改,然后自定义为新的一个类供wp_nav_menu
函数调用。
例子:
比如说WordPress 中输出二级菜单的话,ul 中类名默认是sub-menu
,那我想改为child-menu
,怎么办?
步骤:
打开wp-includes/nav-menu-templates.php,找到产生ul class="sub-menu"
的代码:
function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("t", $depth); $output .= "n$indent<ul class="sub-menu">n"; } |
---|
那么根据我的需求,代码应该改成是:
function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("t", $depth); $output .= "n$indent<ul class="child-menu">n"; } |
---|
准确来讲,整体的类的代码应该是(dw_walker这个类名是自己取的,请自行定义):
class dw_walker extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("t", $depth); $output .= "n$indent<ul class="child-menu">n"; } } |
---|
然后在wp_nav_menu 函数中调用这个自定义的类:
<?php wp_nav_menu( array( 'theme_location' => 'mobilemenu', 'walker' => new dw_walker(), 'fallback_cb' => '' ) ); ?> |
---|
上诉只是举了个简单的例子来告知Walker_Nav_Menu 类的使用,实际项目中肯定不单单那么简单的,这么来讲,除了基本的WordPress 知识、html+CSS,还需要一些PHP 知识。
更多例子的话,最近发布EaseMobile 主题在导航栏上的图标设置就是采用了Walker_Nav_Menu 类自定义输出。
- Golang 值得注意的地方
- MySQL数值类型在binlog中需要注意的细节(r12笔记第69天)
- WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法
- MySQL root用户登录的几个小问题(r12笔记第67天)
- Java实现生产者消费者的两种方式(r12笔记第66天)
- Golang语言的函数调用信息
- mysqldump的一点使用总结(r12笔记第81天)
- 转-Golang语言Interface漫谈
- WordPress导航菜单图标字体插件font awesome 4 menus纯代码版
- Oracle 12c远程克隆PDB的问题及修复(r12笔记第78天)
- Oracle表中含有255列以上时需要注意的(r12笔记第77天)
- Golang语言--资源自动回收技术
- Oracle 12.2中的一个参数说明(r12笔记第76天)
- Golang语言社区--【游戏服务器知识】多线程并发
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 双指针法:一样的道理,能解决四数之和
- 【python-opencv】轨迹栏作为调色板
- springBoot 线程池异步编程
- MPU6050姿态解算2-欧拉角&旋转矩阵
- 【python-opencv】图像的基本操作
- 3 分钟生成一个单元测试报告,这个样式爱了
- 拼多多的底层逻辑
- 详解ELF重定向原理
- 干货 | 携程基于Quasar协程的NIO实践
- 【python-opencv】图像上的算术运算
- 个人珍藏的80道多线程并发面试题(11-20答案解析)
- 【python-opencv】性能衡量和提升技术
- 【python-opencv】转换颜色空间
- 七夕,当然少不了纯CSS的点缀啦
- PHP中的垃圾回收相关函数