WordPress导航菜单输出标题描述属性

今天制作MT主题,想显示导航菜单的描述,于是就进行了大量的研究,终于找到了解决方案,演示请围观mt.mu,实现过程如下:

一般默认的菜单输出结构为:


而MT.MU的菜单我想这样显示:


先到自定义菜单里设置菜单的属性:

自定义walker类输出结构:

class description_walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
        $class_names = $value = '';
 
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
 
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
 
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
 
        $output .= $indent . '
  • '; $prepend = ''; $append = ''; $description = ! empty( $item->attr_title ) ? '' . esc_attr( $item->attr_title ) . '' : ''; if($depth != 0) { $description = $append = $prepend = ""; $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 ) .'"' : ''; $item_output = $args->before; $item_output .= ''; $item_output .= $args->link_before . $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append; $item_output .= $description . $args->link_after; $item_output .= ''; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
  • 那么这个类做了什么呢?这个类在WordPress默认的walker代码(位于wp-includes/nav-menu-template.php)基础上添加了几行代码。现在这个walker会检测是否是顶级菜单,如果是就会输出带有属性描述的菜单结构。

    添加回调函数:

    现在我们创建了一个自定义的walker类,我们还要做的就是告诉WordPress去使用我们的walker替代默认的。这步非常简单,只要为 wp_nav_menu() 添加walker参数即可:

    < ?php wp_nav_menu( array('walker' => new description_walker())); ?>
    

    样式表需要自己写哦。文章翻译自:http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

    思章老师

    认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

    相关日志

    1. 没有图片

      2009.08.26

      UCenter Home 2.0 正式版 道具使用说明

      UCenter Home 2.0 正式版 发…

    2. 2013.04.10

      WordPress 3.6 Beta1 发布

      对没错!WordPress 3.6 Beta…

    3. 2011.04.03

      WordPress自适应宽度主题 LSZ wpbus D2 完美版

      WordPress自适应宽度主题D2完美版的…

    4. 没有图片

      2011.03.24

      三款非插件WordPress回复自动发邮件代码

      博客搬家并启用新主题,今天就启用回复自动发邮…

    5. 没有图片

      2009.09.04

      Flickr Uploadr 在免费的相册空间Flickr 上分享你的照片软件

      在 Flickr.com 上上传 將你的相片…

    6. 没有图片

      2010.05.12

      WordPress评论统计的一大Bug

      WordPress目前来看已经很完善了,但菠…

    评论

    1. 虫子卟会飞 2012.10.13 3:38下午

      想问一下把那个 标题属性 怎么调用到 网页的title里边去,如果知道麻烦告诉我下,小弟感激不尽。

    2. 浮云站 2011.11.10 2:17上午

      做网站就是费时间…来看一下,睡觉啦~