Question

任何人都知道如何为wp_nav_menu编写一个自定义walker函数......

1）仅显示父项的项目描述。

2）将父项目（标题，链接和描述）包含在它自己的div 中如果它有孩子的话。

（我已将div和ul简化为没有课程）

<div>
  <ul>

    <!-- Parent With Children -->
    <li class="has_children">
      <div class="first-level">
        <a>Parent Item</a>
        <span class="desc">Description</span>
      </div>
        <ul class="sub-menu level-0">
          <li class="odd"><a>Child Item</a></li>
          <li class="even NO HAS_CHILDREN"><a>Child Item</a>
            <ul class="sub-menu level-1">
               <li class="odd"><a>Child Item</a></li>
            </ul>
          </li>
          <li class="odd"><a>Child Item</a></li>
          <li class="even"><a>Child Item</a></li>
          <li class="odd"><a>Child Item</a></li>
        </ul>
    </li>

    <!-- Parent Without Children -->
    <li>
     <div class="first-level">
      <a>Parent Item</a>
      <span class="desc">Description</span>
     </div>
    </li>

  </ul>
</div>

^^所有上述类和ID应该 IN ADDITION 到已经在wp_nav_menu中的那些

Answer 1

这基于this question和this question

    class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @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. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
     function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
{
    $id_field = $this->db_fields['id'];
    if ( is_object( $args[0] ) ) {
        $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
    }
    return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl( &$output, $depth ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth); // because it counts the first submenu as 0
    $classes = array('sub-menu','level-' . $display_depth);
    $class_names = implode( ' ', $classes );

    // build html
    $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}
    function start_el(&$output, $item, $depth, $args)
    {

        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        if ($args->has_children && $depth == 0){
        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . ' has_children"';
        }else{
         ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';  
        }

        $output .= "<li id='menu-item-$item->ID' $class_names>" ;
        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<span class="desc">' . esc_attr( $item->description ) . '</span>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );
if ( $depth == 0 ) {//top level items
            $item_output = $args->before
            ."<div class='first-level'>"
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a>'
            . $args->link_after
            . $description
            . '</div>'
            . $args->after;
        }else{//everything else
        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $args->after;
        }
        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }

}

然后用walker

调用它

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

WP Menu walker函数显示父级描述并在自己的div中包装父级

1 个答案: