テクニカルノート

ナビゲーションメニューバーにメニュー名だけではく、英語で書き添えしたりしているこれのやり方です。

メニューに説明文を入力する説明欄は、外観→メニューの表示オプションで、□説明　にチェックをつけると表示されるようになります。
 

すると、こんな感じで説明を入れられるようになります。

ただ、デフォルトでは説明はメモ扱いで、なにを入力しても表示はされません。 そこで、入力した説明をナビゲーションメニューに表示させる方法を。

1. 1.出力されたメニューアイテムの文字列を置換する方法（フィルターフック）
2. 2.ナビゲーションメニューの生成プログラムを上書きしてしまう方法（Walker_Nav_Menuクラスの関数start_elをオーバーライド）

の2つ、備忘録を兼ねて紹介します。

ナビゲーションメニューを利用できるようにする

そもそも、ナビゲーションメニューが利用できるようになっている必要があります。 もし、利用できるようになっていなければ、次のコードをfunction.phpに入れます。

add_theme_support( 'menus' );
if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
          'header-menu' => 'Header Menu',
        )
    );
}

で、header.phpに、

'header-menu',
 'container' => '',
 'menu_class' => 'nav',
 'link_before' => '
',
 'link_after' => '
',
 'items_wrap' => '

%3$s

と入れておきます。    

出力されたメニューアイテムの文字列を置換する方法（フィルターフック）

次のコードをfunction.phpに入れます。

function prefix_nav_description( $item_output, $item, $depth, $args ) {
 if ( !empty( $item->description ) ) {
 $item_output = str_replace( '">' . $args->link_before . $item->title, '">' . $args->link_before . '' . $item->title . '' . '' . $item->description . '' , $item_output );
 }
 return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

これで、メニュータイトルにタグで囲み、説目の部分はで囲まれて出力されるようになります。 なにやらごちゃごちゃやってますが、やっていることはシンプルで、str_replaceでもとの文字列からタグと説明付きの文字列に置換しているだけ。シンプルです。 参考にしたサイトさん：http://themefoundation.com/menu-item-descriptions/

ナビゲーションメニューの生成プログラムを上書きしてしまう方法（Walker_Nav_Menuクラスの関数start_elをオーバーライド）

もう一つの方法です。フィルターフックを使うのではなく、ナビゲーション・メニューを生成している関数をオーバーライドします。 オーバーライドというのは、プログラムそのものを一時的に上書きしてしまうんですが、まずは以下のコードをfunction.phpに追加します。

class description_walker extends Walker_Nav_Menu
{
 function start_el(&$output, $item, $depth, $args)
 {
 global $wp_query;
 $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
 $class_names = $value = '';
 $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
 $class_names = ' class="'. esc_attr( $class_names ) . '"';
 $output .= $indent . '

$prepend = '';
$append = '';

$description = ! empty( $item->description ) ? ''.esc_attr( $item->description ).'' : '';

'header-menu',
 'container' => '',
 'menu_class' => 'nav',
 'link_before' => '
',
 'link_after' => '
',
 'items_wrap' => '

'header-menu',
 'container' => '',
 'menu_class' => 'nav',
 'link_before' => '
',
 'link_after' => '
',
 'items_wrap' => '

.nav {
 overflow: auto;
 float: right;
 width: 840px;
 padding: 0 ;
 }
 .nav ul, .nav li {
 list-style: none;
 }
 .nav .menu-item a {
 float: left;
 display: block;
 height: 80px;
 width: 150px;
 padding: 0 10px 0 0;
 text-align: center;
 line-height: 1.2;
 }
 .nav .menu-item a strong{
 font-size: 1.05em;
 margin-top: 40px;
 margin-bottom: 0;
 padding: 0;
 display: block;
 }
 .nav .menu-item a span
 {
 display: block;
 font-size: 80%;
 color: red;
 }