wordpressのカスタムメニューをBootstrapのナビバーに使うときのメモ
2014年11月24日 wordpress
【PR】当サイトにはアフィリエイト広告が含まれています。
Bootstrapで構築したナビゲーションバーに、wordpressのカスタムメニューを組み込もうとしたときに、少し手間取ったので防備録的に残しておきます。
まずBootstrapで構築したナビバーのHTMLがこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></button> <a class="brand" href="#"><strong>サイト名</strong></a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container--> </div><!--/.navbar-inner--> </div><!-- /.navbar-fixed-top --> |
これにカスタムメニューを組み込んでみます！
まずは普通に、functions.phpに、カスタムメニューを組み込むためのコードを書きます。
|
1 2 |
add_theme_support( 'menus' ); register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' ); |
これでwordpress管理画面の「外観」から、カスタムメニューが使えるようになりました。
カスタムメニューから自動的に書き出されるHTMLは
|
1 2 3 4 5 6 7 |
<div> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li> </ul> </div> |
↑このように、divでulのリスト形式を囲む形で吐き出されます。
これをbootstrapで使おうとすると、
divのclassにnav-collapseとcollapse、
ulのclassにnavを追加しなければなりません。
そのためには、wordpressのタグに少し手をいれる必要があります。
カスタムメニューを組み込むタグは、通常なら下記のものになります。
|
1 2 3 |
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi') ); ?> |
function.phpで私が設定したテーマの場所が「header-navi」なのでこのタグになりますが、もし違う名前で設定していたら、「header-navi」のところを書き換えて下さい。
こちらに、
divのクラスを追加するcontainer_classプロパティと、ulのクラスを追加するmenu_classプロパティを追記します！
|
1 2 3 4 5 |
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi', 'container_class' => 'nav-collapse collapse', 'menu_class'=> 'nav' ) ); ?> |
３行目のcontainer_classプロパティでnav-collapseとcollapseクラスを、
４行目のmenu_classプロパティでnavクラスを追記しました！
これで、divとulにbootstrap用のクラスが付いた状態でソースが吐き出されるようになります。
ちなみにこのサイトでは、最初はカスタムメニューで組み込むつもりでコーディングをしていたのですが、ナビバーにどうしてもツイッターとFacebookのボタンを組み込みたかったので、結局カスタムメニューは使わずに、テンプレートからメニューを出すことにしました。
カスタムメニューからツイッター、Facebookのボタンを組み込む良い方法があれば、ぜひ教えてください！
【PR】当サイトにはアフィリエイト広告が含まれています。
[…] wordpressのカスタムメニューをBootstrapのナビバーに使うときのメモ […]