将子菜单显示为单独的列表

时间:2012-11-25 作者:rzepak

我需要更改WordPress中呈现菜单的方式-我想我应该编写自己的walker类,但我不知道如何使用它。我想实现的是将每个级别的菜单渲染为单独的div。因此,我们有非常标准的wp菜单:

<ul class="dropmenu main-menu" id="menu-some-stupid-name">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83" id="menu-item-83">
    <a href="http://localhost/wordpress/flext/contact/">Contact</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-85" id="menu-item-85">
        <a href="http://localhost/wordpress/flext/blog/">Blog</a>
        <ul class="sub-menu"> 
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99" id="menu-item-99"><a href="http://localhost/wordpress/flext/blog/">Blog</a></li>  
        </ul>
   </li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-86" id="menu-item-86"><a href="http://localhost/wordpress/flext/">Home</a>
        <ul class="sub-menu">  
            <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-101" id="menu-item-101"><a href="http://localhost/wordpress/flext/">Home</a></li>   
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102" id="menu-item-102"><a href="http://localhost/wordpress/flext/sample-page/">Sample Page</a></li>
        </ul>
    </li>
</ul>
我想要实现的是:

   <ul class="dropmenu main-menu" id="menu-some-stupid-name">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83" id="menu-item-83"><a href="http://localhost/wordpress/flext/contact/">Contact</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-85" id="menu-item-85"><a href="http://localhost/wordpress/flext/blog/">Blog</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-86" id="menu-item-86"><a href="http://localhost/wordpress/flext/">Home</a></li>
    </ul>

    <ul class="sub-menu child-menu-item-85"> 
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99" id="menu-item-99"><a href="http://localhost/wordpress/flext/blog/">Blog</a></li>  
    </ul>

    <ul class="sub-menu child-menu-item-86">  
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-101" id="menu-item-101"><a href="http://localhost/wordpress/flext/">Home</a></li>   
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102" id="menu-item-102"><a href="http://localhost/wordpress/flext/sample-page/">Sample Page</a></li>
    </ul>
是否可以使用自定义Walker\\u Nav\\u菜单类实现?如果有任何想法,我将不胜感激。谢谢

1 个回复
SO网友:rzepak

我决定不更改walker类中的任何内容,并使用jQuery“解析”菜单,克隆每个子级并附加到“菜单”容器中,该容器提供了我想要的结果。唯一缺少的是如何传递具有子元素的menu元素的ID来启动\\u lvl函数。

谢谢

结束

相关推荐

Custom menus not showing

作为我上一次关于菜单的未解决查询的后续,这个问题已经进一步扩展。我的菜单没有打印代码中的任何地方。我正在注册菜单功能。php:add_action( \'after_setup_theme\', \'your_newtheme_setup\' ); if ( ! function_exists( \'your_newtheme_setup\' ) ) : function your_newtheme_setup() { if (