Có mở rộng nhiều Nav_Mothy_Walkers cho phép thực đơn lồng nhau không?

8

Về cơ bản, tôi đang cố gắng thêm nhiều menu điều hướng phụ và tôi khá gần nhưng dường như tôi không thể tìm ra cách giải quyết đúng đắn để giải quyết vấn đề của mình ...

Tôi đang sử dụng một biến thể của Menu CSS Stu Nichols ...

Mã giải thích tốt hơn ;-)

Mối quan hệ cần có để xây dựng thực đơn này sẽ có các yếu tố cấp cao nhất là danh sách vật phẩm, hộp chứa trẻ em là div và trẻ em và anh chị em {nth child} là uls ... Vì vậy, cấu trúc sẽ như sau ...

<li><a href='#'>parent</a>
    <div>child-container
    <ul><!--1st Child -->
        <li>item</li>
         ...
    </ul>
    <ul><!--Sibling -->
        <li>item</li>
         ...
    </ul>
    <ul><!--Sibling -->
        <li>item</li>
         ...
    </ul>
    </div> 
</li>

Dòng suy nghĩ hiện tại của tôi là thêm một nav_menu_walker bổ sung để xây dựng danh sách menu phụ ... Tuy nhiên, tôi không chắc mình có thể vượt qua nhiều người đi bộ như đối số với wp_nav_menu ... IE ... ASSERT

    $menu_params = array (

'theme_location'  => 'primary',
'menu'            => 'Main Menu', 
'container'       => 'div', 
'container_class' => 'nav', 
'container_id'    => FALSE,
'menu_class'      => FALSE, 
'menu_id'         => FALSE,
'echo'            => TRUE,
'fallback_cb'     => 'wp_page_menu',
'before'          => FALSE,
'after'           => FALSE,
'link_before'     => FALSE,
'link_after'      => FALSE,
'items_wrap'      => "\n\t" . '<ul>%3$s</ul>' . "\n",
'depth'           => 0,
'walker'          => new Top_Nav_Menu_Walker()
    <!-- Can I Add another Walker Here? -->
);

echo "\t\t<div id=\"navigation\">\n\t\t\t";

wp_nav_menu( $menu_params );

echo "\t\t</div>\n";

}

Để có được mối quan hệ cha mẹ -> bộ chứa con, tôi chỉ cần thêm div và ul vào hàm start_lvl ... Đây là nơi tôi gặp vấn đề khi xác định cách tôi có thể tạo nhiều anh chị em ...

function start_lvl( &$output, $depth = 0, $args = array()) {

    $indent = str_repeat("\t", $depth);     
    $output .=  "\n$indent<div>\n";
    $output .=  "\n$indent<ul>\n";
}

Để thêm các lớp vào các phần tử neo cấp cao nhất, tôi có một walker tùy chỉnh. Trong hàm start_el, tôi đã thêm các lớp cho các mục neo dựa trên lớp cha.

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    /* inject some anchor classes */

    if(  $this->$depth == 0) {
        if ( in_array( 'two', $item->classes ) || in_array( 'three', $item->classes )) {
            $item->class = 'oneCol fly';
        }
        if ( in_array( 'four', $item->classes )) {
            $item->class = 'twoCol fly';
        }
    };

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

  $output .= in_array( 'sub_nav_h4', $item->classes ) ? "\n" . $indent . "<h4>\n" : '';

    $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        ) .'"' : '';

    /*  This 'should' always be true as WP doesn't support anchor classes    */

    $attributes .= ! empty( $item->class    )       ?   ' class="'  . esc_attr( $item->class            ) . '"' : '';

    $item_output = $args->before;
    $item_output .= '<a' . $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

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

Đây là cấu trúc điều hướng tôi đang cố gắng để đạt được ...

