バズ部テーマ　 ‎Xeory　base　メニューに英字などで下にサブメニューをかっこよく表示したい！

お客様のホームページを作成していて、ちょっとオシャンティーなメニューにしたいなと。
でも画像で作成したくないので、ワードプレスの機能とCSSを活用してメニューの下に英字でサブタイトルのようにしたいなと思った次第です。
こんな風に日本語メニューの下に英語で書いてあるやつですね。

まずはメニューの用意をします。
バズ部ベースの場合、管理画面左に表示されている「外観」にマウスを乗せると表示されるリストの中に「メニュー」があるのでクリックします。
ここでメニューをまず作成します。
私はメニュー名を「menu」で作成しました。

※テーマによっては下記の設定で「説明」に入力するだけで表示されるものもあります
ただバズ部さんのテーマbaseでは表示されません

【ダッシュボードでの設定】
外観→メニューでまずはメニューを作成し、表示オプションで「説明」にチェックします。
それから各メニューの下に表示させたい英字や日本語を入力します。

ダッシュボードの設定はこれだけです。

【functions.php】
下記のコードをfunctions.phpに追記する事で「説明」を表示できるようになります。
あとはスタイルを調整してあげてくださいね！

<?php
 
add_theme_support( 'menu' );
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' . "
<span>{$item->description}</span><", $item_output); } ?>

これで最初の画像のようになります♪