带有wp_NAV_MENU的引导下拉菜单

时间:2013-02-27 作者:Cody

我正在尝试用boostrap构建Wordpress主题,但导航菜单给我带来了一些麻烦。我希望下拉菜单能像Boostrips下拉菜单一样工作,但我不知道如何做到这一点。

这是我的菜单:

<ul class="nav">
   <?php wp_nav_menu( array( \'items_wrap\' => \'%3$s\' ) ); ?>
</ul>
这就是我的功能。菜单的php:

add_action(\'after_setup_theme\', \'blankslate_setup\');
function blankslate_setup(){
register_nav_menus(
array( \'main-menu\' => __( \'Main Menu\', \'blankslate\' ) )
);
}

function my_wp_nav_menu_args( $args = \'\' )
{
    $args[\'container\'] = false;
    return $args;
} // function

add_filter( \'wp_nav_menu_args\', \'my_wp_nav_menu_args\' );
当我添加子菜单项(通过外观-菜单)时,这是当前生成的内容:

<ul class="nav">
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Parent</a>
        <ul class="sub-menu">
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#">Child</a></li>
        </ul>
    </li>
</ul>
要使菜单与引导一起使用,我需要生成如下菜单:

<ul class="nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Child</a></li>
        </ul>
    </li>
</ul>

So I need:

<如果菜单项有子项,则添加类“下拉列表”<b class="caret"></b> 在下拉菜单名称之后(在.Dropdown a元素中)添加class="dropdown-menu"<ul class="sub-menu">
2 个回复
最合适的回答,由SO网友:Sunyatasattva 整理而成

您需要编写一个自定义walker扩展Walker_Nav_Menu, 或多或少是这样的:

class My_Custom_Nav_Walker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "\\n<ul class=\\"dropdown-menu\\">\\n";
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = \'\';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( \'<a\', \'<a class="dropdown-toggle" data-toggle="dropdown"\', $item_html );
           $item_html = str_replace( \'</a>\', \' <b class="caret"></b></a>\', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = \'active\';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = \'dropdown\';
            } elseif ( $depth === 1 ) {
                // Extra level of dropdown menu, 
                // as seen in http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = \'dropdown-submenu\';
            }
        }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}
但不确定第3点和第4点需要什么。

SO网友:moaz studio استديو معاذ

要解决下拉菜单问题,您应该:

转到class-wp-bootstrap-navwalker.php 文件

寻找

$atts[\'data-toggle\'] ="dropdown";
并将其替换为

$atts[\'data-bs-toggle\'] ="dropdown";

结束