<div id="navigation">
<div class="nav">
        <ul>
            <li class="noCol one"><a href="/">One</a>       </li>
            <li class="threeCol two"><a class="oneCol fly" href="/two/">Two</a> 
                <div>
                <ul>
                        <li><h4><a href="#url">Egestas Sed</a></h4></li>
                        <li><a href="#url">Consequat Leo</a></li>
                        <li><a href="#url">Lacinia &amp; Blandit</a></li>
                        <li><a href="#url">Interdum</a></li>
                        <li><h4><a href="#url">Pellentesque Velit</a></h4></li>
                        <li><a href="#url">Lacinia &amp; Blandit</a></li>
                        <li><a href="#url">Interdum</a></li>
                        <li><a href="#url">Donec non Fringilla</a></li>
                        <li><a href="#url">Fusce Ullamcorper</a></li>
                </ul>
                <ul>
                        <li><h4><a href="#url">Facilisis</a></h4></li>
                        <li><a href="#url">Tristique</a></li>
                        <li><a href="#url">Donec</a></li>
                        <li><h4><a href="#url">Sapien</a></h4></li>
                        <li><a href="#url">Purus</a></li>
                        <li><a href="#url">Congue</a></li>
                        <li><a href="#url">Mattis</a></li>
                </ul>
                <ul>
                        <li><h4><a href="#url">Integer nec Diam</a></h4></li>
                        <li><a href="#url">Morbi Eget Pharetra</a></li>
                        <li><a href="#url">Nulla &amp; Orci</a></li>
                        <li><a href="#url">Eget Sapien Sodales</a></li>
                        <li><h4><a href="#url">Aenean</a></h4></li>
                        <li><a href="#url">Velit Ligula</a></li>
                        <li><a href="#url">Maecenas</a></li>
                </ul>
                </div>
                </li>
                <li class="threeCol three"><a class="oneCol fly" href="/three/">Three</a> 
                <div>
                <ul>
                        <li><h4><a href="#url">Egestas Sed</a></h4></li>
                        <li><a href="#url">Consequat Leo</a></li>
                        <li><h4><a href="#url">Pellentesque Velit</a></h4></li>
                        <li><a href="#url">Lacinia &amp; Blandit</a></li>
                        <li><a href="#url">Interdum</a></li>
                        <li><a href="#url">Donec non Fringilla</a></li>
                        <li><a href="#url">Fusce Ullamcorper</a></li>
                </ul>
                <ul>
                        <li><h4><a href="#url">Facilisis</a></h4></li>
                        <li><a href="#url">Tristique</a></li>
                        <li><a href="#url">Donec</a></li>
                        <li><h4><a href="#url">Sapien</a></h4></li>
                        <li><a href="#url">Purus</a></li>
                        <li><a href="#url">Congue</a></li>
                        <li><a href="#url">Mattis</a></li>
                </ul>
                <ul>
                        <li><h4><a href="#url">Integer nec Diam</a></h4></li>
                        <li><a href="#url">Morbi Eget Pharetra</a></li>
                        <li><a href="#url">Nulla &amp; Orci</a></li>
                        <li><a href="#url">Eget Sapien Sodales</a></li>
                        <li><h4><a href="#url">Aenean</a></h4></li>
                        <li><a href="#url">Velit Ligula</a></li>
                        <li><a href="#url">Maecenas</a></li>
                </ul>
                </div>
                </li>

                <li class="twoCol four"><a class="twoCol fly" href="/four/">Four</a>
                <div>
                <ul>
                        <li><h4><a href="#url">Ut vel Cursus</a></h4></li>
                        <li><a href="#url">Maecenas imperdiet </a></li>
                        <li><a href="#url">Congue Metus</a></li>
                        <li class="fly"><a class="fly" href="#url">Vitae Luctus</a>
                        <ul>
                                <li><a href="#url">Purus Pellentesque</a></li>
                                <li><a href="#url">Pellentesque Sed</a></li>
                                <li><a href="#url">Felis Nunc</a></li>
                        </ul>
                        </li>
                </ul>
                <ul>
                        <li><h4><a href="#url">Morbi Placerat Luctus</a></h4></li>
                        <li><a href="#url">Ut &amp; Eleifend</a></li>
                        <li><a href="#url">Feugiat Euismod</a></li>
                        <li><a href="#url">Tempus Condi</a></li>
                </ul>
                </div>
                </li>
                <li class="noCol five"><a href="/five/">Five</a></li>
                <li class="noCol six"><a href="/six/">Six</a></li>
                <li class="noCol seven"><a href="/seven">Seven</a></li>
        </ul>
</div> <!--</div class="nav"> -->
</div><!--</div id="navigation"> -->

— Eddie B
nguồn

