尝试为WordPress导航创建自定义Walker类

问题描述

我是PHP的新手，正在努力使自己遍及Walker类。我需要使用以下标记结构创建一个导航。

<div class="learn">
    <div class="learn-header">
        <span><b>Learn A</b> (16-19)</span>
        <i class="fa fa-plus-circle"></i>
    </div>
    <div class="learn-content">
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
        <a href="#">D</a>
        <a href="#">E</a>
    </div>
</div>

<div class="learn">
    <div class="learn-header">
        <span><b>Learn B</b> (20-25)</span>
        <i class="fa fa-plus-circle"></i>
    </div>
    <div class="learn-content">
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
        <a href="#">D</a>
        <a href="#">E</a>
    </div>
</div>

经过大量研究和尝试，我做了以下工作： 在我的导航模板中，我有以下内容

<div id="learn">
    <div id="learn--wrapper">
        <?php
        wp_nav_menu(
            array(
                'theme_location' => 'Learn','container' => false,'items_wrap' => '%3$s','walker' => new learn_nav_Walker(),)
        );
        ?>
    </div>
</div>

然后在我的函数文件中，我有以下walker类：​​

class learn_nav_Walker extends Walker {
    var $tree_type = array( 'post_type','taxonomy','custom' );
    var $db_fields = array( 'parent' => 'menu_item_parent','id' => 'db_id' );
    function start_lvl(&$output,$depth) {
        $indent = str_repeat("\t",$depth);
        $output .= "\n$indent<div class=\"learn-content\">\n";
    }

    function end_lvl(&$output,$depth);
        $output .= "$indent</div>\n";
    }

    function start_el(&$output,$item,$depth,$args) {
        global $wp_query;

        if ( $args->walker->has_children && 0 === $depth ) {
            $output .= $indent . '<div class="learn">';
        }

        $indent = ( $depth ) ? str_repeat( "\t",$depth ) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes = in_array( 'current-menu-item',$classes ) ? array( 'current-menu-item' ) : array();
        $class_names = join( ' ',apply_filters( 'nav_menu_css_class',array_filter( $classes ),$args ) );
        $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id = apply_filters( 'nav_menu_item_id','',$args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        if ( $args->walker->has_children && 0 === $depth ) {
            $output .= $indent . '<div class="learn-header"' . $id . $value . $class_names .'>';
        }

        $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;

        if ( $args->walker->has_children && 0 === $depth ) {
            $item_output .= '<span>';
        } else {
            $item_output .= '<a class="nav-link" ' . $attributes . '>';
        }

        $item_output .= $args->link_before . apply_filters( 'the_title',$item->title,$item->ID ) . $args->link_after;

        if ( $args->walker->has_children && 0 === $depth ) {
            $item_output .= '</span>';
            $item_output .= '<i class="fa fa-plus-circle"></i>';
        } else {
            $item_output .= '</a>';
        }

        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el',$item_output,$args );
    }

    function end_el(&$output,$args) {
         $output .= "</div>\n";
    }
}

但是，我得到的输出未正确嵌套，因此我不知道如何解决该问题。 问题是顶级菜单项位于带有类学习标题的div中。该div应该只包装顶级菜单项。目前，它还将子菜单项包装在learn-content div中。

<div id="learn">
    <div id="learn--wrapper">
        <div class="learn">
            <div class="learn-header" class="current-menu-item">
                <span>Learn A</span><i class="fa fa-plus-circle"></i>
                <div class="learn-content">
                    <a class="nav-link" href="#"">A</a>
                </div>
            </div>
        </div>
        <div class="learn">
            <div class="learn-header">
                <span>Learn B</span><i class="fa fa-plus-circle"></i>
                <div class="learn-content">
                    <a class="nav-link" href="#">A</a> 
                </div>
            </div>
        </div>
    </div>
</div>

任何帮助都将不胜感激，因为我已经三天时间试图解决此问题！反正我没剩多少头发了！

非常感谢：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）