自定义Walker功能需要以特定方式为Wordpress中的wp_nav_menu进行自定义

Question

我已经使用wp_nav_menu（）为我的自定义WP网站使用自定义漫游功能，它工作正常并提供我以下输出：

    <div id="navbar" class="navbar-collapse">
        <ul class="nav">    
            <li class="dropdown"><a href="#" class="dropdown-toggle">HOME</a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="yamm-content">
                            <ul class="col-sm-12 list-unstyled">
                                <li><a href="#">MY Review Post 1</a></li>
                                <li><a href="#">My Test Post</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

但是现在我想在div class“yamm-content”中的ul class =“col-sm-12 list-unstyled”之后通过循环添加div类。所以输出将是：

<div id="navbar" class="navbar-collapse">
        <ul class="nav">    
            <li class="dropdown"><a href="#" class="dropdown-toggle">HOME</a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="yamm-content">
                            <ul class="col-sm-12 list-unstyled">
                                <li><a href="#">MY Review Post 1</a></li>
                                <li><a href="#">My Test Post</a></li>
                            </ul>
                            <!--------- NEW DIV WILL ADD HERE ----->
                            <div class="imgmenu">
                                <img src="$imageUrl" alt="" />
                                <div class="info">
                                    <h2>title text come here</h2>
                                    <a href="#">learn more</a>
                                </div>
                            </div>

                            <!-------- END NEW DIV------>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

请提供一些想法如何从我的自定义Walker功能中获取它。我只是尝试通过静态方式获取它，但在结束</UL>之后不知道如何放置它。有人请帮帮我..

class custom_menu_walker extends Walker_Nav_Menu {
private $curItem;

function start_lvl(&$output, $depth) {
    $thisItem = $this->curItem;

    $output .= '<ul class="sub-menu"><li>
                           <div class="yamm-content">';
            $output .= ( $depth == 0 && $thisItem->object == 'category' ) ? '<ul class="col-sm-4 list-unstyled">' : '<ul class="col-sm-12 list-unstyled">';


}

//end of the sub menu wrap
function end_lvl(&$output, $depth) {
        $output .= '</ul></div> </li></ul>';

}

    // add main/sub classes to li's and links
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
         $this->curItem = $item;

        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent


        // depth dependent classes
        $depth_classes = array(
            ( $depth == 0 ? 'dropdown' : '' ),
            (( $depth == 0 && $item->object == 'category' ) ? 'yamm-first' : ''),
            ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
            'menu-item-depth-' . $depth
        );
        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

        // passed classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // build html

        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

        // link attributes
        $attributes = ' class="menu-link ' . ( $depth == 0 ? 'dropdown-toggle' : '' ) . '"';


        $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
            $args->before,
            $attributes,
            $args->link_before,
            apply_filters( 'the_title', $item->title, $item->ID ),
            $args->link_after,
            $args->after
        );


        // build html
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }



    function end_el( &$output, $item, $depth = 0, $args = array(), $current_object_id = 0 ) {
        if ( $depth == 0 && $item->object == 'category' ) { 

            ?>
                    <div class="imgmenu">
                            <div class="info">
                                <h2>title text come here</h2>
                                <a href="#">learn more</a>
                            </div>
                      </div>
                <?php

        }
    }
}

Answer 1

Walker_Nav_Menu类中有四个函数，我们可以在我们的类中自定义，如WordPress本身的文档中所述，documentation link使用自定义类示例。

Here Excellent explanation on the walker class

1）第一个函数是start_lvl为每个级别启动调用，在您的代码中正确定义，并且ul包含div类yamm-content

2）为每个元素启动调用第二个函数start_el，它处理li和a标记的生成，这些标记也在代码中正确定义

3）第三个函数end_el被调用为结束元素，它处理核心类中的结束li标记，你在这里犯了错误它应该只是简单的函数作为核心（不需要覆盖它根本没有）

4）结束级别的第四个和最后一个函数为end_lvl，您需要应用代码在div添加新的<div class="imgmenu">，这在以下代码中完成：

class Test_Walker extends Walker_Nav_Menu {
    private $curItem;

    function start_lvl(&$output, $depth) {
        $thisItem = $this->curItem;

        $output .= '<ul class="sub-menu"><li>
                               <div class="yamm-content">';
                $output .= ( $depth == 0 && $thisItem->object == 'category' ) ? '<ul class="col-sm-4 list-unstyled">' : '<ul class="col-sm-12 list-unstyled">';


   }

    //end of the sub menu wrap
    function end_lvl(&$output, $depth) {
            $output .= '</ul>

            <!--------- NEW DIV WILL ADD HERE ----->
                                <div class="imgmenu">
                                    <img src="$imageUrl" alt="" />
                                    <div class="info">
                                        <h2>title text come here</h2>
                                        <a href="#">learn more</a>
                                    </div>
                                </div>

                                <!-------- END NEW DIV------>


            </div> </li></ul>';

    }

    // add main/sub classes to li's and links
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
         $this->curItem = $item;

        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent


        // depth dependent classes
        $depth_classes = array(
            ( $depth == 0 ? 'dropdown' : '' ),
            (( $depth == 0 && $item->object == 'category' ) ? 'yamm-first' : ''),
            ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
            'menu-item-depth-' . $depth
        );
        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

        // passed classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // build html

        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

        // link attributes
        $attributes = ' class="menu-link ' . ( $depth == 0 ? 'dropdown-toggle' : '' ) . '"';


        $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
            $args->before,
            $attributes,
            $args->link_before,
            apply_filters( 'the_title', $item->title, $item->ID ),
            $args->link_after,
            $args->after
        );


        // build html
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }



    /*function end_el( &$output, $item, $depth = 0, $args = array(), $current_object_id = 0 ) {
        if ( $depth == 0 && $item->object == 'category' ) { 

            ?>
                    <div class="imgmenu">
                            <div class="info">
                                <h2>title text come here</h2>
                                <a href="#">learn more</a>
                            </div>
                      </div>
                <?php

        }
    }*/
    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "</li>\n";
    }
}