web-dev-qa-db-ja.com

Wp_nav_menuでブートストラップドロップダウンメニュー

Boostrapを使用してWordpressのテーマを作成しようとしていますが、ナビゲーションメニューで問題が発生しています。ドロップダウンをブーストラップドロップダウンのように機能させたいのですが、その方法がわかりません。

これが私のメニューです。

<ul class="nav">
   <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
</ul>

これは私のメニューのfunctions.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' );

（Appearance - Menusから）サブメニュー項目を追加すると、これが現在生成されているものです。

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

だから私は必要です：

  • メニュー項目に子項目がある場合は、クラス「ドロップダウン」を追加します。
  • 要素= .dropdownにclass = "dropdown-toggle" data-toggle = "dropdown"を追加する
  • ドロップダウンメニュー名の後に<b class="caret"></b>を追加する（.dropdown要素内）
  • class="dropdown-menu"を<ul class="sub-menu">に追加する

誰かが助けることができる願っています！

menusdropdowntwitter-bootstrap
3
Cody

あなたは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で何が必要かわからない。

5
Sunyatasattva