WordPressでナビゲーションメニューを編集するとき、「表示オプション」という項目があるのはご存知でしょうか。
表示オプションでは、リンク先を別タブで開く設定や、メニューにCSSクラスを加えるといった詳細なカスタマイズが可能です。
当記事では、表示オプションの各項目の使い方を、初心者の方にもわかりやすく解説します。
目次
メニューの表示オプションとは？
メニューの表示オプションとは、WordPressのダッシュボードの外観 > メニューの右上にある「表示オプション」から設定できる項目のことを指しています。
初期状態では展開していないので、クリックして項目を確認してみてください。複数のチェックボックスが用意されていることがわかります。
できること
チェックの有無で、メニューに関する以下のオプションの表示/非表示を切り替えられます。
- 表示するメニュー項目の変更
- メニューを新しいタブで開くための設定
- タイトル属性の設定
- CSSクラスを追加する設定
- リンク先との関係（XFN）の設定
- 補足説明の設定
表示オプションの各項目の解説
画面上の要素
まずは、表示オプション上部に表示されている「画面上の要素」という項目。
ここでは、表示されメニュー項目を変更できます。固定ページや投稿のほか、カスタム投稿タイプや、カテゴリー、タグなどが用意されています。
詳細メニュー設定を表示
続いて下部の「詳細メニュー設定を表示」。
ここでは、メニュー項目の詳細なカスタマイズが可能です。メニューを別タブで開いたり、個別にCSSクラスを追加できるオプションが用意されています。
左から順にそれぞれ解説します。
リンクターゲット
リンクターゲットは、メニュー項目を「新しいタブで開く」ための設定です。ここにチェックを入れると、メニュー項目に「リンクを新しいタブで開く」というオプションが表示されます。
タイトル属性
タイトル属性は、メニューにマウスホバーしたときの補足説明を表示する設定です。ここにチェックを入れると、メニュー項目に「タイトル属性」というオプションが表示されます。
ここに入力した内容は、サイト上では次のように表示されます。
メニューにマウスホバーすると、ツールチップとして表示されます。
CSSクラス
CSSクラスは、個別にデザインを調整したいときに使う項目です。ここにチェックを入れると、メニュー項目に「CSS class (オプション)」という設定が表示されます。
TCDテーマなら汎用クラスが内蔵されているので、「b」と入力するとフォントを太字にできます。
クラスを指定してメニュー項目を太字にした例
上記のように太字するほか、サイズや色を変えたいときも、コピペですぐ実現できます。
自分とリンク先の人間関係/間柄 (XFN)
自分とリンク先の人間関係/間柄 (XFN)は、少しユニークな設定です。
自分のサイトとリンク先のページの人間関係を追加できます。ここにチェックを入れることで、メニュー項目に「自分とリンク先の関係/間柄 (XFN)」というオプションが表示されます。
たとえば、リンク先が友人のブログなら「friend」、勤務先なら「colleague」といったように関係性を指定できます。これは「検索エンジンに対して人間関係の文脈を伝える」という目的で用意されている項目です。
ただ現在ではこの情報を活用している検索エンジンやツールはほとんどなく、設定しなくてもSEOや表示に大きな影響はありません。
説明
この設定は、メニュー下に補足説明を表示するためのオプションです。ここにチェックを入れることで、「説明」という項目が表示されます。
ただし、設定箇所にも記載されているとおり、現在有効化中のテーマがこの機能に対応していない場合、補足説明は表示されません。
必要に応じて表示オプションを活用しよう
WordPressメニューの表示オプションは、メニュー設定画面で使える項目をカスタマイズできる機能です。
など、用途に応じて細かい設定が行えるようになります。
とはいえ、すべての項目を使う必要はありません。「XFN」や「説明」などは、特定の目的がある場合にだけ利用すればOKです。サイト運営に慣れてきて、さらに細かく調整したいときに、表示オプションを活用してみるとよいでしょう。
コメント