【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);
  }
}

ナビゲーションラベルの下に、「説明」という項目が追加された。ここにいれた文言が表示される。

例:ナビゲーションラベル「X PEOPLE」、説明「人のインタビュー」

これで完成。