[Wordpress] ナビゲーションメニュー wp_nav_menu()の使い方

Question

BootstrapのテンプレートをWordpressのテーマ用に作り替えていますが、その中でわからない点について質問します。 ナビメニューについてですが、ulリストの中に ドロップダウンするulリストがあるという構造です。

Bootstrapのテンプレートのナビメニューが下記のようなになっています。

<div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right text-uppercase">

      <li>
      <a href="https://localhost/IDE/Wordpress_Sample"><span>home</span></a>
     </li> 

     <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>pages</span></a>
              <ul class="dropdown-menu">
                    <li>
                     <a href="about.html">about</a>
                    </li>
                    <li>
                    <a href="service.html">service</a>
                    </li>
              </ul>
      </li> 

      </ul>
</div>

このうよな時に、Wordpressのテーマに表示するには下記のように、wp_nav_menu()関数を使って、出力しました。ただこれだけでは、子階層も、すべて表示されてしまい。子階層のulリストがドロップダウンになっていません。子階層
ドロップダウンするli のクラスや、その中にくるulリストのクラスの定義はこの関数の場合、どのように定義すればよいでしょうか? わかりましたら教えてください。よしろしくお願いします。

<div class="collapse navbar-collapse" id="main-nav-collapse">
<?php
 wp_nav_menu( array(
 'theme_location' => 'primary',
  'menu_class'     => 'nav navbar-nav navbar-right text-uppercase') );
?>
</div>

Answer 1

下記方法で実現できるようです。

【WordPressでBootstrapのドロップダウンを表示するwp-bootstrap-navwalker】
http://www.youngflavor.net/2013/10/733/

【GitHub - twittem/wp-bootstrap-navwalker: A custom WordPress nav walker class to fully implement the Twitter Bootstrap 3.0+ navigation style in a custom theme using the WordPress built in menu manager.】
https://github.com/twittem/wp-bootstrap-navwalker

Comments

[xjaPANDA]

ありがとうございます。教えていただいたサイトの手順通り進めたら解決することができました。