让代码更简单

WordPress获取导航菜单函数wp_nav_menu高级用法

重要:本文最后更新于2018-12-07 09:07:08,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

wp_nav_menu在WordPress几乎是必不可少的函数,它能很方便的帮我们输出用户在WordPress后台添加的导航菜单。为了适应各种各样的场合,WordPress官方也为这个函数配置了非常多的参数,虽然wp_nav_menu函数的功能已经非常强大了,但基础用法有时还是不够我们用的,如果有不了解基础用法的朋友,请先看这篇基础用法 WordPress调用自定义导航菜单函数wp_nav_menu详解,再看本文深入了解下它的高级用法,让你更加随意的定制导航栏。

walker参数详解

wp_nav_menu函数的高级用法主要在它的最后一个参数上,或许是它的设计师觉得它还不够强大,所以留下了让大家自己DIY的空间。Walker这个参数官方说明上说是自定义的遍历对象,调用一个对象定义显示导航菜单。那么如何自定义遍历对象呢?这里就需要PHP面向对象编程了,我们需要先实现一个类,这个类名可以随便写。它需要继承Walker_Nav_Menu这个父类,下面是我在网上找到的一份简单点的可用代码,大家可以参考下。

复制
/**
* Header_Menu_Walker类
* 这类名当然你随意了
*/
class Header_Menu_Walker extends Walker_Nav_Menu {

/**
* start_lvl函数
* 这函数主要处理ul,如果ul有一些特殊的样式,修改这里
* 他这里面的$depth就是层级,一级二级三级
* $args是上面wp_nav_menu()函数定义的那个数组
*
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进
$display_depth = ( $depth + 1); // 层级默认是0级,这里+1为了从1开始算
$classes = array(
'样式', //ul是个子菜单的时候,添加这个样式
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ), //子菜单奇数加样式menu-odd,偶数加样式menu-even
( $display_depth =1 ? '' : '样式' ), //三级菜单的时候,添加这个样式
//这样式主要能看出当前菜单的层级,menu-depth-2是二级呗
);
$class_names = implode( ' ', $classes ); //用空格分割多个样式名



$output .= "\n" . $indent . '<div class="sub-menu"><ul>' . "\n"; //把刚才定义的,那么多的样式,写到ul里面
}

/**
* start_el函数
* 主要处理li和里面的a
* $depth和$args同上
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
* @param int $id Current item ID.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进

// 定义li的样式
$depth_classes = array(
( $depth == 0 ? '' : '' ), //一级的li,就main-menu-item,其余全部sub-menu-item
( $depth >=2 ? 'sub-sub-menu-item' : '' ), //三级的li,添加这个样式
( $depth % 2 ? '' : '' ), //奇数加样式menu-item-odd,偶数加样式menu-item-even
'menu-item-depth-' . $depth, //层级同上
);
$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); //这句我没看懂,不知道是在干啥
$zcdnav="menu-item-has-children";//这里我的需求是找到WordPress自动生成的子菜单,然后替换成我自己的子菜单样式
$pos2 = strpos($class_names, $zcdnav);

if($pos2 !== false){

// 把样式合成到li里面
$output .= $indent . '<li class="has-sub-menu">'; 
}else{
// 把样式合成到li里面
$output .= $indent . '<li>';
}



// 处理a的属性
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$attributes .= '';

//添加a的样式
$item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
$args->before,
$attributes,
$args->link_before,
apply_filters( 'the_title', $item->title, $item->ID ),
$args->link_after,
$args->after
);
//上面这个item_output我要说一下。这里写的有点死。
//如果一级菜单是<a><span>我是菜单</span></a>
//然而其他级菜单是<a><strong>我是菜单</strong></a>
//这样的情况,$args->link_before是固定值就不行了,要自行判断
//$link_before = $depth == 0 ? '<span>' : '<strong>';
//$link_after = $depth == 0 ? '</span>' : '</strong>';
//类似这个意思。
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
?>

目前网络上关于Walker的用法比较少,正常的情况下,wp_nav_menu的简单用法已经足够了,需要高级用法的一般都是仿站。看了这篇文章如果你是仿站的话,我想你应该会从css样式上着手修改,而不是从WordPress身上修改,毕竟WordPress的内容太多了,不像css那样简单。

WordPress获取导航菜单函数wp_nav_menu高级用法

WordPress获取导航菜单函数wp_nav_menu高级用法

至于效果的话,看了代码狗博客导航栏,就知道效果了,是不是class少了很多呢?

感觉很棒!可以赞赏支持我哟~

4 打赏

评论 (0)

登录后评论
QQ咨询 邮件咨询 狗哥推荐