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. 没有图片

      2011.04.17

      WordPress 评论分页方法

      今天发现我的博客评论算是挺多,如果一页来显示…

    2. 没有图片

      2009.09.09

      关于Google Checkout

      今天打开一个英文站 Mylife ,在浏览这…

    3. 没有图片

      2010.04.16

      Supesite 内容的“上一篇”、“下一篇”添加标题

      打开模板文件下的news_view.html…

    4. 没有图片

      2013.04.21

      不同型号台式机&笔记本BIOS设置硬盘接口教程

      有时装系统或其他操作,需要把电脑的硬盘接口模…

    5. 没有图片

      2013.11.19

      WordPress个性轻博客主题 XiaoXiao 发布

      很早就发布过轻博客主题 Cimple,深受大…

    6. 没有图片

      2009.07.06

      乌鲁木齐发生打砸抢烧严重暴力犯罪事件+视频

      7月6日凌晨,在乌鲁木齐市大湾南路的跑马场地…

    评论

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

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

    2. 浮云站 2011.11.10 2:17上午

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

    3. littlebearz 2011.11.09 10:11下午

      改strong什么的不可以直接改里面的CSS? 比你在改Template里面的php快多了

      • 落花生 2011.11.10 11:56上午

        是的,我只是想在这里表达一下嘛,这样就不用提供CSS样式代码了。

    4. 家桥 2011.11.09 1:28下午

      我都是用别人的主题。。。不会也不想去弄这些。。。

    5. Neomiy 2011.11.08 9:15下午

      哇~~不错哦~~学习了~~~~

    About

    马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!