WordPressで親メニューと子メニューを作成する方法

WordPressのナビゲーションメニューで、クリックできない親メニューの下に複数の子メニューを配置する方法を解説します。
この方法を使えば、サイトの構造を整理しやすくなります。

親メニューを「#」にする理由

親メニューのリンク先を「#」に設定すると、その項目自体はリンクとして機能せず、マウスホバーやクリックで子メニューを表示する役割だけを持たせることができます。
カテゴリーの見出しとして使いたい場合にも便利です。

設定手順

1. メニュー画面を開く

WordPress管理画面から、外観 > メニュー にアクセスします。

2. 新しいメニューを作成(または既存のメニューを選択)

まだメニューがない場合は、新しくメニューを作成します。
メニュー名を入力して「メニューを作成」をクリックしてください。

3. カスタムリンクで親メニューを追加

左側の「カスタムリンク」セクションを開き、以下のように設定します:

• URL： #
• リンク文字列： 親メニューの名前(例:「サービス」「製品情報」など)

「メニューに追加」をクリックします。

4. 子メニューを追加

次に、親メニューの下に表示したい子メニューを追加します。

• 固定ページ
• 投稿
• カスタムリンク
• カテゴリー

から、追加したい項目を選択して「メニューに追加」をクリックします。

5. 階層構造を作る

メニュー構造エリアで、子メニューにしたい項目を親メニューの下に移動し、少し右にドラッグします。
正しく設定できると、項目が「サブ項目」として表示され、インデントされます。

実践例

以下は実際の設定例です。

サービス (#)  ← 親メニュー
  ├─ Webデザイン
  ├─ SEO対策
  └─ システム開発

会社情報 (#)  ← 親メニュー
  ├─ 会社概要
  ├─ 代表挨拶
  ├─ アクセス
  └─ 採用情報

具体的な設定手順

1. 「サービス」親メニューの作成
   • カスタムリンクで URL： #
   • リンクテキスト：サービス を追加
2. 子メニューの追加
   • 「Webデザイン」「SEO対策」「システム開発」のページをメニューに追加
   • これらを右にドラッグして「サービス」の子メニューにする
3. 「会社情報」親メニューも同様に作成
   • カスタムリンクで URL：#
   • リンクテキスト： 会社情報 を追加
   • 関連ページを子メニューとして配置

ポイントと注意事項

メニューの表示位置を設定

メニューを作成したら、画面下部の「メニュー設定」で表示位置を選択します。
(例:ヘッダーメニュー、フッターメニューなど)

使用しているテーマによって選択肢が異なる場合があります。

テーマによる表示の違い

親メニューの挙動(ホバー時の動作、クリック時の動作など)は、使用しているテーマによって異なります。
一部のテーマでは、親メニューをクリックしても子メニューが表示されない場合があります。

レスポンシブ対応

スマートフォン表示では、テーマによって最初から子メニューが表示される場合や、親メニューをタップすることで子メニューが展開される仕様があります。
実際の動作は必ずモバイル端末でも確認してください。

階層は2段階まで推奨

メニューは3段階以上のネスト(孫メニュー)も技術的には可能ですが、ユーザビリティの観点から2段階(親と子)までにするのがおすすめです。

まとめ

親メニューを「#」に設定することで、クリック不可能なカテゴリー見出しとして機能させ、その下に関連する子メニューを整理して配置できます。
サイトの情報構造が明確になり、訪問者にとって使いやすいナビゲーションを実現できます。

設定後は必ず実際のサイトで表示を確認し、デスクトップとモバイルの両方で正しく動作するかチェックしてください。