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

Question

我已将 wp_nav_menu() 用于我的自定义 WP 站点，该站点具有自定义 Walker 功能，该功能运行良好并为我提供以下输出：

    <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 本身的文档中所述，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";
    }
}