グローバルメニューに説明をキャプションとして、わかりやすく表示

2024.08.28

当サイトのメニューは、ローマ字で項目を大きく表示して、ふりがなをキャプションとして、日本語で小さく表示しています。今回は、グローバルメニューに説明をキャプションとして、わかりやすく表示する方法を紹介します。

コード

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>

確認

左サイドメニューの外観＞メニューをクリックし、メニュー設定画面が表示します。上の表示オプションをクリックして、詳細メニュー設定を表示＞説明にチェックを入れます。メニュー構造のメニュー項目をクリックすると、説明が表示されます。ここに、キャプションを入力し、メニューを保存をクリックます。プレビューで確認します。