WordPressグローバルメニューの作り方とカスタマイズ5ステップ

WordPressでサイトを作ったものの、グローバルメニューの作り方やメニューのカスタマイズ方法がよく分からず、手が止まっていませんか。

この記事では、WordPressのグローバルメニューの作り方とカスタマイズの基本に加えて、スマホでの見え方やデザインの整え方まで、ひと通りの流れをまとめて紹介します。

WordPressのグローバルメニューとは？作り方の前に押さえたい基本

グローバルメニューの役割とメリット

グローバルメニューは、サイトのほとんどのページに共通して表示されるメニューのことです。ヘッダーやサイドバーの上部にある「ホーム」「サービス」「ブログ」「お問い合わせ」などのリンクのまとまりをイメージしてもらえると分かりやすいと思います。

役割としては、主に次のようなものがあります。

• サイトにどんなページがあるのか、ひと目で伝える
• 「見てほしいページ」へ迷わず移動してもらう
• 検索エンジンに、どのページが大事なのかをさりげなく伝える

ざっくりまとめると、次のようなイメージです。

役割	説明
サイト全体の地図	どんなページがあるのかを一目で伝え、ユーザーが迷子になりにくくなる
重要ページへの誘導	サービス紹介や商品ページ、お問い合わせなど、成果につながるページへ導く
信頼感のアップ	会社概要やプロフィールへのリンクで、運営者の素性をきちんと見せられる
内部リンクの強化	重要ページ同士を結ぶことで、サイト構造が整理され、SEO面でも評価されやすくなる

WordPressのグローバルメニューは、管理画面からクリック操作だけで作れるので、ほとんどコードを書かずに「分かりやすいサイト」に近づけるポイントです。

グローバルメニューに入れるべき項目の考え方

次に「何をメニューに入れるか」です。思いつくページを全部突っ込んでしまうと、逆に分かりづらくなってしまいます。

基本的には、次のような視点から選ぶと失敗しにくいです。

サイトの種類ごとに、よくあるグローバルメニューの例をまとめると、こんな感じです。

サイトタイプ	メニューの例
個人ブログ	ホーム / プロフィール / ブログ一覧 / 人気記事 / お問い合わせ
アフィリエイト系サイト	ホーム / カテゴリA / カテゴリB / ランキング / おすすめ記事 / お問い合わせ
企業サイト	ホーム / 事業内容 / 料金・プラン / 実績・導入事例 / 会社概要 / お問い合わせ
教室・サロン系サイト	ホーム / メニュー・料金 / スケジュール / お客様の声 / アクセス / 予約・お問い合わせ

グローバルメニューの項目数は、多くても7個前後に収めると、パソコンでもスマホでも見やすくなります。どうしても多くなってしまう場合は、あとで紹介するドロップダウンメニューやメガメニューのような形で整理していくと、ユーザーに優しいメニューになります。

WordPressグローバルメニューの作り方（クラシックテーマ編）

外観＞メニューからグローバルメニューを作る手順

クラシックテーマの場合、グローバルメニューはほとんど共通の手順で作れます。

ざっくりした流れは、次のようなイメージです。

• WordPress管理画面で「外観＞メニュー」を開く
• 新しいメニューを作成して名前をつける
• メニューに表示したいページを選んで追加する
• ドラッグ＆ドロップで順番や階層を調整する
• 表示する位置（ヘッダーなど）を指定して保存する

ステップ	操作内容	ポイント
1	外観＞メニューを開く	「メニュー」が見えないときは、ブロックテーマの可能性がある
2	「新しいメニューを作成」で名前をつける	例：ヘッダーメニュー、グローバルメニューなど、後から見て分かりやすい名前にする
3	左側から固定ページや投稿を選んで「メニューに追加」	最初はホームやブログ一覧、お問い合わせなど、最低限から始めると考えやすい
4	右側のリストをドラッグして順番・階層を整える	右に少しずらすと、ドロップダウンの「子メニュー」になる
5	「メニューの位置」でヘッダーを選んで保存	テーマによって呼び名が違うので、「ヘッダー」や「グローバルナビ」に近いものを選ぶ

