使用自定义walker将奇数类添加到'子菜单'ul'中的奇数li

时间:2013-08-21 09:57:38

标签: wordpress function navigation submenu

我目前在WordPress中使用自定义助手为我的WP菜单,但我只需要1个最终修改。我需要知道如何...

在所有'子菜单'ul中为所有奇数li提供'奇数'类。 所以这是父母之后的第一个“子菜单”,以及其中的所有“子菜单”。

这是我目前正在使用的自定义助行器,如果你可以编辑它就太棒了!

class Menu_With_Description extends Walker_Nav_Menu
{

    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu level-".$depth."\">\n";
    }
    function end_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent<div class=\"fix\"></div></ul><div class=\"fix\"></div>\n";
    }

/**
 * 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_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="description">' . 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='parent'><div class='cat-icon'></div><div class='title-desc'>"
        . "<a $attributes>"
        . $args->link_before
        . $title
        . '</a><br>'
        . $args->link_after
        . $description
        . '</div></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
    );
}

}

1 个答案:

答案 0 :(得分:1)

这是我对你的问题的快速解决方案(但也许有人会发现更简单的问题):

  1. 为walker类定义protected / private变量。这是一个在每个深度级别上都有当前项目计数器的数组。因为在0级的第一项之前没有调用start_lvl方法,所以必须用0值填充数组的0索引。

    protected $_itemsNoByDepth = array( 0 => 0 );
    
  2. 当你开始下一个级别时,你必须在start_lvl方法中将级别计数器设置为0。因为第一个子级别的$深度值为0,所以您将此值加1。

    $this->_itemsNoByDepth[$depth+1] = 0;
    
  3. 最后,您必须在每次出现start_el方法时迭代正确的计数器。之后,您可以使用此计数器将所需的类添加为新的$ classes数组索引。在你的情况下,它将是:

    $this->_itemsNoByDepth[$depth]++;
    if( $depth > 0 && $this->_itemsNoByDepth[$depth] % 2 ) {
     $classes[] = 'odd';
    }
    

    但如果您想添加例如。奇数/偶数类和具有连续项目编号的类,你可以这样做:

    $this->_itemsNoByDepth[$depth]++;
    $classes[] = 'item-no-' . $this->_itemsNoByDepth[$depth];
    $classes[] = 'item-' . ( $this->_itemsNoByDepth[$depth] % 2 ? 'odd' : 'even' );
    

    请记住将上面的代码放在$ classes和$ class_names变量声明之间。

  4. 完成这三个步骤后,您的代码应如下所示:

    class Menu_With_Description extends Walker_Nav_Menu
    {
    
        protected $_itemsNoByDepth = array( 0 => 0 );
    
        function start_lvl(&$output, $depth) {
            $this->_itemsNoByDepth[$depth+1] = 0;
            $indent = str_repeat("\t", $depth);
            $output .= "\n$indent<ul class=\"sub-menu level-".$depth."\">\n";
        }
        function end_lvl(&$output, $depth) {
            $indent = str_repeat("\t", $depth);
            $output .= "$indent<div class=\"fix\"></div></ul><div class=\"fix\"></div>\n";
        }
    
    /**
     * 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_el(&$output, $item, $depth, $args)
    {
    
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;
    
        $this->_itemsNoByDepth[$depth]++;
        if( $depth > 0 && $this->_itemsNoByDepth[$depth] % 2 ) {
            $classes[] = 'odd';
        }
    
        $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="description">' . 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='parent'><div class='cat-icon'></div><div class='title-desc'>"
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a><br>'
            . $args->link_after
            . $description
            . '</div></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
        );
    }
    
    }