【WordPress】自由自在、Walker_Nav_Menuクラスでwp_nav_menuの出力を操る

Pocket

 やっと、off-canvas と dropdown の切り替えができるCSSだけで実装したレスポンシブナビゲーションメニューが完成した。

 もちろん、全部自分だけで作れる技量もなく、世界中を旅しながら(ネットだけど)CSSテンプレート探しまわり、そのテンプレートに合う html を吐き出すようにしました。

 wordpressのテーマとして作っているので、wp_nav_menu()で普通に出力しても、求めている htmlコード にはならず、困った困ったと、フックをかけて何とかしてやろうと、処理方法を探しまわったところ「カスタムウォーカー機能」という、高いレベルで htmlコード をカスタマイズ出来ることが分かりました。

 使い方はくせがあるように思いますが、結果的にはそうでもなかったので、メモとして残しておきます。

 まず、呼び出し方

 wp_nav_menu 関数の引数 array に walker というキーを追加し、Walker_Nav_Menu を継承した cs_walker_nav_menu というクラスを new します。

 さて、 s_walker_nav_menu とはなんぞやという話になりますのでコードを貼り付けます。

 cs_walker_nav_menu クラスは 5つのメソッドから構成しています。そのうち4つは、Walker_Nav_Menu クラスのメソッドをオーバーライドして乗っ取ります。

  • function start_lvl ()
  • function end_lvl ()
  • function start_el ()
  • function end_el ()

 lvl は level の略で階層の事を意味します。1段目の階層には反応せず、2段目の階層を出力する時から反応します。

  • start_lvl では <ul> を出力するが一般的です。
  • end_lvl では </ul> を出力するが一般的です。

 一方 el は elemnt の略で要素の事を意味します。この場合だとメニュー項目ごとに反応します。

  • start_el では <li><a href=”#”>xxx</a> を出力するが一般的です。
  • end_el では </li> を出力するが一般的です。

 この一般的な出力を変更することで、自在に htmlコード を操ることが出来ます。

 今回行ったの、階層を出力する start_lvl と end_lvl を使わずに、 start_el と end_el で子の階層を持っているか判断し、出力するというものです。

 start_el と end_el の引数である $item がかなり有効で var_dump して内容を確認しておくことをお勧めいたします。

 この $item に classes というキーがあり、子持ちの要素の場合は、”menu-item-has-children” という文字列が格納されます。子持ちじゃない場合は格納されていません。

 それを利用すれば、 start_lvl と end_lvl を使用しなくても階層処理は可能です。特に今回は <ul> の前後に htmlタグ を挿入するだけでなく、ユニークな id を付ける必要がありましたので、 element で処理をするようにしました。

 みなさんも $item を活用して、いろいろとメニューを作ってみてくださいね。

Pocket

コメントを残す

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


*