最初は、細かいことは気にせず「ホーム」「サービス（もしくはブログ）」「お問い合わせ」くらいから作ってみると、挙動がつかみやすいです。あとからいくらでも増やしたり順番を変えたりできるので、気楽に触ってみてください。

メニュー項目の追加・並び替え・ドロップダウン化

細かい項目の編集も、ほとんどドラッグ＆ドロップで完結します。

メニュー項目の追加については、固定ページ・投稿・カテゴリー・カスタムリンクなどから選べます。たとえば「お役立ち記事まとめ」などを作りたい場合は、記事のカテゴリーをメニューに入れておくと、ユーザーが一覧で見やすくなります。

並び替えは、メニュー構造エリアのボックスを掴んで上下に動かすだけです。画面上の左側から右側への並びは、基本的に上から順番だと思ってもらえばOKです。よく見てほしいページは、できるだけ左側（上の方）に持ってくるイメージで配置すると伝わりやすくなります。

ドロップダウンメニュー（サブメニュー）にしたいときは、「親にしたいメニュー項目」の下に、「子にしたいメニュー項目」をドラッグして、少しだけ右にずらします。これで、親メニューにカーソルを合わせたときに、子メニューが下に開くようになります。カテゴリー別に記事をまとめたいときなどによく使う形です。

グローバルメニューの表示位置を設定する

作ったメニューを、どこに表示するかも重要な設定です。テーマによって呼び名は違いますが、よくある表示位置は次のようなものがあります。

• ヘッダーメニュー（グローバルナビ）
• フッターメニュー
• スマホ専用メニュー
• サイドメニュー

ヘッダーに表示したい場合は、「メニューの位置」や「テーマの場所」といった設定から、「ヘッダーメニュー」や「グローバルメニュー」に当たる場所を選びます。ここを選び忘れると、せっかく作ったメニューがどこにも表示されないので、最後に必ずチェックしておきましょう。

ブロックテーマでのWordPressグローバルメニューの作り方とカスタマイズ

サイトエディターでナビゲーションブロックを編集する

ブロックテーマでのグローバルメニューの作り方は、次のような流れになります。

• 管理画面の「外観＞エディター（またはサイトエディター）」を開く
• テンプレートやテンプレートパーツから「ヘッダー」を選ぶ
• ヘッダー内にある「ナビゲーション」ブロックをクリックする
• メニュー項目を追加・削除・並び替えする
• 保存して、実際のサイトで表示を確認する

操作箇所	どこを触るか	何ができるか
外観＞エディター	サイト全体のレイアウトを編集する画面	ヘッダーやフッター、テンプレートの構造をブロック単位で編集できる
ヘッダーテンプレート	サイト上部の共通エリア	ロゴやグローバルメニューの配置、背景などを整えられる
ナビゲーションブロック	メニュー項目が横並びになっているブロック	メニューの追加・削除・順番変更、サブメニュー化などを行える

ブロックエディターに慣れていないと最初は戸惑いますが、「ナビゲーション」と書かれたブロックさえ見つけられれば、あとは通常のブロック編集とほぼ同じ感覚で触れます。

PCとスマホの表示を切り替えてチェックする

ブロックテーマでは、ナビゲーションブロックの設定次第で、PCとスマホでの表示方法を細かく変えられることも多いです。

• どの画面幅からハンバーガーメニューに切り替えるか（ブレークポイント）
• ハンバーガーアイコンの位置（右上か左上か）
• メニューを開いたときの表示位置（上から下に落ちる、右から左に出てくるなど）

設定を変更したあとは、必ずプレビューや実際のサイトで、次のような点を確認してみてください。

• 文字が小さすぎて、タップしづらくないか
• メニューが2行以上に折り返されて読みにくくなっていないか
• スマホで開いたとき、メニューが画面をほぼ埋め尽くしていないか

