WordPressのトップメニュー(グローバルナビ)を設定する方法

WordPressのトップメニュー「グローバルナビ」を設定する方法

WordPressの「トップメニュー(グローバルナビ)」を設定する方法を紹介します。

メニューの設定

テーマによって、メニューの「位置」「デザイン」「カスタマイズできる範囲」は異なりますが、基本的な設定は全てのテーマ共通です。メニューを作成して、「トップメニュー(グローバルナビ)」に設定すれば、一部のカスタム投稿ページ等を除いて全てのページでナビが表示されます。

トップメニュー「グローバルナビ」

トップメニュー「グローバルナビ」

メニューの追加

メニューの追加は、ダッシュボードの外観「メニュー」から行います。

メニューの設定

メニューの設定

メニューに名前をつけ、「メニューを作成」ボタンをクリックします。

名前は「グローバルナビ」等、自由につけて構いません。メニューは複数作成することができますし、後から名前を変更することもできます。

新規メニューの作成

新規メニューの作成

初期設定では非表示になっている項目があるので、画面右上の「表示オプション」から、表示させたい「ボックス」と変更したい「詳細メニュー設定」にチェックを入れます。

表示オプションの設定

表示オプションの設定

メニュー一覧に追加したいページにチェックを入れ、「メニューに追加」をクリックします(ページは事前に作成しておく必要がある)。

ちなみに、「カスタムリンク」を使えば、内部リンクだろうが外部リンクだろうが、URLとリンク文字列を指定して、どんなページでもメニューに追加することができます。

ページをメニューに追加

ページをメニューに追加

メニュー構造では、ドラッグ&ドロップで順番を入れ替えることができます。

この際、ページを一段右に配置(階層化)すれば、「ドロップダウンメニュー」で表示されます(ドロップダウンメニューに対応していないテーマでは表示されません)。

メニュー構造の変更

メニュー構造の変更

必要であれば、個々の「詳細メニュー設定」を変更します。

詳細メニュー設定

詳細メニュー設定

ナビゲーションラベル メニュー一覧で表示される文字列です。ページのタイトルがそのまま入力されるので、長すぎる場合は短く変更して下さい。
タイトル属性 リンクにカーソルを載せた時にツールチップで表示されます(PCのみ)。要素の補足情報になりますが、ほとんど使われていません。
リンクを新しいタブで開く チェックを入れると、「target="_blank"」が追加されるので、リンクが新しいタブで開きます(外部リンクに使うと便利)。
CSS class
(オプション)
クラス名を入力してクラス属性のCSSを適用させることができます。
自分とリンク先の関係/間柄
(XFN)
XFN(XHTML Friends Network)はリンク先と自分との関係です。入力すると「rel属性」が追加されます。使用できる関数はDefining Relationships with XFN « WordPress Codexを参考にして下さい。但し、ほとんど使われていません。
説明 テーマが対応している場合は、入力した文字列がナビゲーションラベルの下に説明として表示されます。

トップメニュー(グローバルナビ)に配置

トップメニュー(グローバルナビ)」に設定する場合は、メニューの位置「トップメニュー」にチェックを入れます(配置できる位置や表記はテーマによって若干異なる)。

メニューの位置を指定

メニューの位置を指定

ウィジェットに配置

ウィジェットに配置する場合は、ダッシュボードの外観「ウィジェット」から設定します。

設置したい場所に「ナビゲーションメニュー」をドラッグ&ドロップで追加し、任意のタイトルを入力&表示させたいメニューを選択します。

ナビゲーションメニューの設置

ナビゲーションメニューの設置

最後に

基本的に「トップメニュー(グローバルナビ)」以外は使用しているテーマに依存します。フッターナビやスマホ専用ナビはテーマによっては配置できません。

また、テーマによってはメニュー項目が多すぎたり、ナビゲーションラベルが長すぎるとレイアウトが崩れることがあるので、「トップメニュー(グローバルナビ)」には必要なものだけを追加し、ナビゲーションラベルはできるだけ短くすることをおすすめします。

スポンサーリンク
スポンサーリンク