wordpressのカスタムメニューをBootstrapのナビバーに使うときのメモ

2014年11月24日 wordpress


Bootstrapで構築したナビゲーションバーに、wordpressのカスタムメニューを組み込もうとしたときに、少し手間取ったので防備録的に残しておきます。

 

まずBootstrapで構築したナビバーのHTMLがこちら。

 

これにカスタムメニューを組み込んでみます!

 

まずは普通に、functions.phpに、カスタムメニューを組み込むためのコードを書きます。

これでwordpress管理画面の「外観」から、カスタムメニューが使えるようになりました。
カスタムメニューから自動的に書き出されるHTMLは

↑このように、divでulのリスト形式を囲む形で吐き出されます。
これをbootstrapで使おうとすると、
divのclassにnav-collapseとcollapse
ulのclassにnavを追加しなければなりません。

そのためには、wordpressのタグに少し手をいれる必要があります。
カスタムメニューを組み込むタグは、通常なら下記のものになります。

function.phpで私が設定したテーマの場所が「header-navi」なのでこのタグになりますが、もし違う名前で設定していたら、「header-navi」のところを書き換えて下さい。

こちらに、
divのクラスを追加するcontainer_classプロパティと、ulのクラスを追加するmenu_classプロパティを追記します!

3行目のcontainer_classプロパティでnav-collapseとcollapseクラスを、
4行目のmenu_classプロパティでnavクラスを追記しました!

これで、divとulにbootstrap用のクラスが付いた状態でソースが吐き出されるようになります。

 

ちなみにこのサイトでは、最初はカスタムメニューで組み込むつもりでコーディングをしていたのですが、ナビバーにどうしてもツイッターとFacebookのボタンを組み込みたかったので、結局カスタムメニューは使わずに、テンプレートからメニューを出すことにしました。
カスタムメニューからツイッター、Facebookのボタンを組み込む良い方法があれば、ぜひ教えてください!


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


  1. […] wordpressのカスタムメニューをBootstrapのナビバーに使うときのメモ […]

カテゴリ

CONTACT

管理人:いのり

何かあればこちらよりお問い合わせください。

お問い合わせ