WordPressのメニューシステムには、メニュー項目に説明を追加できる組み込み機能があります。ただし、この機能はデフォルトでは非表示になっています。有効にしても、コードを追加しないと表示はサポートされません。ほとんどのテーマは、メニュー項目の説明を考慮して設計されていません。この記事では、WordPressでメニューの説明を有効にする方法と、WordPressテーマにメニューの説明を追加する方法を説明します。
注意：このチュートリアルでは、HTML、CSS、およびWordPressテーマ開発に関する十分な理解が必要です。
メニューの説明を追加したいのはいつ、なぜですか？
一部のユーザーは、メニューの説明を追加するとSEOに役立つと考えています。しかし、それらを使用したい主な理由は、サイトでのユーザーエクスペリエンスを向上させるためだと考えています。
説明文は、訪問者にメニュー項目をクリックした場合に見つかるものを伝えるために使用できます。魅力的な説明は、より多くのユーザーをメニュークリックに引き付けます。
ステップ1：メニューの説明をオンにする
外観 » メニューに移動します。ページの右上にあるスクリーンオプションボタンをクリックします。説明ボックスをチェックします。
これにより、メニュー項目に説明フィールドが有効になります。次のようになります。
これで、WordPress メニューの項目にメニューの説明を追加できるようになりました。ただし、これらの説明はまだテーマには表示されません。メニューの説明を表示するには、コードを追加する必要があります。
ステップ 2: ウォーカークラスを追加する:
Walkerクラスは、WordPressの既存のクラスを拡張します。基本的に、メニュー項目の説明を表示するためのコード行を追加するだけです。このコードをテーマのfunctions.phpファイルに追加してください。
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
ステップ3.wp_nav_menuでWalkerを有効にする
WordPressのテーマでは、メニューを表示するためにwp_nav_menu()関数を使用します。また、WordPressテーマにカスタムナビゲーションメニューを追加する方法についての初心者向けチュートリアルも公開しています。ほとんどのWordPressテーマでは、メニューはheader.phpテンプレートに追加されます。ただし、テーマによってはメニューを表示するために別のテンプレートファイルを使用している可能性もあります。
ここで、テーマ内の wp_nav_menu() 関数（おそらく header.php にあります）を見つけて、次のように変更する必要があります。
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
最初の行では、functions.php で以前に定義したウォーカークラスを使用するように $walker を設定します。コードの2行目では、既存の wp_nav_menu 引数に追加する必要がある唯一の追加引数は 'walker' => $walker です。
ステップ4.説明のスタイル設定
先ほど追加したwalkerクラスは、このコード行でアイテムの説明を表示します。
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
上記のコードは、
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
サイトでの説明文の表示方法を変更するには、テーマのスタイルシートにCSSを追加できます。Twenty Twelveでこれをテストし、このCSSを使用しました。
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
この記事がお役に立ち、テーマでメニューの説明を使用してクールなメニューを作成するのに役立つことを願っています。質問がありますか？下のコメントに書き込んでください。
追加リソース
特定のWordPressメニューにカスタム項目を追加する方法
Bill Erickson氏の説明付きメニュークラス
Matthew Blaxton
PHP 8.0 以降では、これは重大なエラーを引き起こします。
この行を見つける必要があります:
function start_el( $output, $item, $depth, $args ) {
その行を次のように変更すると、エラーが解消されるはずです。
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
WPBeginnerサポート
PHP 8を使用している方のために共有していただきありがとうございます。
管理者
ノーマン
こんにちは、
説明もクリック可能にするにはどうすればよいですか？
WPBeginnerサポート
We cover that in step 4
管理者
kayvan A.Gilani
WordPressテーマにメニューの説明を追加するために、このブログのステップ1と2を実行しましたが、ステップ3で進め方がわからず、全体の変更ができませんでした。
WPBeginnerサポート
テーマに機能が見つからない場合は、特定のテーマのサポートに連絡することをお勧めします。彼らが支援できるはずです。
管理者
イアニス
こんにちは、
Max Mega Menuで製品カテゴリの説明を無効にする方法は？
すでにMega Menu > General Settingsに移動し、Menu Item Descriptionsを無効に設定しましたが、問題は解決しません。
WPBeginnerサポート
プラグインのサポートに連絡すれば、設定が正しく機能しないことについて支援を得られるでしょう。
管理者
セルジオ
ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
ランカ
本当にありがとうございます、助かりました
JKLYN
ありがとう。時間を節約できました。
ダン
これはWP_Bootstrap_Navwalkerで機能しますか？
試してみたところ、サイトが壊れてしまいました…
kalpana
本当にありがとうございます…私にとって非常に役立ちました…一日を救ってくれました
Steven
モバイルレイアウトで説明をオフにする方法は？
Anzani Zahrani
こんにちは..助けてください..
タイトルカテゴリの説明を使用せずに、タイトルカテゴリを追加するにはどうすればよいですか？
Ido Schacham
とても参考になりました、ありがとう！
ラフマン
素晴らしいヒントですが、メニューの説明では HTML タグがサポートされていません。誰か知っていますか？
ありがとう
イリーナ
皆さん、こんにちは。
説明にHTMLタグを許可する方法についてのアイデアはありますか？
remove_filter(‘nav_menu_description’, ‘strip_tags’);
これは私には機能しません。
ダミアン・カーベリー
@Iryna様: コードをどこかに投稿していただけますか？例えば pastebin.com などです。
remove_filter() を呼び出す場所によって、それが機能するかどうかが決まります。add_filter() の呼び出し後に呼び出す必要があります。
wp_nav_menu() の呼び出しの直前に呼び出すとうまくいくかもしれません。
Max
説明がハイパーリンクにならないようにする方法はありますか？
Ashok
ありがとう…うまくいきました。しかし、メニューの説明ではHTMLタグはサポートされていません。
igorasas
すでにプラグインできる状態で用意されている可能性はありますか？このハックは「Twenty TwelveVersion: 1.5」というテーマでどのように機能しますか？
そして、プラグインのwpmlの場合と同様ですか？
ガイ
ヒントをありがとう
Phong
ありがとうございます。これをコピー＆ペーストするだけで、すぐに全体像を把握できるので非常に役立ちました。
チャド
おい、functions.phpにwalkerクラスを追加したんだけど、genesisテーマでwp_nav_menuが見つからないんだ。何が足りないんだろう？次に何をすればいいのか全く分からないよ！？！？
Ksenia
とてもよく説明してくれます – 詳細で明確です。1分とメニュー項目の説明は大丈夫です。ありがとうございます！
メアリー・アン
このチュートリアルを本当にありがとうございます。私に勧められ、変更したい変更を加えるのに完璧に機能しました。しかし、これらの変更を加える際に、ドロップダウンサブアイテムメニューを失いました。コードの変更で何が影響したか何かアイデアはありますか？
お時間とチュートリアルをありがとうございます
WPBeginnerサポート
CSS の問題のようです。より具体的にアドバイスできず申し訳ありません。Google Chrome の開発者ツールを使用してデバッグしてみてください。
管理者
Paul Renault
メニューの説明を実装しましたが、うまくいきました。今、クライアントが説明の中に改行を求めています。管理画面から説明フィールドに改行や <br> タグを挿入しようとしましたが、フロントエンドに表示されません。WP がこれらの編集を削除します。これを解決する方法はありますか？
WPBeginnerサポート
クライアントが単にスペースを求めているのであれば、CSS を使用できます。
管理者
Paul Renault
クライアントは改行を求めています。説明に <br> タグを挿入する方法はありますか？今挿入しても削除されてしまいます。
バリー
素晴らしいチュートリアルです、カスタムメニューウィジェットで表示されるカスタムメニューにこれを実装する方法を知りたいだけです。
オリヤン・コンサルティング
ありがとうございます！WordPressを長年使っていますが、こんな機能があるとは知りませんでした。作業中のサイトで説明文が非常に冗長だったので、削除したいと思っていました。どこから来ているのか、あらゆる場所を探しました。
なんて素晴らしい！
sambassador
機能します！
ただし、PHP 5.4の場合は、start_el関数のwp walker引数を一致させる必要があります。
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
そして、$itemを$objectに置換します。
スティーブ・コベロ
最高です!!完璧に機能しました。
ケビン・ギルバート
完璧です。サイトの仕上げに必要なものでした。CSS でいくつか問題がありましたが、最終的に解決して動作させることができました。素晴らしい記事をありがとうございます。
Jon
素晴らしいヒントです。完璧に機能しました！
Jedediah White
これは私にとって完璧に機能しました。クラス関数も完璧です。本当にありがとう！
Pankaj
同じものを作成する必要があり、完全に途方に暮れていました。
この問題を解決するために、いくつか馬鹿げたことをしようと考えていました。
この投稿を見つけて、時間とストレスを節約できて本当に良かったです！
このサイトが大好きです。たくさんのことを知ることができました。
ここで最も簡単なことを示してくれて、本当にありがとうございます。
Pankaj
サブメニューにもspanタグが表示されます。
そこには表示されていませんが、かなりのスペースを占めているため、非常に奇妙に見えます。
同じことに対する回避策はありますか？
DiTesco
これは本当に素晴らしいチュートリアルです。Thesis 1.8.5 でも機能するかどうか疑問に思っています。もしそうでない場合は、提供していただけると幸いです。きっと皆さんに広めるお手伝いをします。いいね！
スヴェト
チュートリアルに従ってメニューに説明を追加しました。ありがとうございます！しかし、モバイルモードではメニューがドロップダウンメニューに変換され、メニュータイトルと説明が接続されてしまいます。たとえば、メニュー項目が「about」で説明が「more about me」の場合、モバイルバージョンでは「aboutmore about me」と表示されます。これを修正する方法はありますか？
デビッド
同じ問題を抱えていました。私がやったことは次のとおりです。
これを変更しました：
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
これに:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
最善の解決策かどうかはわかりませんが、私にはうまくいきました。
Garrett Hyder
皆さん、ありがとう。SVETとDAVIDがモバイルメニューで行ったことに遭遇しました。
コードは私の変更を、ダッシュ区切り文字を持つspanを追加しただけで、デスクトップクエリでは不要だったので単純に抑制しました。
$item_output .= ‘ – ‘;
デスクトップのみのクエリ内で、spanをdisplay:noneに設定します。
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
お役に立てば幸いです。私の問題をうまく解決しました。
ニコラ
素晴らしい投稿です – 非常に明確で、まさに必要としていたもので、完璧に機能しました。ありがとうございます！
Samedi Amba
素晴らしいチュートリアルをありがとうございます。主要なステップはうまく完了しました。ご覧の通り、
http://ueab.ac.ke/demo/index
メインメニューのラベルと説明の間のスペースを減らすにはどうすればよいですか？スタイリングに困っています。ご協力いただけると幸いです。
編集スタッフ
これは、テーマの.menu aクラスのline-heightに関連しています。これを減らすと、間隔も縮小されます。
管理者
Chris Rouse
素晴らしい投稿です。以前にもこの件を調べようとしましたが、以前の指示はこれほどわかりやすくありませんでした。functions.phpコードをドロップし、ヘッダーファイルでウォーカークラスを変更する方法を理解し（使用しているテーマでは異なりますが、簡単です）、約15分で開始から終了まで完了できました。
追加したい点として、:last-childプロパティを使用して最後のメニュー項目に右の境界線を含める方法があります。
.menu-item:last-child { border-right: 1px solid #ccc; }
ダミアン・カーベリー
Walker_Nav_Menu を拡張する代わりに、フィルターが提供されていれば（そしてより簡単に）良いでしょう。例えば、
コアコードに以下のようなものがあれば：
$item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
その場合、カスタムフィルター関数は次のようになります。
return ” . $description . ”;
Cathy Earle
素晴らしい情報です…自分のサイトにも追加し始めます。ありがとうございます！