Bootstrapのナビゲーション・バー機能を使う

Bootstrapのナビゲーション・バー機能とは、下記を行ってくれるコンポーネントです。

①スマホはメニューを非表示にしON/OFFボタンを表示する。
メニュをONにした時はメニューを縦に並べる。

②タブレットやパソコンはメニューを横に並べる。

ここではこの機能の使い方を解説しています。

1.ナビゲーション・バーの基本形

ナビゲーション・バーの基本形は下記になります。

<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<div class="navbar-header">
　　　<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample7">
				<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="#">
				タイトル
			</a>
		</div>
		<div class="collapse navbar-collapse" id="navbarEexample7">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>

※1.<nav class=”navbar navbar-inverse”>～</nav>がメニュの全体枠で、この中に表示する項目を並べる。(上図の黒い部分)

※2.<button>要素にclass=”navbar-toggle collapsed” data-toggle=”collapse”を指定する。
これがコラップス(開閉)を可能にする指定になります。
data-target=”#navbarEexample7″は開閉するメニュを指定しています。

※3.開閉されるメニュにclass=”collapse navbar-collapse”を指定する。
これが開閉されるメニュのクラスです。
またid=”navbarEexample7″は開閉するボタンを指しています。

※4.上記では表示する項目がnavbar-headerとメニュだけになっているが、この間に色々な項目を入れても良い。

上記HTMLを実行すると下記の様になります。

＜PCで表示した場合＞

<スマホで表示した場合>

　メモ

上記のナビゲーション・バーをもっと使い易くする為には下記カスタマイズが必要になります。

①メニュ表示のON/OFFボタンを関数にして、プログラムを簡単にする。

②メニュはWordPressのメニュを呼び出せる様にする。

2.メニュボタンの関数化

引数を持つ様な複雑な関数はfunctions.phpを2つに分けて管理した方が維持メンテが用意になります。

2-1.functions.phpへの記述

 // ヘッダメニュ
  get_template_part('func/my_navbar_button');

※1.上記はfuncフォルダの中にあるmy_navbar_button.phpを取り込め！という命令です。

2-2.func￥my_navbar_button.phpに記述するプログラムは下記になります。

<?php 
/*****************************************************************************
navbarボタン
<引数>
$id：開閉するメニュID名(#××)
*******************************************************************************/
function my_navbar_button($id)
 {
?>

<style>
	#menu-btn{
		display:flex;
		flex-direction:column;
		align-items:center;
		font-size:8px;
		padding:0 3px 3px 3px;
		margin:0;
		color:#fff;
		border:none;
		background:#8b8682;}
	@media screen and (min-width:768px){  /*スマホ以外は省略*/
		#menu-btn{display:none;}
	}	
</style>

<button id='menu-btn' type="button" class="navbar-toggle" data-toggle="collapse" data-target='<?php echo $id;?>'>
	<div>MENU</div>
	<div class="icon-bar"></div>
	<div class="icon-bar"></div>
	<div class="icon-bar"></div>
</button>

<?php
 }
?>

※1.スタイルも併せて関数化する事により、関数の変更を簡単にしています。

※2.引数($id)は開閉するメニュのID名です。

※3.赤字の所がnavbarとして機能させる為のクラス名等です。

上記関数をCALLすると、下記の様なnavbarボタンが表示されます。

3.使い方

上記関数を使ったナビゲーション・バーの基本形は下記になります。

<nav class="navbar navbar-inverse">
	<?php my_navbar_button('#navbar-menu');?>
	タイトルやその他の部品
	<div class="collapse navbar-collapse" id="navbar-menu"> <!-- メインメニュー -->
		<?php wp_nav_menu( array (
			'theme_location' => 'primary',
　　　'container' => false ,
　　　'items_wrap' => '<ul>%3$s</ul>') ); ?>
	</div>
</nav>

※1.my_navbar_button(‘名前’)と開くメニュのID名を一致させます。
上記では#navbar-menuとid=”navbar-menu”です。

※2.wp_nav_menuで指定しているパラメータは下記になります。
‘theme_location’ => ‘primary’
‘theme_location’は表示するメニュの名前です。
TwentyTwelveではメインメニュ名がprimaryになっています。
(記述している場所はfunctions.phpのregister nav menu設定です)
‘container’ => false
上記設定はul要素をdivでラップするのをやめます。
items_wrap’ => ‘<ul>%3$s</ul>’
上記設定はUL要素に余分なIDが付くのをやめます。

※4.タイトルやその他の部品の所は何行書いても問題ありません。
下図はHPタイトル、ディスクリプション、検索機能を入れた例です。