web-dev-qa-db-ja.com

twitterのブートストラップを使用したwordpressのナビゲーションメニュー

私はテーマにTwitterのブートストラップを使用しています。私は自分のテーマにブートストラップメニューを使おうとしています。しかし、それは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_nav_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_nav_menu

<?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>
menustwitter-bootstrap
3
Giri

コピーペーストソリューションについては、このカスタムウォーカーを確認してください。 http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-Twitter-bootstrap-dropdown-menus-with-wordpress/

data-toggle="dropdown"や<b class="caret"></b>などの1つまたは2つのものが欠落しています。

それを理解するのは非常に簡単ですが、ここに私の修正版があります： https://Gist.github.com/1817371

それが役に立てば幸いです。

4
Duane

私はカスタムウォーカーとは異なるアプローチを使いました。サブメニュー項目を含む親ナビゲーション項目にクラス「ドロップダウン」を追加する機能を使用しました。 WordPressはデフォルトでクラス「サブメニュー」を出力するので、クラス「サブメニュー」を持つものにはクラス「ドロップダウンメニュー」を追加するためにjQueryを使います。それからjQueryを使って<b class="caret"></b>要素を追加します。

私はここでWordPressのナビゲーションメニューにBootstrapドロップダウンを実装する方法についての完全なチュートリアルとしてこれを書きました： http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

2
Astrotim

WP Bootstrap Menuを試してください あなたが複雑なことを探していないのであれば。

あなたはそれを動作させるためにあなたのテーマのプラグインからのカスタム関数でネイティブのwp_nav_menu()を置き換える必要があります。プラグイン機能は他のプラグインと互換性がないことに注意してください、それはWordPressウォーカーと同じフィルタを提供しません。

0
farhan

詳細については この回答 を参照してください。menu_item_parentを探し、条件付きでclass="dropdown-toggle"を設定します。

もっと似たような質問 。

0
fuxia