今さらですがWordPressのカスタムメニューについての備忘録です。
便利なのは知りつつもほとんどテンプレートにURLを直接記述したり、見栄えも画像を使ったりが多いのであまり使うことがないんですが、久しぶりに使ってみようとしたらいろいろと忘れていたので復習を兼ねて。

紹介している内容はWordPress Ver 3.5.1で試したものです。

導入方法

自作テーマ等の場合はまずカスタムメニューの機能を実装する必要があり、カスタムメニューを実装するためには下記のコードをfunctions.phpに記述します。

functions.php
add_theme_support( 'menus' );

上記記述後に管理画面の「外観」を確認すると新たに「メニュー」という項目が追加され、ここでいろいろと設定をすればカスタムメニューを表示することができます。

メニューを表示したい箇所には下記を記述することで表示されるようになります。

<?php wp_nav_menu(); ?>

上記を記述した場合はタグやクラスなどがデフォルトのもので出力されますが、それらを変更したいときなどはパラメータを用いて変更します。
また、カスタムメニューはいくつか作成することができるのですが、「このページにはこのメニューを使いたい」というときもパラメータで指定することができます。
例えば、使用するメニューを指定してデフォルトでulが括られているdivをなくしたい場合は下記のように記述します。

<?php wp_nav_menu( array( 'menu' => 'Menu Name', 'container' => '' ) ); ?>

メニューの指定はサンプルコードで'menu' => 'Menu Name'に設定したメニュー名を記述することで表示されるようになり、括られているタグを変更したい場合は'container'を用います。
今回はタグ自体をなくしたいので空にしていますが、他のタグへに変更したい場合はここに記述することで変更されます。

パラメータは他にも幾つかあり、各要素のクラス名を変更する$container_id$menu_class、リンクの前後にテキストを表示する$link_before$link_afterなどがあります。
その他のパラメータについてはCodexで確認できます。

基本的な使い方

「外観」の「メニュー」を選択すると画像のような画面が表示され、ここでいろいろと設定を行います。

メニュー設定画面のイメージ

左側でリンクの設定やメニューをどこへ表示したいかなどを設定し、右側ではナビゲーションのラベルや属性などの値を変更したり、ドラッグでナビの移動や入れ子の設定などを行います。
また、複数のメニューを作成している場合はメニューの名前の項目上にあるようにタブが表示されているので、ここで切り替えて別のメニューを変更(画像では「test01」と「test02」というメニューが作成されている状態)したり、新たなメニューを追加したい場合はその横の「+(プラス)」タブで新たに作成できます。

メニューの順番入れ替えをする様子のイメージ

メニューの順番を変えたいとか、入れ子にしたい場合はドラッグで簡単に移動して設定することができます。
入れ子にしたい場合は画像のように少し右にずらすようにすれば設定できます。

メニューの詳細設定部分のイメージ

各メニューの詳細を変更したい場合は、メニュー右にある下矢印をクリックすればいろいろと項目が出てくるので、ここでラベルやタイトル属性などを変更します。
画像は全ての項目を表示させたところをキャプチャしたものですが、必要ない項目があるなら「表示オプション」の中で表示・非表示を設定できます。

ここでひと通り設定をすれば、先程<?php wp_nav_menu(); ?>を記述したところに意図した形でメニューが表示されると思います。
メニューを複数作成している場合は$menuがちゃんと指定されているかを確認してください。

idやclassをスッキリさせる

wp_nav_menu()を使うとメニュー内で使用しているタグに様々なidやclassがつき、例えば現在見ているページのメニューにはcurrent_page_itemがついたり、各ページスラッグが入ったmenu-item-xxxxxxはスラッグ)など大体5つぐらい記述されています。

これらのclassを使って各メニューの見栄えを変えたりできるので便利は便利なのですが、ここまで沢山いらない場合や出力されるソースを綺麗にしたいと思う場合は、下記をfunctions.phpに記述することでシンプルにできます。

functions.php
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' ) ) : '';
}

上記を記述することで現在見ているページのメニューにcurrent-menu-itemというクラスが付加される以外は、すべてのidやclassが消えた状態でソースが出力されるようになります。

サブタイトル付きのメニューを表示する

よく見かける日本語は大きく表示させて、英語でサブタイトルつけるみたいなメニューを実装する方法です。
下記をfunctions.phpに記述します。

functions.php
add_filter( 'walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4 );
function description_in_nav_menu($item_output, $item){
  return preg_replace( '/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->attr_title}</span><", $item_output );
}

上記を記述後、メニュー設定で「タイトルの属性」に入力した文字がspanタグで括られて表示されるようになります。
「タイトルの属性」ではなくて「説明」を利用して実装したい場合は、$item->attr_titleとなっている部分を$item->descriptionに変更すれば「説明」に入力したものが出力されるようになります。
両方とも使いたければどちらも記述すれば出力されます。

サブタイトル付きのメニューの表示イメージ

イメージはサンプルで作成したメニューのキャプチャです。
ホームやサンプル01という文字は設定時に「ナビゲーションラベル」に入力したもの、Homeやexample01という文字は「タイトルの属性」に入力したものが表示されています。