WordPress教程

自定义导航菜单walker类显示菜单描述

也想出现在这里?联系我们
创客云

有时在我们制作 WordPress 主题的时候,可能对导航菜单会有一些特殊要求,比如下图中的下拉菜单中显示菜单的描述:
自定义导航菜单walker类显示菜单描述-云模板
要实现这个效果我们就需要自定义导航菜单的 walker 类来实现,其实这个在网上已经有相关的代码,但是直接使用你会发现会有错误提示,针对这个问题,我们做了相关的调整,确保了代码的正常使用以及不会报错。

首先,您需要将下面这个导航的自定义 Walker 类放到您的主题 functions.php 中,

也想出现在这里?联系我们
创客主机
  1. /**
  2.  * 添加输出菜单描述的 Walker 类
  3.  */
  4. class description_walker extends Walker_Nav_Menu
  5. {
  6. 	function start_el(&$output, $item, $depth = 0, $args = NULL, $id = 0)
  7. 	{
  8. 		global $wp_query;
  9. 		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
  10.  
  11. 		$class_names = $value = '';
  12.  
  13. 		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
  14.  
  15. 		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
  16. 		$class_names = ' class="'. esc_attr( $class_names ) . '"';
  17.  
  18. 		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
  19.  
  20. 		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
  21. 		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
  22. 		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
  23. 		$attributes .= ! empty( $item->url )        ? ' href="'%20%20%20.%20esc_attr(%20$item->url%20%20%20%20%20%20%20%20)%20.'"' : '';
  24.  
  25. 		$description  = ! empty( $item->description ) ? '</br><p>'.esc_attr( $item->description ).'</p>' : '';
  26.  
  27. 		$item_output = $args->before;
  28. 		$item_output .= '<a class=custom_hover_color'. $attributes .'>';
  29. 		$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
  30. 		$item_output .= $description.$args->link_after;
  31. 		$item_output .= '</a>';
  32. 		$item_output .= $args->after;
  33.  
  34. 		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  35. 	}
  36. }

然后,需要在外观-菜单页面-右上角显示选项中,勾选内容描述
自定义导航菜单walker类显示菜单描述-云模板
然后就是在您需要显示菜单描述的菜单内容描述中填写上对应的内容即可。

自定义导航菜单walker类显示菜单描述-云模板

展开图像


最后就是在你调用菜单的时候增加一个 walker 指定的一个参数

  1. <?php wp_nav_menu(array("theme_location"=>"main-nav","container_class"=>"mainmenubox","menu_class"=>"mainnav",'depth'=> 2,'walker' => new description_walker()));?>

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件