WordPressでは、サイト上部のヘッダーに「グローバルメニュー」を設置することで、訪問者が目的のページにアクセスできるようにナビゲーションを整えることができます。
XWRITEに限らず、ほとんどのWordPressテーマでは、初期状態ではグローバルメニューはありません。管理画面からかんたんに作れますので、やってみましょう。
1. XWRITEのグローバルメニューの基本構造
メニューの設置場所
XWRITEのグローバルメニューは、サイトのヘッダー部分に表示されます。PCでは横並びで、スマホではハンバーガーメニューとして表示されるのが基本です。テーマ設定によって、固定ヘッダーか透明ヘッダーかを選ぶことができ、それによりメニューの見え方も変わります。
グローバルメニューをうまく設定することで、訪問者がトップページやカテゴリページ、記事ページへスムーズにアクセスできるようになります。サイト内の記事数が20記事を越えたら、階層や順序を整理しておくことが重要です。
用語整理
WordPress初心者のかた向けに、メニューに関する用語を整理しておきます。
- ナビゲーションメニュー：サイト上部や下部に設置される、各ページへ貼られたリンクの集合体のこと。
- グローバルメニュー：ヘッダー（Webサイトの最上部）に表示されるナビゲーションメニュー。ほぼ全ページに共通して表示されます。
- フッターメニュー：フッター（ページ下部）に表示されるナビゲーションメニュー。
- 固定ページ／投稿ページ／カスタムリンク：メニューに追加できるリンクの種類です。固定ページは「会社概要」「お問い合わせ」など、投稿ページはブログ記事、カスタムリンクは任意のURLを設定できます。
- メニュー階層／サブメニュー：ドロップダウンで表示される子リンクのこと。たとえば、「商品一覧」➤「シューズ」のように、リンクを階層化する機能をさします。
2. グローバルメニューの作り方（初心者向け手順）
下準備として、カテゴリーを用意しておこう
WordPressの「カテゴリー」とは、投稿した記事をジャンルごとにグルーピングする機能です。グローバルメニューに表示させるカテゴリーを先に作っておく必要があります。
メニュー作成画面へのアクセス方法
WordPress管理画面にログインしたら、左側メニューの「外観」➤「メニュー」をクリックします。ここでメニューの作成や編集を行います。
XWRITEでは、この画面で作ったメニューをテーマ専用設定画面からヘッダーに割り当てることで、グローバルメニューとして表示されます。
メニュー構造の項目の「メニュー名」に任意の名前を記入し、「ヘッダーメニュー」にチェックを入れます。最後に、「メニューを作成」ボタンを押します。
メニュー名は、「グローバルメニュー」や「ヘッダーメニュー」など、位置がすぐわかる名称にしましょう。
メニュー項目を追加してゆく
いま作った「グローバルメニュー」に、表示させるメニューを割り振ってゆきます。
編集するメニューを選択します。
「メニューを編集」の項目より、「グローバルメニュー（ヘッダーメニュー）」を選択します。
（※XWRITEでは、「メニュー名（位置）」という表記になります）
左側の「メニュー項目を追加」の欄を見てください。
固定ページ、投稿、カスタムリンク、カテゴリーの4つが表示されます。右横の「▼」をプルダウンすると、項目が開きます。
- 固定ページ・・・ホームやお問い合わせ、プライバシーポリシーなど
- 投稿・・・個別の記事ページへ
- カスタムリンク・・・外部の関連サイトやSNSのプロフィールにリンクさせたいとき
- カテゴリー・・・各カテゴリーのトップページへ
グローバルメニューでよく使われるのが、「固定ページ」と「カテゴリー」です。
今回はサンプルとして「ホーム」と「お問い合わせ」をそれぞれ1つ、「カテゴリー」を2つ、計4つの項目をグローバルメニューに表示させてみます。
固定ページから、「ホーム」や「お問い合わせ」を追加してゆく
固定ページ右の「▼」ボタンを押し、「すべて表示」を選択。グローバルメニューに表示させたい項目にチェックを入れ、「メニューに追加」をクリックします。
カテゴリーから、各「カテゴリー」を選んでゆく
カテゴリー右の「▼」ボタンを押し、「すべて表示」を選択。グローバルメニューに表示させたい項目にチェックを入れ、「メニューに追加」をクリックします。
右側の「メニュー項目」の欄を見てください。
「固定ページ」や「カテゴリー」で追加した項目が、並んでいるはずです。
いまは順不同で並んでいますが、これをお好きな順番に組み替えてゆきます。
メニュー項目を並び替える
移動させたい項目を、ドラッグで（マウスでつかんで）上下に動かします。
ドロップで（マウスを離すと）、項目の順番を入れ替えることができます。
順番が決まったら、「メニューを保存」を押します。
作業が完了したら、サイト（ブログ）を確認してください。
サイト上部に、グローバルメニューが追加されているはずです。
（補足）グローバルメニューの「サブ項目」とは？
メニュー構造でドラッグ&ドロップでメニューの順番を入れ替えるとき、右側にズラすと、「サブ項目」と表示されることがあります。
親カテゴリー ➤ 子カテゴリー
のように、グローバルメニューを階層化させたいときに使います。
そのまま「メニューを保存」ボタンを押すと、下図のようにグローバルメニューを階層化できるようになります。
たとえば、グローバルメニューに「会社概要」という親項目としてを表示させます。
メニュー構造で、「企業理念」「会社沿革」「アクセス」といったサブ項目を設定しておくと、グローバルメニューの「会社概要」から枝分かれして、「企業理念」「会社沿革」といったページにすぐたどり着けるようになります。
3. グローバルメニューのデザイン設定
WordPressにはデザインや外観の設定を「プレビュー」を見ながら変更できる、「カスタマイザー」という機能があります。
「カスタマイザー」を呼び出せば、より細かいカスタマイズも可能です。
ヘッダーメニューの背景色と文字色の設定
WordPressの管理画面より「外観」➤「カスタマイズ」とすすみ、カスタマイザーを呼び出します。
サイトタイトル（ブログ名）のテキスト色、ヘッダーの背景色、ヘッダーメニューのテキスト色をお好みの色に変更できます。
変更する場合は、画面上の「公開」を押します。
初期設定に戻す場合は「デフォルト」をクリックします。
検索ボタンを設置する
グローバルメニュー内に検索ボタンを設置できます。
「カスタマイザー」を呼び出したら、「ヘッダー」➤「検索ボタン」と進みます。
グローバルメニューに検索ボタンを入れる場合は、「PCで表示する」や「モバイルで表示する」にチェックを入れ、「公開」ボタンを押します。
グローバルメニューに検索ボタンが設置され、記事を検索できるようになります。
4. メニュー設定で注意すべきポイント
- 階層を深くしすぎない（2階層以内が無難）
- 公開前にリンク切れを必ず確認
- 固定ページ削除時の自動更新に注意
- キャッシュやAMPプラグインとの競合に注意
フッターメニューも整理しておくと、サイト全体のナビゲーションがより分かりやすくなります。
5. よくある質問・トラブル解決
- サブ項目が表示されない場合
→ 親子の階層設定を確認。XWRITEでは親メニューが非表示の場合、子も出ません。カテゴリーでサブ項目を表示させたい場合、下準備として「親カテゴリ」を「子カテゴリ」を作っておく必要があります。 - スマホ表示で崩れる場合
→ ハンバーガーメニュー設定を確認。表示させるメニューが多すぎると崩れることがあります。 - 色・フォントが反映されない場合
→ キャッシュクリアやブラウザ更新で確認。また、カスタマイザーから変更を加えた場合は、「公開」ボタンを押します・
6. まとめ
XWRITEのグローバルメニューは、階層やリンクを整理するだけで初心者でもきれいに整えることができます。
- メニュー作成画面で固定ページ、カテゴリーなどをグローバルメニューに追加する
- サブ項目は深くしすぎず、2階層以内を目安に（記事の少ないサイトは不要）
- PC・スマホ両方で表示を確認
- フッターメニューも整理するとナビゲーションがさらに分かりやすくなる
みなさんのサイト（ブログ）作りがうまくゆくことを願っています。
