自定义沃克功能需要以特定的方式自定义 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 类"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 本身的文档中所述，带有自定义类示例的文档链接。

这里 关于助行器类的精彩解释

1）start_lvl为每个级别启动调用第一个函数，该函数在您的代码中正确定义，并且您已经用div类包装了ul 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";
    }
}