グローバルメニューのカスタマイズでは、見た目のオシャレさよりも「押しやすさ」「迷わなさ」がかなり大事です。ここを意識して調整していくだけでも、ユーザーのストレスはかなり変わります。

グローバルメニューのカスタマイズ基本編（色・文字・見た目）

テーマカスタマイザーでできる簡単なカスタマイズ

多くのテーマには、「外観＞カスタマイズ」やテーマ独自の設定画面が用意されています。そこから、グローバルメニューの見た目をある程度まで調整できます。

• 文字色
• 背景色
• ホバー（マウスを乗せたとき）の色
• 区切り線の有無
• フォントサイズ・太さ

まずは、次のような調整から試してみるのがおすすめです。

• 背景色と文字色のコントラストをはっきりさせて、読みやすくする
• 今見ているページだけ色を変えて、「どのページを開いているか」を分かりやすくする
• 文字サイズを少し大きめにして、スマホでもタップしやすいボタンサイズにする

変更したら、パソコンだけでなくスマホでも表示を確認しながら、「派手すぎないけれど、きちんと読める」バランスを探ってみてください。

CSSでグローバルメニューを一歩カスタマイズする

テーマの標準設定だけでは物足りないときは、「追加CSS」を使ってWordPressのグローバルメニューを一歩踏み込んでカスタマイズできます。具体的にやることのイメージをつかみやすいように、よくあるカスタマイズと効果を表にまとめておきます。

カスタマイズ内容	効果・見え方の変化
メニューの上下の余白を広げる	クリックしやすくなり、ゆったりした印象になって、全体が少し高級感のある見た目になる
メニュー同士の区切り線を入れる	項目の境目がはっきりして、項目数が多くても読みやすくなる
ホバー時に背景色を変える	「ここが押せる場所だ」と直感的に伝わり、ユーザーが迷いにくい
メニューの文字を少し太くする	小さな画面でも文字がつぶれにくくなり、視認性が上がる
サブメニューの背景に影をつける	ドロップダウンメニューが浮き上がって見え、階層構造が分かりやすくなる

CSSを書くのに慣れていない場合は、最初から完璧を目指さず、「1つ変えてみて、うまくいかなければ戻す」という感覚で少しずつ試してみるのがおすすめです。子テーマや追加CSSの欄を使えば、もとのテーマファイルを壊してしまう心配もありません。

スマホ対応とユーザー目線のグローバルメニューカスタマイズ

ハンバーガーメニューで気をつけたいポイント

スマホでは、多くのテーマがハンバーガーメニュー（3本線のアイコン）を採用しています。スッキリした見た目になりますが、設定次第では使いにくくなることもあります。

チェックしておきたいポイントは、主に次のあたりです。

ハンバーガーメニューをカスタマイズするプラグインを使うと、アニメーションなども付けられますが、最初は「シンプルで押しやすいこと」を最優先に考えたほうが、結果的にユーザーに喜ばれます。

プラグインでグローバルメニューを強化する

WordPressのグローバルメニューをもっと柔軟にカスタマイズしたい場合は、専用プラグインを使う方法もあります。代表的なタイプをざっくり分類すると、次のようなイメージです。

プラグインのタイプ	できることの例
メニューにアイコンを追加	メニュー名の横にアイコンや画像を表示して、内容を直感的に伝えられる
スマホ用ドロワーメニュー	スマホ表示のときだけ、画面の横からスライドして出てくるメニューを表示できる
メガメニュー系	1つのメニューから複数カラムや画像付きの大きなメニューを表示し、多くのリンクを整理して見せられる
アニメーション追加	メニューを開いたときにフェードインやスライドなどの動きをつけて、リッチな印象にできる

ただし、プラグインを増やしすぎると表示速度に影響が出ることもあります。「本当に必要な機能か」「テーマ標準の設定で代用できないか」を考えながら、必要最低限に絞って導入すると安心です。

