WordPress wp_nav_menu カスタマイズ

WordPressのテーマを作っていて気になることのひとつにメニューがある

基本的にWordPressのサイトではページのヘッダーあたりに横並びにメニューが並んでいることが多い

こんな風に

そして、そのソースコードにには沢山すぎる程のCSSクラスやidが自動的に付与される。

3.0からこのwp_nav_menuテンプレートタグが利用できるようになりいろんな場所にそれぞれ違ったメニューを表示させることが出来る様になり便利なのだが（多様なカスタマイズに対応させるために必要そうなクラスidを付けているのだろう）少しウザイほど。

上手にこのルール構造を理解すれば、かなりの応用が可能だが、さほど必要ない事の方が今までも多い。

今回のテーマ作成ではこういった感じに並べたいと思っている

HTMLで書けば

<nav class="xxxxxxx">
 <ul>
 <li><a href="index.html" class="xxxxxx">Home</a></li>
 <li><a href="about.html">About</a></li>
 </ul>
 <ul>
 <li><a href="works.html">Works</a></li>
 <li><a href="services.html">Services</a></li>
 </ul>
 <ul>
 <li><a href="blog.html">Blog</a></li>
 <li><a href="contact.html">Contact</a></li>
 </ul>
 </nav>

これをWordPressのなにもしないwp_nav_menuに任せると

<nav id="access" role="navigation">
 <h3 class="assistive-text">メインメニュー</h3>
 <div class="skip-link"><a class="assistive-text" href="#content" title="メインコンテンツへ移動">メインコンテンツへ移動</a></div>
 <div class="skip-link"><a class="assistive-text" href="#secondary" title="サブコンテンツへ移動">サブコンテンツへ移動</a></div>
 <div class="menu-topnav1-container"><ul id="menu-topnav1" class="menu"><li id="menu-item-1405" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1405"><a href="http://xxxxx/">Home</a></li>
<li id="menu-item-1409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1409"><a href="http://xxxxx/about/">About</a></li>
<li id="menu-item-1410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1410"><a href="http:/xxxxx/works/">Works</a></li>
<li id="menu-item-1411" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1411"><a href="http://xxxxx/services/">Services</a></li>
<li id="menu-item-1404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1404"><a href="http://xxxxx/blog/">Blog</a></li>
<li id="menu-item-1412" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1412"><a href="http://xxxxx/contact/">Contact</a></li>
</ul></div> </nav>

こういう感じのソースコードが挿入される。

少しばかり目障り。

先ずは今回ではサイト全体で必要の無い class , id を一括消してしまう事にします。

wp_nav_menuのHTML出力をシンプルにする

調べ回って拾ってきた以下のコードを functions.php に追加

/*カスタムメニューのIDやクラスを簡略化*/
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
 return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

これで、アクティブなページの<li>のid=current-menu-item が表示されるシンプルな以下のコードに書き替えられる

<div class="menu-topnav1-container"><ul id="menu-topnav1" class="menu"><li class="current-menu-item"><a href="http://xxxxxx/">Home</a></li>
<li><a href="http://xxxxxx/about/">About</a></li>
<li><a href="http://xxxxxx/works/">Works</a></li>
<li><a href="http://xxxxxx/services/">Services</a></li>
<li><a href="http://xxxxxx/blog/">Blog</a></li>
<li><a href="http://xxxxxx/contact/">Contact</a></li>
</ul></div>

**current-menu-item の表示文字列を変えてみたかったのだが、どうやらこれは予約語か別のコアファイルで決められたテキストなのかもしれない、簡単に変更はできなかった。
そこまでこだわる必要もないので深くは調べていません、ご存知の方是非ともお教えいただけるとうれしいです。

後は希望するコードを出力してくれるようにwp_nav_menuをここを見ながら調整します

引用すると

<?php wp_nav_menu($args); ?>
<?php

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);

wp_nav_menu( $defaults );

?>

 
ということなので

'container' => 'nav',
'container_class' => 'xxxxxxx',
'container_id' => '',
'items_wrap' => '<ul>%3$s</ul>',

これらを指示

 <?php wp_nav_menu( array( 
'theme_location'=>'menuの名前', 
'container' =>'nav',  
'container_class' => 'xxxxxxx', 
'items_wrap' =>'<ul>%3$s</ul>'));?>

コードは以下の様になりました。

<nav class><ul><li class="current-menu-item"><a href="http://xxxxxx/">Home</a></li>
 <li><a href="http://xxxxxx/about/">About</a></li>
 <li><a href="http://xxxxxx/works/">Works</a></li>
 <li><a href="http://xxxxxx/services/">Services</a></li>
 <li><a href="http://xxxxxx/blog/">Blog</a></li>
 <li><a href="http://xxxxxx/contact/">Contact</a></li> </ul></div>

今回のテーマとしては

メニューを2行3列に組み直す為に必要なのは <li> タグが２つ毎に<ul>タグでくくらないといけないのです。

リストタグにだけ希望するクラスかidを付加することが出来る方法を探しています。

かなり面倒な処理をしないといけないかも知れません、簡単な方法が見つからないのと今後変更するかもしれないので、とりあえずはメニューを3つ作って列ごとに分けて出力させるように対処。

今後もっと良い方法がわかり次第投稿することとします。