wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML

WordPress 中有一个导航菜单函数wp_nav_menu,通过这个函数可以控制菜单输出的HTML 结构,一般开发者用这个函数的一般是在输出HTML 中自定义一些id 或者class 而已,整体的HTML 结构还是WordPress 默认的。项目的需求是各种各样的,了解如何自定义导航菜单HTML 结构就十分重要了。

囿于篇幅,本文不会教你怎么使用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 类自定义输出。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏五毛程序员

ActionBar开启Overlay Mode(覆盖模式)

38950
来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

40370
来自专栏向治洪

ios开发之xcode环境介绍

作为一个刚入门ios开发的人来说,对于ios开发,对于xcode一切都是那么的陌生,那么我们如何开始我们的第一步呢?首先对开发的ide是必须要了解的,其实要对开...

29660
来自专栏Python爬虫与数据挖掘

如何利用CSS选择器抓取京东网商品信息

前几天小编分别利用Python正则表达式、BeautifulSoup选择器、Xpath选择器分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如...

15940
来自专栏静晴轩

Android Studio快捷键

最常用快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...

37270
来自专栏圣杰的专栏

Asp.net mvc 知多少(四)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

24090
来自专栏前端说吧

js - 预加载+监听图片资源加载制作进度条

这两天遇到一个新需求:一个一镜到底的h5动画。因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。

1K10
来自专栏前端儿

前端神器之Sublime Text2/3简单明了使用总结

第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~)。一般IDE比如WebStorm(它也是一款神器来着),Aptan...

14120
来自专栏编程微刊

border-radius属性失效问题的解决办法

今天调试项目的时候突然发现,设置的border-radius竟然失效了,打开f12,眼看着浏览器把这个属性也给划掉了,不是一般的郁闷,按照道理来说,不应该会出现...

40130
来自专栏老马寒门IT

jQuery EasyUI 详解

easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。

66210

扫码关注云+社区

领取腾讯云代金券