トラブル別チェックリスト：グローバルメニューが表示されない・崩れるとき

グローバルメニューが表示されないときの原因と対処

メニューがまったく表示されない場合、次のような原因が多いです。

症状	よくある原因	対処の方向性
作ったはずのメニューが表示されない	メニューの表示位置が設定されていない、または違う位置になっている	外観＞メニュー、もしくは外観＞エディターで、ヘッダーなどの表示位置を指定し直す
「外観＞メニュー」がそもそもない	テーマがブロックテーマで、従来のメニュー画面が無効化されている	外観＞エディターからヘッダーを開き、ナビゲーションブロックを編集する
特定のページだけメニューが違う	そのページだけ別テンプレートを使っている、もしくは個別のヘッダーを読み込んでいる	該当ページのテンプレート設定や、使用しているページビルダーの設定を確認する
ログイン中だけメニューの見え方が違う	キャッシュプラグインや表示条件の設定が影響している	キャッシュプラグインを一度オフにして確認し、条件付き表示を設定していないか見直す

最初に確認しておきたいのは、「自分のテーマがクラシック寄りなのか、ブロックテーマなのか」です。ここを押さえておくだけで、トラブルの切り分けがかなり楽になります。

メニューのレイアウトが崩れるときのチェックポイント

「パソコンではきれいなのに、スマホだとメニューが二段になってしまう」「文字が途中で折れて読みにくい」といった場合は、次の点をチェックしてみてください。

また、グローバルメニューのカスタマイズで追加CSSを書いたあとに崩れた場合は、そのCSSを一度コメントアウトするか、削除してから表示を確認してみてください。1つずつオフにしていくと、どの記述が原因なのかを特定しやすくなります。

よくある質問（WordPressグローバルメニューの作り方・カスタマイズ）

Q1.WordPressグローバルメニューの作り方で、一番簡単な方法は？

A.一番シンプルなのは、クラシックテーマなら「外観＞メニュー」、ブロックテーマなら「外観＞エディター」から編集する方法です。プラグインを入れる前に、まずはテーマ標準の機能だけで、ホーム・サービス（またはブログ）・お問い合わせといった基本的なメニューを作ってみてください。標準機能でどこまでできるかを把握しておくと、後のカスタマイズもぐっとやりやすくなります。

Q2.グローバルメニューのカスタマイズは、SEOにどれくらい関係しますか？

A.グローバルメニューのカスタマイズそのものが、直接検索順位を決めるわけではありませんが、SEOとまったく無関係というわけでもありません。WordPressのグローバルメニューに重要ページへのリンクをまとめておくことで、「このサイトで重要なページ」が検索エンジンにも伝わりやすくなります。また、ユーザーが目的のページに行きやすくなることで、回遊率のアップや直帰率の改善にもつながり、その積み重ねがSEOにはプラスに働きやすいです。

Q3.プラグインを使った方が、グローバルメニューのカスタマイズは楽ですか？

A.場合によりますが、最初からプラグインに頼りすぎるのはあまりおすすめしません。WordPressのグローバルメニューの作り方と、テーマ標準のカスタマイズ機能だけで、かなりの部分まで触れます。そのうえで、「アイコンを入れたい」「メガメニューにしたい」といった具体的な要望が出てきたタイミングで、必要なプラグインを1つずつ追加していくほうが、サイト全体の管理もしやすくなります。

まとめ：WordPressのグローバルメニューを今日から見直そう

ここまでの内容を簡単に整理します

今日できる最初の一歩としては、まず自分のサイトを開いて、グローバルメニューに並んでいる項目を書き出してみてください。「本当にこの順番でいいのか」「もっと前に出すべき大事なページはないか」「スマホでも押しやすいか」といった視点でチェックしていくと、改善ポイントが見えてきます。

そのうえで、この記事で紹介したWordPressのグローバルメニューの作り方とカスタマイズのステップを、上から順番に試してみてください。少しずつ手を入れていくだけでも、サイトの印象は大きく変わっていきます。