ブートストラップ３を使って自作テーマ作成（１１）WordPressのメニュー画面でナビゲーションメニューを設定

現時点ではナビゲーションメニューのメニュー項目はheader.php内に直接記述されています。メニュー項目や表示順などをWordPressのメニュー画面で設定できるように変更します。

管理画面のメニュー画面で設定したメニューを表示するwp_nav_menu関数とブートストラップ３のナビゲーションメニューのスタイルを設定するwp-bootstrap-navwalkerを使って設定します。
　
１）wp-bootstrap-navwalkerを配置
　
①下記サイトからwp-bootstrap-navwalker.phpを入手します。
twittem/wp-bootstrap-navwalker
　
②テーマディレクトリ内にコピー
ここでは、incディレクトリ内にコピーします。
　
③functions.phpでインクルード
functions.php内に下記記述を追加します。
　
define(‘MYTHEMES_PATH’, get_template_directory() );
require MYTHEMES_PATH . ‘/inc/wp-bootstrap-navwalker.php’;
　
２）header.phpを修正
　
メニューのリンク項目が記述されている部分をwp_nav_menu関数に置き換えます。
header.phpのナビゲーションメニュー部を下記のように修正します。

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <?php wp_nav_menu( array('theme_location' => 'primary',
          'menu_class' => 'nav navbar-nav',
          'container_class' => 'navbar-collapse collapse',
          'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
          'walker' => new wp_bootstrap_navwalker()
    ) );?>
  </div><!-- /.container -->
</div><!-- /.navbar -->

　
３）WordPressの管理画面でメニューを作成し、登録
　
①「外観」→「メニュー」→「メニューを編集」タブでメニューを作成
“メニュー構造”欄で適宜、階層化したメニューを作成します。
　
②「位置の管理」タブで”トップメインメニュー”に①で作成したメニューを指定し、保存
　
４）動作確認
　
ブラウザで表示し、管理画面で設定したメニュー項目がナビゲーションメニューに表示され、階層構造にしたメニュー項目がドロップダウンで表示される事を確認します。
　
「ブートストラップ３を使って自作テーマ作成」の目次へ