扩展多个Nav_Menu_Walkers是否允许嵌套菜单？

时间：2012-09-30 作者：Edward J Beckett

基本上，我正在尝试添加多个子导航菜单，我非常接近，但我似乎找不到解决问题的正确方法。。。

我正在使用Stu Nichols CSS菜单的变体。。。

代码解释得更好；-）

构建此菜单所需的关系将顶层元素作为列表项，子容器作为div，子容器和同级{nth child}作为uls。。。所以结构如下。。。

<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>
我目前的想法是添加一个额外的nav\\u menu\\u walker来构建子菜单列表。。。但是，我不确定是否可以将多个walker作为参数传递到wp\\U nav\\U菜单。。。IE。。。明确肯定

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

}
为了获得父容器->子容器关系，我只需将div和ul添加到start\\u lvl函数中。。。这里是我在决定如何创建多个兄弟姐妹时遇到的问题。。。

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

    $indent = str_repeat("\\t", $depth);     
    $output .=  "\\n$indent<div>\\n";
    $output .=  "\\n$indent<ul>\\n";
}
为了向顶级锚元素添加类，我有一个自定义的walker。在start\\u el函数中，我基于父类为锚定项注入了类。

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 );
}
这是我试图实现的导航结构。。。

<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"> -->

2 个回复
SO网友:Michael Griffiths

坦白地说，我只需要使用一个菜单，然后将一个CSS类（在后端）应用于您想要的导航元素。

在菜单编辑窗格中添加一个CSS类非常简单，这就解决了很多困难，因为您只需检查自定义walker中是否存在该字符串。

SO网友:Addy

您可以使用walker修改菜单。

include(\'subMenu.php\');
$menu =  wp_nav_menu( array(\'menu\' => \'YOUR-MENU-NAME\',\'menu_class\' => \'megamenu\',\'walker\' => new subMenu));
创建文件子菜单。php在主题文件夹中添加以下代码。

<?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";  
    }
}

结束
标签： menus   customization   dropdown   walker   小码农  

相关推荐

使用wp_Dropdown_USERS和SELECTED()函数？

我有一个自定义的元框，其中有一个下拉列表，通过WP\\u dropdown\\u users显示所有WP用户。它保存了使用post选择的WP用户，以便所有工作正常。但是，是否有办法使其在返回编辑时在下拉列表中显示选定的用户，而不是列表中的第一个用户？我已经将selected（）函数用于另一个下拉列表，但我已经动态创建了它。我尝试用wp\\u dropdown\\u用户实现selected（），但没有成功，所以我不确定这是否可行？谢谢