カスタムメニューの活用方法を紹介していますが、wp_nav_menu()のカスタマイズや、管理画面でclass追加などを用いても、BootstrapのドロップダウンNAVはとても困難です。

そこでBootstrap3のドロップダウンを再現してくれるコードがGithubで公開されていましたのでご紹介します。

wp-bootstrap-navwalker 

twittem/wp-bootstrap-navwalker

使い方も、リンク先ページに詳しく書かれていますが、wp_nav_menu()のパラメータ 'walker' を使います。
素直にかかれている通り設定してみて、必要な箇所をカスタマイズしていきましょう。

コチラのサイトも参考にさせていただきました。

• WORDPRESSテーマでMENUにBOOTSTRAPのドロップダウンを使う方法
• WordPressでBootstrap 3のドロップダウンメニューを表示できるスクリプト wp-bootstrap-navwalker

wp_bootstrap_navwalkerのインストール

wp_bootstrap_navwalker の設置はたった２ステップで完了します。

ステップ１： wp_bootstrap_navwalker.php の保存場所

twittemwp-bootstrap-navwalker からファイルをダウンロードして、WordPressのテーマフォルダ（/wp-content/あなたの使用するテーマ/）に wp_bootstrap_navwalker.php を保存します。

ステップ2： funtion.php に下記コードを記述

次にテーマのfunction.phpに下記コードを追加して完了です。

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

register_nav_menu 、register_nav_menus の付近に記述しておくといいのではないでしょうか。

wp_bootstrap_navwalkerの設置例

twittemwp-bootstrap-navwalker　の解説に記述されていたコードを抜粋して掲載させていただきます。
ベースとなってるコード自体はBootstrap公式サイトのComponent/Navbar　と同じもので、黄色の部分がカスタムメニューが反映される部分となります。

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>

       <?php
           wp_nav_menu( array(
             'menu'            => 'primary',
             'theme_location'  => 'primary',
             'depth'           => 2,
             'container'       => 'div',
             'container_class' => 'collapse navbar-collapse',
　　　　　　　'container_id'    => 'bs-example-navbar-collapse-1',
             'menu_class'      => 'nav navbar-nav',
             'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
             'walker'          => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>

wp_nav_menu()のパラメータ 'walker' を利用するほど本格的に手を加えるのは時間的にも技術的にも難しいので、このようにコードやファイルが公開されているのはとても助かります。

当サイトのヘッダーメニューも、この方法を用いてBootstrapのドロップダウンNAVを利用することができました。