メニューの上下・二段階表示を実装するカスタマイズ
下記三つを実行
- 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」、説明「人のインタビュー」
これで完成。