新しいWordPressの仕事が来て、お客様にレスポンシブルで作って下さいレスポンシブルでって丁寧に2回も言っていただいたので対応させて頂く運びとなりました。ありがたい限りですね。それで、案件によってはイチからCSS書く時代でもないと思うのでTwitterBootstrapを初めて実務でも導入してみよっかなーって企みを実行に移して、GreenMindってテーマがVer2系だったけど、オッサレーだった訳ですよ。ほんで、コーディングから先にやっちゃったもんだから、カスタムメニューつけるときにはまりましてね。今Ver3系でコーディングしてるわけです。何故Ver3にしたかと言えば･･･
INDEX
それはそれは、wp-boostrap-navwalkerがあるから！
これはプラグインではなく、作者によるところユーティリティクラス。カスタムメニューのドロップダウンを出すため専用のプログラムみたいです。必要なファイルは予め読み込みがなされている前提で使われるものなので、初心者が使うのは辛いかもしれませんが、「bootstrap使って、テーマ作っちゃおっかなー☆ミ」みたいな人は簡単に使う事ができますよ。ただしこれ、3系じゃないと使えないので、Ver3にせざるを得なかったというわけでした。
導入手順
とりあえず、こっからおもむろに導入手順を書いて行こうと思います。
wp-boostrap-navwalkerを入手セヨ
Githubからダウンロードして使います。これをダウンロードしたら、解凍して中のwp_bootstrap_navwalker.phpをincフォルダなり面倒臭いならthemeフォルダなりにファイル転送します。僕は面倒くさいのでthemeに放り込んでます。
function.phpを修正セヨ
functions.phpの中で、【wp_bootstrap_navwalker.php】を読み込ませます。その後に、init時に動かす関数を定義してregister_nav_menusっていう管理画面にカスタムメニュー出す関数を呼びます。サンプルコードのしておきます。
こんな感じ。
menuを作成セヨ
これで管理画面の外観とこにメニューって項目が出現します。とりあえずメニューを追加します。試しにテキトーにメニュー二つ作ってみて下さい。
HTML+PHPを追加セヨ
ここまでで準備は整いました。後は、さっき設定した奴を呼び出しましょう。サンプルコードはこんな感じですね。これは、ナビゲーション作りたいとこに書いて下さいね。クラスとかそのままコピーしたのでそうなってますが、グローバルナビとサブナビで、クラスは微調整してください！
二つ書くことで別々のカスタムメニューを作る事が出来ます。例えば、ヘッダで使うナビとサイドバーで使うナビが違うよーってときに便利だったりしますね。あわただしい感じでしたけどこれだけです。手軽に導入できるので、よいとおもいました！
