【「BusinessPress」カスタマイズ②】メニューの下に英語表記（日本語表記）などのサブタイトルを追加する方法

前回は、ワードプレスの無料テーマ「BusinessPress」のヘッダー部分のカスタマイズについてご案内させていただきました。

ワードプレス無料テーマ「BusinessPress」カスタマイズ①【ヘッダー部分のカスタマイズ】

今回は、「BusinessPress」のヘッダー部分カスタマイズの続きとして、グローバルメニューの下にサブタイトル（説明）を入れるカスタマイズを行っていきたいと思います。

Contents

グローバルメニューのサブタイトル（説明）とは

グローバルメニューのサブタイトル（説明）とは、よくメニューの文言の下に英語表記が書かれていたり、英語のメニューの下に書かれている日本語訳など、よく見かけると思います。

サイトによっては、日本人以外の人にも見てもらうためにも必要だったり、デザイン的に見栄えが良かったりします。

（メニューのサブタイトルなし）

（メニューのサブタイトルあり）

メニューのサブタイトル（説明）を使うためには

WordPressでメニューの説明を使うための設定は、ダッシュボード「外観」＞「メニュー」をクリックします。

画面の右上の「表示オプション▼」をクリック、詳細メニュー設定を表示の「説明」にチェックを入れてください。

これによって、メニュー項目に説明欄が出現しますので、ここに表示させたい文字を入力します。

テーマによってはこれだけで、このメニューの説明が使えるテーマもありますが（LightningやCocoonなど）、残念ながら「BusinessPress」では、そのままでは使えません。

今回、「BusinessPress」でも、このメニューの説明を使えるようにカスタマイズしていきます。

functions.phpの編集

ダッシュボード「外観」＞「テーマエディタ―」で、functions.phpに以下のコードを追加します。書かれているコードの後に追記すれば大丈夫です。

function prefix_nav_description( $item_output, $item, $depth, $args ) {
 if ( !empty( $item->description ) ) {
 $item_output = str_replace( '">' . $args->link_before . $item->title, '">' . $args->link_before . '<strong>' . $item->title . '</strong>' . '<span class="menu-item-description">' . $item->description . '</span>' , $item_output );
 }
 return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

functions.phpの編集は自己責任でお願いいたします。

次に、見た目を整えるために、ダッシュボード「外観」＞「カスタマイズ」＞「追加CSS」で、以下のCSSを追加します。

.menu-item-description{
	display: block;
	font-size:13px;
	line-height:15px;
	text-align:center;
	color: #888;
}

.main-navigation {
        font-size: 90%;
        line-height: 30px;
}
@media screen and (min-width:981px){
  .main-navigation div.menu > ul > li, .main-navigation ul.menu > li {
        text-align: center;
  }
}	
@media screen and (max-width:980px){
  .menu-item-description{
	text-align:left;
  }
}