ワードプレスのナビゲーションメニューに説明文を表示する方法【画像付きで解説】

投稿日:2022年01月08日（最終更新日:2022年02月14日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

ナビゲーションメニューの説明文とは？

ワードプレスにはじめから備わっているメニューの説明文の機能を利用すれば、以下の画像のようなホームページでよく目にするメニュー項目の下に、英語表記を表示させるというデザインが簡単に実現できます。

このページではワードプレスのナビゲーションメニューの説明文機能の使い方を解説します。ナビゲーションメニュー自体の使い方や作成方法、カスタマイズ方法に関しては以下の記事をご確認下さい。

ナビゲーションメニューとは、WEBサイトにおいてお問い合わせなど主要ページへのリンクをまとめたメニューのことを指します。ワードプレスに標準的に備わっている機能を使ってナビゲーションメニューを作成する方法をご説明します。...【もっと読む】

ワードプレスのデフォルトの状態では、説明文の入力欄は隠された状態になっています。まずは、入力欄を表示させましょう。

ナビゲーションメニュー画面の右上の「表示オプション」をクリックします。

表示オプション項目が表示されますので、「説明文」にチェックを入れます。

再び、ナビゲーションメニュー画面のメニュー項目を確認すると「説明文」の入力欄が追加されています。

今回は、英語表記を入力していきます。

入力欄を表示させただけではサイト上には何も表示されません。説明文が不要な部分は空欄のままにしておけば大丈夫です。

入力が完了したら、右下の「保存」を押します。サイトを確認すると英語表記が追加されました。

「説明文」には「menu-item-description」というクラスが付与されていますのでCSSで自由にカスタマイズしましょう。

CSS

header .menu-item-description span{
    font-size:12px !important;
    color:blue;
}

プレビュー

メニューのアクセントにもなりますので、デザインする際のアイデアの一つとして取り入れてみてください。