WordPressメニューの階層化を完全解説！ドロップダウンメニューの作り方と設定のコツ

「WordPressのメニューを階層化して、ドロップダウンにしたい」
「メニュー項目が多すぎてヘッダーが見づらくなってきた…」

ウェブサイトのメニュー項目が増えてくると、すべてを横一列に並べるだけでは見づらくなりますよね。

そんな時に便利なのがメニューの階層化（ドロップダウンメニュー）です。親メニューにカーソルを合わせると、その下に子メニューが表示される仕組みです。

この記事では、WordPressでメニューを階層化する方法から、使いやすいメニュー構造にするためのポイント、よくあるトラブルの解決方法まで、わかりやすく解説していきます。

ドロップダウンメニュー（階層化メニュー）とは？

ドロップダウンメニューとは、メニュー項目にマウスカーソルを合わせたり、タップしたりすると、その下に関連する項目が表示されるメニューのことです。

例えば、「会社情報」という親メニューの下に：

• 会社概要
• 代表挨拶
• アクセス

といった子メニューを配置することで、メニューをスッキリ整理できます。

階層の呼び方

WordPressのメニューでは、以下のように階層を呼びます：

• 第1階層（親メニュー）：最上位のメニュー項目
• 第2階層（子メニュー・サブメニュー）：親メニューの下に表示される項目
• 第3階層（孫メニュー）：子メニューの下にさらに配置できる項目

理論上は何階層でも作れますが、ユーザビリティの観点から2〜3階層までが推奨されています。

メニュー階層化のメリット

見た目がスッキリする
多くのページへのリンクを、限られたスペースにコンパクトに収められます。

情報の整理がしやすい
関連するページをグループ化することで、サイトの構造をわかりやすく伝えられます。

ユーザーの利便性向上
訪問者が目的のページを探しやすくなり、サイト内の回遊率が向上します。

SEO効果
整理されたメニュー構造は、検索エンジンのクローラーがサイトを理解しやすくなります。

メニューを階層化する基本手順

WordPressでメニューを階層化する方法は、使用しているテーマのタイプによって2通りあります。

【方法1】クラシックテーマの場合（外観→メニュー）

多くのWordPressサイトで使われている従来の方法です。

ステップ1：メニュー編集画面を開く

1. WordPress管理画面（ダッシュボード）にログイン
2. 左側のメニューから「外観」→「メニュー」をクリック
3. 編集したいメニューを選択（または新規作成）

ステップ2：メニュー項目を追加

左側の「メニュー項目を追加」セクションから、メニューに追加したい項目を選びます。

追加できる項目：

• 固定ページ：会社概要、お問い合わせなど
• 投稿：個別の記事
• カスタムリンク：外部サイトや特定のURLへのリンク
• カテゴリー：ブログのカテゴリーページ

追加したい項目にチェックを入れて「メニューに追加」をクリックします。

ステップ3：階層化する

ここが重要なポイントです。

子メニューにしたい項目をマウスでドラッグして、右側に少しずらします。

具体的には：

1. 子メニューにしたい項目をクリックして掴む
2. 親メニューの真下に配置
3. そのまま右側に少しドラッグ
4. 「副項目」という表示が出たら手を離す

これだけで階層化が完了します。項目の右側に「副項目」と表示されていれば、正しく階層化されています。

ステップ4：孫メニュー（第3階層）を作る

さらに深い階層が必要な場合は、子メニューをさらに右にずらすことで孫メニューを作れます。

ただし、あまり深い階層にすると使いづらくなるので注意が必要です。

ステップ5：保存する

設定が完了したら、必ず「メニューを保存」ボタンをクリックしましょう。

保存しないと、ここまでの設定がすべて消えてしまいます。

【方法2】ブロックテーマの場合（サイトエディター）

WordPress 6.0以降で増えているブロックテーマ（フルサイト編集対応テーマ）では、少し方法が異なります。

