wordpressのメニューを2行にする方法

WordPressダッシュボードの「外観→メニュー」を開き、画面右上の「表示オプション」を選択する。

表示オプション

表示オプションの中の「説明」にチェックを入れる。各メニューの設定を開くと「説明」の項目が追加されているので、ここに2行目に表示したい内容を記載。1行目にはナビゲーションラベルの内容が表示される。

 

functions.phpを編集する

functions.phpに以下記述を追記。


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' . "
{$item->description}<", $item_output);
}

3行目が、通常のナビゲーションラベルに改行と説明(
{$item->description}の部分)の表記。

 

style.cssを編集する

2行表示はできたので、見え方を調整。


.main-navigation li a {
color: #303030; /* 文字色 */
line-height: 16px; /* 高さ */
font-size: 13px; /* 文字の大きさ */
text-align: center; /* 中央揃え */
text-transform: none; /* 大文字小文字の強制解除 */
}
/* 1行目のカーソルオーバー時の設定 */
.main-navigation li a:hover{
color: #7a8285;
}
/* 2行目の設定 */
.main-navigation li a span {
font-size:10px;
color: #7a8285;
}