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. 2014.02.24

      响应式jQuery幻灯片 – ResponsiveSlides.js

      ResponsiveSlides.js是一个…

    2. 没有图片

      2010.02.05

      设计师必备的网页素材在线生成器

      背景生成器 我们都知道,背景设置在设计中起着…

    3. 没有图片

      2010.05.22

      UCenter info: MySQL Query Error 解决办法之一

      康盛创想的软件越来越庞大,所以出现问题也是正…

    4. 没有图片

      2009.10.17

      推荐三款我正在使用的WordPress优化插件

      本文应该算是写给新博主,如果你是才建博客,应…

    5. 没有图片

      2010.06.24

      FireFox 3.6.4 正式版发布

      Firefox 3.6.3已经很久没升级了,…

    6. 没有图片

      2010.04.28

      Supesite 7.5 自定义信息无法删除的终极解决办法

      用Supesite 7.5 做站,肯定会用到…

    评论

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

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

    2. 浮云站 2011.11.10 2:17上午

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