ステップ1：サイトエディターを開く

1. 管理画面から「外観」→「エディター」をクリック
2. 編集したいテンプレートまたはテンプレートパーツを選択
3. 左上の「リスト表示」（3本線のアイコン）を開く

ステップ2：ナビゲーションブロックを選択

リスト表示から「ナビゲーション」ブロックを見つけてクリックします。

ナビゲーションブロックは、「ヘッダー」や「グループ」などの中にネストされている場合があります。

ステップ3：サブメニューを追加

方法A：メニュー項目から追加

1. サブメニューを追加したい親メニュー項目の横にある3点アイコン（⋮）をクリック
2. 「サブメニューを追加」を選択
3. 表示したいページを選択

方法B：ツールバーから追加

1. ドロップダウンにしたいメニュー項目をクリック
2. ツールバーに表示される「サブメニューを追加」ボタン（曲がった矢印と横線のアイコン）をクリック
3. 「+」アイコンまたは「リンクを追加」から新しいリンクを追加

ステップ4：保存

右上の「保存」ボタンをクリックして変更を保存します。

メニューの並び替え方法

メニュー項目の順序を変更したい場合も、ドラッグ＆ドロップで簡単にできます。

クラシックテーマの場合

1. 移動したい項目をクリックして掴む
2. 上下にドラッグして希望の位置に移動
3. 手を離す
4. 「メニューを保存」をクリック

ブロックテーマの場合

1. リスト表示でメニュー項目を選択
2. 上下にドラッグして移動
3. 保存

使いやすいメニュー構造にするためのポイント

階層化メニューを作る際は、以下のポイントを意識すると、ユーザーにとって使いやすいサイトになります。

1. メニュー項目は5〜7個が理想

メニュー項目が多すぎると、ユーザーが迷ってしまいます。

一般的に、メニュー項目は5〜7個程度が理想とされています。これ以上増える場合は、階層化してグループ化を検討しましょう。

2. 階層は2〜3階層まで

深すぎる階層は使いづらくなります。

例えば、「お知らせ」→「休業日のお知らせ」→「イベントのお知らせ」のように3階層にすると、ユーザーが「イベントのお知らせ」にたどり着けないことがあります。

可能な限り2階層（親と子）までに抑えるのがベストです。

3. わかりやすいラベル名を使う

「○○会社の沿革や事業の概要」のような長い名前は避けましょう。

「会社概要」「事業内容」のように、シンプルで一目でわかる名前が理想です。

4. 論理的なグループ化を意識

関連するページは同じ親メニューの下にまとめます。

良い例：

• 会社情報
• 会社概要
• 代表挨拶
• アクセス

悪い例：

• トップページ
• 会社概要
• 商品A
• 代表挨拶

5. 重要なページは上位階層に配置

ユーザーに最も見てもらいたいページは、第1階層（親メニュー）に配置しましょう。

深い階層に埋もれてしまうと、アクセスされにくくなります。

表示オプションを活用する

メニュー編集画面の右上にある「表示オプション」をクリックすると、さらに詳細な設定ができます。

利用可能な設定項目

リンクターゲット
リンクを別タブで開くかどうかを設定できます。

タイトル属性
マウスカーソルを合わせた時に表示されるツールチップを設定できます。

CSSクラス
独自のCSSクラスを追加して、特定のメニュー項目だけデザインを変更できます。

説明
メニュー項目の下に補足説明を追加できます（テーマが対応している場合）。

表示オプションにチェックを入れると、各メニュー項目の編集画面にこれらの項目が表示されるようになります。

よくあるトラブルと解決方法

ドロップダウンが表示されない

原因1：テーマが対応していない
一部の古いテーマでは、ドロップダウンメニューに対応していない場合があります。

解決方法：テーマを変更するか、CSSでスタイリングを追加する必要があります。

原因2：階層化が正しくできていない
メニュー項目が右にずれて「副項目」と表示されているか確認しましょう。

