メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う

WordPressのメニューを制御する「wp_nav_menu」。
グローバルメニューやサイドメニューなどで使う関数で、管理画面の「メニュー」で登録した内容をhtmlとして出力してくれます。

出力されるメニューは、

<ul id="xx" class="xx">
  <li id="xx" class="xx">
    <a href="/menu1/">メニュー1</a>
    <ul id="xx" class="xx">
      <li id="xx" class="xx">
        <a href="/menu1/menu1-child1/">子メニュー1</a>
      </li>
    </ul>
  </li>
</ul>

たとえば階層構造があると上のような感じになります。リンクのaタグはliで囲われているだけですが、メニューを関数一つで出力してくれるので楽チンですね。
だいたいのクライアントさんはこれで通ります。
　
ところが、SEOにこだわるクライアントさんなどになると、「これでは満足できない！上位階層メニューにはh4タグを付けて欲しい！」などと上位階層にhタグをつけるよう要求されたりします。
　
そこで今回はその方法のご紹介です。

テーマの functions.php に次の記述を追記しましょう。

class custom_walker_side_menu extends Walker_Nav_Menu {

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        $id = 'menu-item-' . $item->ID;
        $css_classes = '';
        foreach ($classes as $class){
            $css_classes .= $class.' ';
        }

        if($depth == 0){ //第一階層のときにh4タグを付ける
            $output .= '<li id="'.$id.'" class="'.$css_classes.'"><h4><a href="'.$item->url.'">'.$item->title.'</a></h4>';
        }else{ //第一階層以外は通常通り
            $output .= '<li id="'.$id.'" class="'.$css_classes.'"><a href="'.$item->url.'">'.$item->title.'</a>';
        }

    }

}

　
これで関数部は完成です。
　
あとは、メニューを出力したい箇所で、次のように wp_nav_menu に ‘walker’ 引数として上述したクラスのインスタンスを渡してあげれば完了です。

<?php wp_nav_menu( array('menu'  => 'side-menu', 'walker'  => new custom_walker_side_menu ) );
// "side-menu" はメニュー名
 ?>

　
出力されるhtmlは以下の通りリンクテキストをhタグで囲った形になります。
　

<ul id="xx" class="xx">
  <li id="xx" class="xx">
    <h4><a href="/menu1/">メニュー1</a></h4>
    <ul id="xx" class="xx">
      <li id="xx" class="xx">
        <a href="/menu1/menu1-child1/">子メニュー1</a>
      </li>
    </ul>
  </li>
</ul>

　
小さな事かもしれませんが、このような細かい部分でもSEOにこだわって他サイトに勝てるサイトを制作することができれば、クライアントの評価も上がることでしょう。

---