VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

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

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

管理画面のメニュー画面で設定したメニューを表示するwp_nav_menu関数とブートストラップ3のナビゲーションメニューのスタイルを設定するwp-bootstrap-navwalkerを使って設定します。
 
1)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’;
 
2)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 -->

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

モバイルバージョンを終了