使用Twitter Bootstrap的WordPress导航菜单

时间:2012-02-03 作者:PrivateUser

我在我的主题中使用推特引导。我正在尝试在我的主题中使用引导菜单。但它使用自定义属性,如data-toggle.

这是完整的代码。

<ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
有人能帮我优化wp\\u nav\\u menu()的代码吗?

更新:

这是我迄今为止尝试的。

1) 自定义子菜单类

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";
  }
}
2)wp\\U nav\\U菜单

<?php wp_nav_menu( array( \'items_wrap\' => \'<ul class="nav">%3$s</ul>\',\'walker\' => new My_Walker_Nav_Menu() ) ); ?>
你能帮我添加这个“下拉”类和这个链接吗

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<小时>

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

有关复制粘贴解决方案,请检查此自定义Walker:http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

缺少一到两样东西,比如data-toggle="dropdown"<b class="caret"></b>.

这应该很容易理解,但下面是我的修改版本:https://gist.github.com/1817371

希望这有帮助。

SO网友:Astrotim

我使用了一种不同于定制步行器的方法。我使用一个函数将类“dropdown”添加到任何包含子菜单项的父导航项中。由于WordPress默认输出类“sub menu”,因此我使用jQuery将类“dropdown menu”添加到任何具有类“sub menu”的对象中。然后,我使用jQuery附加<b class="caret"></b> 要素

我在这里编写了一个完整的教程,介绍了如何在WordPress导航菜单中实现引导下拉菜单:http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

SO网友:fuxia

看见this answer 有关详细信息:查找menu_item_parent 和设置class="dropdown-toggle" 有条件地

More similar questions.

SO网友:farhan

尝试WP Bootstrap Menu 如果你不是在寻找复杂的东西。

您必须替换本机wp_nav_menu() 使用主题中插件的自定义函数使其工作。请注意,插件功能与其他插件不兼容,它不提供与WordPress walker相同的过滤器。

结束

相关推荐

Menu API not switching menus?

我正在使用菜单API,我想切换到其他菜单,但出于某种原因,它保留了第一个菜单这是我的密码在函数中。php add_action( \'init\', \'register_my_menus\',10 ); function register_my_menus() { register_nav_menu(\'main-navigation\', \'Main Navigation\'); } 下面是我的主题文件(header.ph