グローバルナビに英語と日本語の両方を表示する方法

WordPressでメニューを作成したけれど、日本語だけではなく英語も縦並びで入れたいとき（下画像のようなイメージ）の方法をご紹介します。いくつか方法はありますが、初心者にオススメなのは「説明」という項目を利用する方法です。

WordPressの標準機能にある「外観」＞「メニュー」に、「説明」という項目を入力できる欄があります。この説明に、説明や補足情報を入力することで、HTMLの「data-desc属性」として出力する記述を追記し、CSSの疑似要素（::after）などと組み合わせて表示することができます。今回は説明文ではなく、この説明欄に「英語（TopやRoom）」などを入力しサイト上に表示する流れになります。

data-desc属性とは？

data-desc属性とは、HTMLのdata-●●●属性のひとつで、“カスタムデータ属性”と呼ばれて、特定の要素（ナビゲーションメニューのリンクなど）に、補足情報や説明文を埋め込んでおくために使用されます

JavaScriptと組み合わせると、ボタンや画像リンクなどのa要素に「data-desc=”〇〇〇の説明”」のように設定し、JavaScriptを使って、マウスホバー時やクリック時にその値を取得し、モーダルウィンドウを表示させたりツールチップのテキスト書き換えたりすることができます。

メニュー項目の「説明」に英語を入力する

メニューを作成する際に「ナビゲーションラベル」の入力欄の下に「説明」という入力項目があります。もし、説明の欄が表示されていない場合は、管理画面の「表示オプション」から「説明」にチェックを入れてみてください。

例えばメニューの中に「トップ」という名前のカスタムリンクを追加した場合「トップ」をクリックして開き「説明」の欄に「Top」と入力をします。

とりあえず、こちらで下準備は完了しましたが、このままでは「Top」という英語は表示されません。先程入力した「説明」という項目をサイト上に表示するための「phpコード」を「functions.php」に追記する必要があります。

サイト上に「説明」を表示するためのコードを追記

WordPressテーマの「functions.php」に以下のコードを追記します。

functions.php

フィルターフックの「nav_menu_link_attributes」という機能を使い、メニュー項目のリンク「a要素」の属性を変更（カスタマイズ）することができるので「説明」属性を追加します。

// ---------グローバルナビの説明文を有効にして2行目に英語名を表記する-------------
function edit_menu_link( $atts, $item) {
  // メニュー項目が「説明」を持っている場合
  if(!empty( $item->description )){
    // リンクにdata-desc属性を追加する
    $atts['data-desc'] = $item->description;
  }
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'edit_menu_link', 10, 2 );

style.css

テキストのサイズや色、上下の余白などはCSSで調整することができます。説明の英語は疑似要素（::after）の「content」の値として「attr(data-desc);」を指定することで表示されるようになります。疑似要素の「::after」は「::before」でも問題ないので好きな方を使ってOKです。

attr()関数

attr()関数を利用すると、data-desc属性に記述したテキストをそのままサイト上に表示させることができます。

/* グローバルナビに英語表記を追記 */
.menu-item a::after {
  content: attr(data-desc);
  display:block;
  color:#fff;
  font-size:12px;
  padding-top:8px;
  line-height: 1.0em;
  text-align: center;
}

実際にサイト上で確認し以下のように英語が表示されていればOKです。

▼別のCSSの記述の仕方

メニューリンクである「.menu-item」に[data-desc]が入力されている場合のみ、（data-desc）を画面上に出力するという指定になります。

/* data-desc属性がある場合のみ特定のスタイルを適用 */
.menu-item[data-desc]::after {
  content: attr(data-desc);
  display:block;
  color:#fff;
  font-size:12px;
  padding-top:8px;
  line-height: 1.0em;
  text-align: center;
}