WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

メニュータグ 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にこだわって他サイトに勝てるサイトを制作することができれば、クライアントの評価も上がることでしょう。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!