Cấu trúc đó được áp đặt bởi CSS, phải không? Nếu vậy, bạn cần suy nghĩ lại về mã CSS của bạn. Tìm hiểu về các yếu tố giả, như: nth-child ,: before ,: after. Tôi rất nghi ngờ rằng bạn không thể thực hiện thiết kế menu nhất định với đánh dấu menu mặc định của WP. Bạn có thể đăng một ảnh chụp màn hình về cách menu này được cho là trông?

— onetrickpony

Tôi đã thử tải lên ảnh chụp màn hình nhưng tôi không nghĩ rằng tôi đã có đại diện ở đây :-) fwiw ... menu này hoạt động như một nhà vô địch như một menu tĩnh ... NP ở đó ... nó thêm nhiều danh sách không có thứ tự thông qua một trình đơn thực đơn Tôi đang vật lộn với ... cảm ơn vì sự giúp đỡ của bạn :-)

— Eddie B

@EddieB bạn luôn có thể liên kết đến ảnh chụp màn hình trên một trang web lưu trữ hình ảnh

— Steve Buzonas

1

Thành thật mà nói, tôi chỉ sử dụng một menu duy nhất và sau đó áp dụng một lớp CSS (trong phần phụ trợ) cho phần tử điều hướng mà bạn muốn.

Nó đủ đơn giản để thêm một lớp CSS trong ngăn chỉnh sửa Menu và giải quyết được rất nhiều khó khăn của bạn vì bạn chỉ cần kiểm tra sự hiện diện của chuỗi đó trong trình đi bộ tùy chỉnh của mình.

— Michael Griffiths
nguồn

Cảm ơn Michael ... Đó là những gì tôi đang làm và tôi có thể nhận được một danh sách phụ menu không có thứ tự ... Tôi dường như không thể thêm nhiều danh sách cho mỗi menu ...

— Eddie B

Về cơ bản, vấn đề là có thể thêm nhiều danh sách cho một container con IE cha mẹ {li} -> child_container {div} -> con {ul} | anh chị em {ul} | anh chị em {ul}

— Eddie B

1

Bạn có thể sửa đổi thực đơn của mình bằng cách sử dụng walker.

include('subMenu.php');
$menu =  wp_nav_menu( array('menu' => 'YOUR-MENU-NAME','menu_class' => 'megamenu','walker' => new subMenu));

tạo một tập tin subMothy.php trong thư mục chủ đề thêm mã bên dưới.

<?php
class subMenu extends Walker_Nav_Menu {
    function end_el(&$output, $item, $depth=0, $args=array()) {

    if( 'parent' == $item->title ){
        $output .= '<div> //child-container
        <ul>
                    <li><h4><a href="#url">Egestas Sed</a></h4></li>
                    <li><a href="#url">Consequat Leo</a></li>
                    <li><a href="#url">Lacinia &amp; Blandit</a></li>
                    <li><a href="#url">Interdum</a></li>
                    <li><h4><a href="#url">Pellentesque Velit</a></h4></li>
                    <li><a href="#url">Lacinia &amp; Blandit</a></li>
                    <li><a href="#url">Interdum</a></li>
                    <li><a href="#url">Donec non Fringilla</a></li>
                    <li><a href="#url">Fusce Ullamcorper</a></li>
            </ul>
            <ul>
                    <li><h4><a href="#url">Facilisis</a></h4></li>
                    <li><a href="#url">Tristique</a></li>
                    <li><a href="#url">Donec</a></li>
                    <li><h4><a href="#url">Sapien</a></h4></li>
                    <li><a href="#url">Purus</a></li>
                    <li><a href="#url">Congue</a></li>
                    <li><a href="#url">Mattis</a></li>
            </ul>
            <ul>
                    <li><h4><a href="#url">Integer nec Diam</a></h4></li>
                    <li><a href="#url">Morbi Eget Pharetra</a></li>
                    <li><a href="#url">Nulla &amp; Orci</a></li>
                    <li><a href="#url">Eget Sapien Sodales</a></li>
                    <li><h4><a href="#url">Aenean</a></h4></li>
                    <li><a href="#url">Velit Ligula</a></li>
                    <li><a href="#url">Maecenas</a></li>
            </ul>
        </div>
        ';
    }
    $output .= "</li>\n";  
    }
}

— Thêm
nguồn