当サイトのメニューは、ローマ字で項目を大きく表示して、ふりがなをキャプションとして、日本語で小さく表示しています。今回は、グローバルメニューに説明をキャプションとして、わかりやすく表示する方法を紹介します。
コード
functions.phpに、下記コードを入力します。
add_theme_support( 'menus' );
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus(
array(
'header-menu' => 'Header Menu',
)
);
}
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 . '<strong>' . $item->title . '</strong>' . '<span class="menu-item-description">' . $item->description . '</span>' , $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );メニューを表示したい場所に、下記コードを入力します。
<ul class="menu">
<?php wp_nav_menu( array(
'theme_location'=>'place_global',
'container' => '',
'menu_class' => 'sub-caption',
'link_before' => '<div>',
'link_after' => '</div>',
'items_wrap' => '<ul>%3$s</ul>',
));?>
</ul>確認
左サイドメニューの外観＞メニューをクリックし、メニュー設定画面が表示します。上の表示オプションをクリックして、詳細メニュー設定を表示＞説明にチェックを入れます。メニュー構造のメニュー項目をクリックすると、説明が表示されます。ここに、キャプションを入力し、メニューを保存をクリックます。プレビューで確認します。
外観＞メニューをクリック
詳細メニュー設定を表示＞説明にチェック
説明に、キャプションを入力
プレビューで確認
以上で、今回の説明は終了です。キャプションがメニューの説明になるので、訪問者にわかりやすいですね。また、キャプションがあることで、メニューデザインの幅が広がります。
