欢迎来到元素模板ys720.com，本站提供专业的织梦模板，PBOOTCMS模板，网站模板，网站修改/网站仿站
当前位置：主页 > 程序教程 > wordpress教程 >
分类栏目
最新模板
wordpress教程

wordpress利用walker自定义菜单样式

(元素模板) / 2022-12-01 16:07
wordpress 使用 walker 自定义样式

首先加入一个php文件
方案一
/**
* 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里面
}
//ul结尾处理
function end_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
/**
* 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 );
}
}
?>
方案二修改子菜单的 ul
//前台调用  'walker' => new Header_Menu_Walker()
class Header_Menu_Walker extends Walker_Nav_Menu{	
// start_lvl函数主要处理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 . '<dl>' . "\n"; //把刚才定义的，那么多的样式，写到ul里面
}
 
//end_lvl ul结尾处理
function end_lvl(&$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</dl>";
}
 
 
 
}
方案三
//前台调用  'walker' => new Header_Menu_Walker()
class Header_Menu_Walker extends Walker_Nav_Menu{	
// start_lvl函数主要处理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 . '<dl>' . "\n"; //把刚才定义的，那么多的样式，写到ul里面
}
 
//end_lvl ul结尾处理
function end_lvl(&$output, $depth = 0, $args = array() ) {
			$output .= "$indent</dl>";	
 
}
 
 
/** start_el函数 主要处理li开始*/
 
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进
 
// 定义li的样式 一级菜单 li 二级菜单 dd
$depth_classes = array(
( $depth == 0 ? $output .= $indent . '<li>' : '' ), //一级的li，就main-menu-item，其余全部sub-menu-item
( $depth >=1 ? $output .= $indent . '<dd>' : '' ), //三级的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);
 
 
 
// 处理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 );
 
}
/** start_el函数 主要处理li结束*/
// $indent添加换行，让代码可读性更强，可不加
function end_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
	$indent = ( $depth > 0 ? str_repeat( "\n", $depth ) : '' ); 
	$depth_classes = array(
	( $depth == 0 ? $output .='</li>'.$indent : '' ), //一级的li，就main-menu-item，其余全部sub-menu-item
	( $depth >=1 ? $output .= '</dd>'.$indent : '' ), //三级的li，添加这个样式
	( $depth % 2 ? '' : '' ), //奇数加样式menu-item-odd,偶数加样式menu-item-even
	'menu-item-depth-' . $depth, //层级同上
	);
	
}
 
}

方案四处理菜单链接 a标签
//前台调用  'walker' => new Header_Menu_Walker()
class Header_Menu_Walker extends Walker_Nav_Menu{	
 
 
/** start_el函数 主要处理li开始*/
 
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进
 
$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 = $depth == 0 ? '<span>' : '<strong>',
$attributes,
$args->link_before,
apply_filters( 'the_title', $item->title, $item->ID ),
$args->link_after = $depth == 0 ? '</span>' : '</strong>',
$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 );
 
}
 
 
}

本文来源：wordpress利用walker自定义菜单样式

本文地址：https://www.ys720.com/jiaocheng/4306.html

版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载请注明本文地址!

  • 上一篇：WordPress 提示“此站点遇到了致命错误”如何解决
  • 下一篇：wordpress 调用指定栏目下面的子栏目 自定义div样式
    • 相关文章
    新手导航
    注册会员
    加入VIP
    免费模板
    付费模板
    VIP模板
    永久模板
    商业模板
    卖家导航
    申请卖家
    收费标准
    发布模板
    网站导航
    网站地图
    联系客服
    友链申请
    Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com