walker教程

wp的walker class有一大堆的methods和functions属性。这里只讲最主要的markup。自定义的walker就是重写wp_nav_menu带的walker class,所以所有变量都是继承自wp自带的walker.

当我们用到wp_nav_menu() 函数,通常会生成如下markup的html:

<div class="menu-container">
		<ul>
			<li>
				<a href="">link</a>
<span>icon</span>
			</li>
			<li>
				<a href="">link1</a>
			</li>
			<li>
				<a href="">link2</a>
			</li>
			<li>
				<a href="">link3</a>
			</li>
		</ul>
	</div>

<ul>是walker的start_lvl() 级函数,来管理<ul>标签,<li><a><span>标签,是start_el()级函数管理输出。所有start级的函数管理的都是开始的标签。</span></a></li>关闭式标签的管理函数是end_el();</ul>的管理函数是end_lvl(); 所以使用wp_nav_menu函数的时候主要会生成上面几个主要的函数来管理Html标记。利用这些函数来自定义html标记。

首先我们创建walker的class文件。命名为(随便你自定义):class_blt_nav_walker.php;

然后在functions.php 里面require进来。

require get_template_directory() . ‘/inc/class_blt_nav_walker.php’;如果网站没有任何报错,我们就开始创建class的主体。

第一步我们先创建class框架:

class Bl_Walker_Class extends Walker_Nav_Menu {}

然后我们创建几个主要class的方法(method)函数;

class Bl_Walker_Class extends Walker_Nav_Menu {

	function start_lvl(&$output,$depth=0,$args=NULL) {
 // ul

	}



	function start_el(&$output,$item,$depth=0,$args=array(),$id=0) {
 // li a span

	}

	function end_el() {
 // close li a span


	}

	function end_lvl() {
 // close ul
		
	}
}

end_el() 函数、end_lvl() 函数是标签关闭函数,基本上都是默认的,如果想在标签关闭前添加自定义html标记要用到,比方说要在li标签关闭前添加b标签来新增符号输出就要用到end_el() 函数来自定义。这里我们讲基础概念上的进阶walker的写法。更高级的写法下次再深入,所以这里不写end_el() 函数和end_lvl()函数。

Start_lvl()

start_lvl() method函数自带三个已经定义的变量可以使用,即$output,$depth,$args变量。string $output, int $depth, array $args = array().

$output

(string) (Required) Used to append additional content (passed by reference). $output变量是通过引用传递的,因此,在以下方法中对变量所做的任何更改都将被自动处理。(no return, echo, or print needed).Wordpress maintain all the information all the array that are inside this $output variable,如果没有这个&号,$output变量将会重写。

$depth

(int) (Required) Depth of the item.二级菜单的时候$depth = 0 ,三级的菜单的时候$depth = 1 ;以此类推 .当你后台设置菜单的层级,$depth 自动检测,

$args

(array) (Optional) An array of additional arguments.

Default value: array()

start_lvl()此方法是抽象的,应根据需要在子类中显式定义。是用在子级上,这意味着$output不会影响整个导航的初始的外包盒子,只会影响子级的子级列表。

现在我们可以定义classes或者variables.

$indent = str_repeat(“\t”,$depth); //$depth 变量会识别出有多少level; 可以自行百度str_repeat()php函数。会生成带空格的结构。\t是tab在正则里。

我们要在li下面添加ul的子菜单,并设置ul菜单的class为drop-down-menu而不是wordpress默认的submenu.因为当我们不用walker的时候,wp_nav_menu自带的子级菜单ul的class是sub-menu.

$depth变量检测所有的缩进,也就是代码的下一层。

function start_lvl(&$output,$depth = 0,$args = NULL) {  //$depth变量是你在后台设置多少级导航时候 生成的 ,比方说你设置了 二级菜单,$depth就是0, 三级菜单的时候$depth 就是1 .  $depth检测所有缩进
		$indent = str_repeat("\t",$depth); //$depth 变量会识别出有多少level; 可以自行百度str_repeat()php函数。会生成带空格的结构。\t是tab在正则里。
		$submenu = ($depth > 0 ) ? ' sub-menu' : ''; //$depth 检测所有的缩进也就是代码的下一层。  detect when this new level of submenu starts,when submenu ul is generated . 如果菜单大过二级, 在子级的子级ul添加 sub-menu 样式,如果只是二级菜单就为空。 
		$output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n"; // \n是 escape里的换行,所有斜杠都代表escape,来避免多个双引号php不知道在哪里结束。 这里是用 在子级上 
	}

start_el() 函数:

start_el() 函数是改写 li a span 等在ul里面的项目的html标记的,开始元素的输出。

Share :