原因3：JavaScriptエラー
ブラウザの開発者ツール（F12キー）でJavaScriptエラーが出ていないか確認します。

モバイルでメニューが見づらい

スマートフォンでは、ドロップダウンメニューはハンバーガーメニュー（☰）やアコーディオン形式で表示されることが多いです。

多くのテーマはレスポンシブ対応していますが、うまく表示されない場合は：

• テーマ設定で「モバイルメニュー」の設定を確認
• レスポンシブ対応のメニュープラグインを検討

メニューが反映されない

保存を忘れていないか確認
「メニューを保存」ボタンを押さないと変更は反映されません。

メニューの位置を設定しているか確認
メニューを作成しただけでは表示されません。「メニュー設定」の「メニューの位置」で、適切な場所にチェックを入れる必要があります。

キャッシュをクリア
キャッシュプラグインを使っている場合は、キャッシュをクリアしてみましょう。

階層が深すぎて使いづらい

既に3階層以上になってしまっている場合：

1. メニュー構造を見直し、本当に必要な階層か検討
2. 同じレベルの項目をまとめられないか検討
3. 独立したページとして第1階層に配置することを検討

メニュー階層化の応用テクニック

クリックできない親メニューを作る

親メニュー自体はクリックさせず、ドロップダウンだけを表示したい場合があります。

設定方法：

1. カスタムリンクを追加
2. URLに「#」（ハッシュマーク）だけを入力
3. リンクテキストに表示したい名前を入力
4. その下に子メニューを追加

こうすると、親メニューはクリックできますが、どのページにも移動しません。

アイコンを追加する

プラグインやテーマによっては、メニューにアイコンを追加できます。

例えば、Font Awesomeを使う場合：

1. Font Awesomeプラグインをインストール（テーマに含まれている場合も）
2. メニュー項目の「ナビゲーションラベル」にアイコンコードを貼り付け
3. アイコンの後にメニュー名を入力

メガメニューを使う

多くの情報を一度に表示したい場合は、「メガメニュー」という広いドロップダウンメニューが便利です。

これには専用のプラグインやテーマ機能が必要ですが、画像付きメニューやカテゴリー一覧を表示できます。

複数のメニューを使い分ける

WordPressでは、複数のメニューを作成して、場所ごとに使い分けることができます。

メニューの位置の種類

テーマによって異なりますが、一般的には：

• ヘッダーメニュー：ページ上部
• フッターメニュー：ページ下部
• サイドバーメニュー：サイドバー内
• モバイルメニュー：スマートフォン専用

使い分けの例

• ヘッダー：主要ページへのリンク（会社情報、サービス、お問い合わせなど）
• フッター：利用規約、プライバシーポリシー、サイトマップなど
• サイドバー：ブログのカテゴリー別メニュー

まとめ

WordPressのメニュー階層化について、重要なポイントをおさらいしましょう。

階層化の基本手順：

• クラシックテーマ：「外観」→「メニュー」で項目を右にドラッグ
• ブロックテーマ：サイトエディターでナビゲーションブロックから「サブメニューを追加」

使いやすいメニューのポイント：

• メニュー項目は5〜7個程度に抑える
• 階層は2〜3階層まで
• わかりやすいラベル名を使う
• 論理的にグループ化する
• 重要なページは上位階層に

注意点：

• 設定後は必ず「メニューを保存」
• メニューの位置を正しく設定
• モバイル表示も確認

メニューの階層化は、サイトの使いやすさを大きく左右する重要な要素です。この記事を参考に、訪問者にとってわかりやすいメニュー構造を作ってみてください。

最初は試行錯誤が必要かもしれませんが、一度設定方法を覚えてしまえば、メニューの編集は簡単にできるようになりますよ。

参考情報源

• WordPress.com サポート「ドロップダウンメニューを作成する」(https://wordpress.com/ja/support/menus/create-drop-down-menus/)