Walker_Nav_Menuを使ってwordpressのメニュータグをカスタマイズする方法

wordpressにはwp_nav_menu()を使ってグローバルナビやフッターナビに表示する項目を出力することができますが、出力するコードの構造には制限があります。
今回はこれをカスタマイズし子階層のあるメニューやコードのカスタマイズを可能にするWalker_Nav_Menuについて紹介します。

Walker_Nav_Menuの呼び出し方

wp_nav_menu関数に引数arrayを設定し、walkerというキーを追加して任意のクラス名をnewで指定します。

  wp_nav_menu( array(
      'theme_location'    => '設定したメニューのスラッグ',
      'container'         => '',
      'container_id'      => '',
      'container_class'      => '',
      'items_wrap'        => '<ul>%3$s</ul>',
      'walker'            => new edit_walker_nav_menu
  ));

次に呼び出すedit_walker_nav_menuクラスを定義します。
function.phpに下記を記述します。

class custom_walker_nav_menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= '<div class="nav-child"><ul class="nav-child-ul">';
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $output .= '</ul></div>';
    }
}

start_lvl、end_lvlで定義したコードが2階層目の始まりと終わりで実行されます。
具体的に出力されるコードは以下のようになります。

  <ul class="main-menu">
   <li class="menu-item menu-item-01">
    <a href="#">親メニュー</a>
     <div class="nav-child">
      <ul class="nav-child-ul">
       <li class="menu-item menu-item-02">
        <a href="#">子メニュー01</a>
       </li>
       <li class="menu-item menu-item-02">
        <a href="#">子メニュー02</a>
       </li>
       <li class="menu-item menu-item-03">
        <a href="#">子メニュー03</a>
       </li>
      </ul>
     </div>
   </li>
  </ul>

親メニューが入っているaタグの次に行から、start_lvlで定義したコードが呼び出され、管理画面で設定した子メニューの終わりにend_lvlで定義したコードが呼び出されています。

まとめ

管理画面でのメニュー編集を可能にしておくことで、クライアントのからの要望に答えやすくなったり、必要な際の編集が簡単になったりします。
効果的に導入してサイトの完成度を高めましょう。