使用自定义Walker函数将属性添加到wp_NAV_MENU中的<a>链接

时间:2013-01-13 作者:Naveen Chand K

我正在尝试使用wp\\u nav\\u menu生成菜单。我的预期输出如下:

        <!-- Main Menu -->
<div class="navbar navbar-blue navbar-fixed-top" style="margin-top:74px">
    <div class="navbar-inner">
        <div class="container">


            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">

                                <ul class="nav">
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="dashboard.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Dashboard <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="dashboard.html?lang=en">Dashboard #2</a></li>
                            <li><a href="dashboard_1.html?lang=en">Dashboard #1</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="active"><a href="gallery.html?lang=en">Photo Gallery</a></li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="site-pages.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Site Pages <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="site-pages.html?lang=en">View pages</a></li>
                            <li><a href="site-pages-add.html?lang=en">Add page</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="products.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">eCommerce <b class="caret"></b></a> 
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li class="nav-header">Catalog</li>
                            <li><a href="categories.html?lang=en">Categories</a></li>
                            <li><a href="products.html?lang=en">Products</a></li>
                            <li><a href="products-add.html?lang=en">Add product</a></li>
                            <li class="divider"></li>
                            <li><a href="orders.html?lang=en">Orders</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="clients.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Members <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="clients.html?lang=en">Clients</a></li>
                            <li><a href="account.html?lang=en">Edit account</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="charts.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Other <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="charts.html?lang=en">Charts</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown dropdown-hover">
                        <a href="documentation.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Documentation <b class="caret"></b></a>
                        <!-- Dropdown Menu -->
                        <ul class="dropdown-menu">
                            <li><a href="documentation.html?lang=en">Overview</a></li>
                            <li><a href="documentation/features.html?lang=en">Features</a></li>
                            <li><a href="documentation/getting-started.html?lang=en">Getting Started</a></li>
                            <li><a href="documentation/customization-guide.html?lang=en">Customization Guide</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Powered by</li>
                            <li><a href="documentation/credits.html?lang=en">Credits</a></li>
                        </ul> 
                        <!-- End Dropdown Menu  -->
                    </li>
                    <li class="divider-vertical"></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

</div>
<!-- End Main Menu -->
到目前为止,我能够使用自定义walker函数来创建wp\\u nav\\u菜单,并实现了如上所述的几乎所有html的生成,但我无法插入class="dropdown-toggle" data-toggle="dropdown" 标签内部。这将允许我切换我猜测的下拉列表(目前我只能生成顶部菜单。子菜单以html显示,但在浏览器中不可见)。

以下是我迄今为止的努力:

        <!-- Main Menu -->
<div class="navbar navbar-blue navbar-fixed-top" style="margin-top:74px">
    <div class="navbar-inner">
        <div class="container">


            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a> 
<?php class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\\t", $depth);
$output .= "\\n$indent<ul class=\\"dropdown-menu\\">\\n";
}
}
$defaults = array(
\'theme_location\'  => \'\',
\'menu\'            => \'\',
\'container\'       => \'div\',
\'container_class\' => \'nav-collapse collapse\',
\'container_id\'    => \'\',
\'menu_class\'      => \'nav\',
\'menu_id\'         => \'\',
\'echo\'            => true,
\'fallback_cb\'     => \'wp_page_menu\',
\'before\'          => \'\',
\'after\'           => \'\',
\'link_before\'     => \'\',
\'link_after\'      => \'\',
\'items_wrap\'      => \'<ul id="%1$s" class="%2$s"><li class="divider-vertical"></li>%3$s</ul>\',
\'depth\'           => 0,
\'walker\'          => new My_Walker_Nav_Menu
     );

     wp_nav_menu( $defaults );

      ?>
        </div>
    </div>

</div>
<!-- End Main Menu -->
有人能帮我修改我的自定义walker函数,以便获得上面给出的所需html输出吗。提前谢谢。

1 个回复
最合适的回答,由SO网友:s_ha_dum 整理而成

您要修改start_el 方法start_lvl 一最基本的意思是改变this line:

$item_output .= \'<a\'. $attributes .\'>\';
看起来像这样:

$item_output .= \'<a class="dropdown-toggle" data-toggle="dropdown"\'. $attributes .\'>\';
看起来您需要更复杂的逻辑来避免在所有子菜单中插入该字符串,但这就是想法。

结束

相关推荐

Admin menus and submenus

我为管理员创建了一个选项页面,并将其显示为顶级菜单->add_menu_page($themename, $themename, \'administrator\', basename(__FILE__), \'mytheme_admin\');我想在我创建的顶级菜单下添加一个子菜单,以显示完全相同的页面(显示为子菜单,但当用户单击顶级菜单时也会打开此页面)。此外,我不知道如何在这个顶级菜单下添加我创建的另一个主题页面。在这里询问之前,我已经阅读了wordpress文档,但无法完成。非常感谢。