【Wordpress】メニュー下の説明の追加とカスタマイズ方法

メニューの上下・二段階表示を実装するカスタマイズ

下記三つを実行

functions.phpにコードを追記
cssに以下を追記
表示オプションの「説明」にチェックを入れる（チェックが入っていることを確認する）

functions.php追加コード

/*ヘッダーメニューのタイトル下に説明を表示*/
add_filter('walker_nav_menu_start_el', 'label_below_header_nav', 10, 4);
function label_below_header_nav($item_output, $item){
  return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->description}</span><", $item_output);
}
/*END ヘッダーメニューのタイトル下に説明を表示*/

CSS追記

@media screen and (min-width: 767px) {
  .desktop-nav li a {
    line-height: 17px;
    padding-top: 15px;
    text-align: center;
  }
  .desktop-nav li a span {
    font-size: 10px;
    color: rgba(0, 0, 9, 1);
  }
}