wp-bootstrap-navこの記事ではWordpressのテーマを自作する際に、Bootstrapフレームワークを使ってナビゲーションメニューをレスポンシブ対応させるための設定について書いています。

WordPressではナビゲーションメニューを動的に作成してくれるテンプレートタグwp_nav_menu()がありますが、これとBootstrapの組み合わせ方について具体的なコードの書き方の例を載せてみました。

sponsored link

 

用意するもの

まずは以下のファイルをそれぞれダウンロード。(jQueryやBootstrapをCDNからの読み込みにしている場合はnavwalkerのみダウンロード)

jQuery

jQueryはBoostrapを動かすために必須なので、まだテーマに組み込んでいない場合はダウンロードする。上のリンクから公式サイトに行って「Download the compressed, production jQuery 1.11.3」のリンクをクリック。ダウンロードしたファイルを自分のテーマのjsフォルダに入れておく。

 

Bootstrap

Boostrapをまだ組み込んでいない場合は上のリンクからダウンロード。ダウンロード後、zipファイルを解凍してbootstrap.min.cssとbootstrap.min.jsを自分のテーマのcss,jsフォルダにそれぞれ入れておく。

 

Bootstrap navwalker

ナビゲーションメニューを表示させるwp_nav_menu()タグにBoostrapを組み込むためのクラス。上のリンクからダウンロードし、wp_bootstrap_navwalker.phpをテーマフォルダに入れておく。

 

function.phpに記述すること

 

header.phpに記述すること

headタグ内に以下のタグを記述してBootstrapのCSSファイルを読み込み。

 

bodyタグ内、ヘッダーのナビゲーションメニューを表示させたい部分に以下のコードを記述する。

 

wp_nav_menu()のパラメータのmenu_classの部分は、Bootstrapで用意されているクラスを記述している。fallback_cbとwalkerのところは上記のとおりに記述。その他は適宜変更してOK。

具体的なパラメータの設定方法については以下を参照

テンプレートタグ/wp nav menu

 

footer.phpに記述すること

Bootstrapのjsファイルの読み込み。

 

出力されるHTMLタグの例

以下のようなHTMLタグが出力される。