【Wordpress】グローバルメニューを2段化する。　初心者向け　CHATGPTにきく

tecn のブログのカテゴリが多くなりすぎて、標準のグローバルメニューだと、うまく表示できないのでいつものごとくCHATGPTにききながら調整してみた。　まずは2段化するためにグローバルメニュをどうすればよいか聞いてみたら、CSSを追加で入れたらどうかといわれてやってみた。ダッシュボードを出してみて,【外観】＝＞【カスタマイズ】を選択します。　以下のように左メニュに出ている項目で、追加CSSを選択　この時すでにCHATGPTよりCSSをもらっていたので、それを当ててます。

あてたCSSは下記になります。　わたし素人なのでCSSわからないので、CHATGPTが言うがままに張り付けたら
上記画面のように、一応2段にはなりました。　ここからいろいろとCHATGPTとやり取りしたが、CHATGPTも
別な方法にしましょう！　とさじを投げたようです。　私の指示の出し方がうまくなかったかもです。ちょっとCSSがわかる方だと、ここから少し追い込めるのだと思いますが、CSSを下記に記載しておきますね！

/* === SWELL｜PC：2段メニューをコンパクト化＆食い込み防止（完成版） === */
@media (min-width:1024px){

/* 1) メニューを折り返し＋行間をギュッと詰める / header nav > ul, .l-header__gnav > ul, .c-gnav > ul { display: flex !important; flex-wrap: wrap !important; gap: 0 12px; / 横の間隔(以前16px) → 12pxに圧縮 / row-gap: 2px; / 段と段の間隔(以前8〜10px) → 2pxに圧縮 */
width: 100%;
white-space: normal !important;
}

/* 2) 各項目の内側余白・文字サイズ・行高を控えめに / header nav > ul > li, .l-header__gnav > ul > li, .c-gnav > ul > li { flex: 0 0 auto !important; white-space: nowrap !important; } / aタグの上下パディングを小さくして高さを抑える / header nav a, .l-header__gnav a, .c-gnav a { display: inline-block; padding: 6px 10px; / ← ここで“高さ感”を主に調整（上下6px） / line-height: 1.25; / ← 行高をタイトに / font-size: 0.95rem; / ← 必要なら 0.9rem にさらに縮めてもOK */
}

/* 3) ヘッダー帯を前面・白に固定（食い込み防止の要） */
header,
.l-header,
.l-header__inner,
.l-header__row,
.l-header__gnav {
position: relative !important;
z-index: 1000 !important;
background: #fff !important;
}

/* 4) ヘッダーの上下余白を最小限に（“領域を取りすぎ”を解消） / .l-header, .l-header__inner { height: auto !important; min-height: 0 !important; / 固定高はやめて自動に / padding-top: 4px !important; padding-bottom: 6px !important; / まだ食い込むなら 8〜10px に微増 */
overflow: visible !important;
}

/* 5) 下のヒーロー/メインビジュアルが上に被らないように */
.p-mainVisual,
.l-visual,
.p-hero,
.c-hero,
.fv,
.mv,
.hero,
.main-visual,
.l-contents,
main {
position: relative;
z-index: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}

/* 念のため：親のnowrapを解除 / header nav, .l-header__gnav, .c-gnav { white-space: normal !important; } } / === ここまで === */

素人目には、グローバルメニュの表示領域を少し広げて、行間を詰めてやればここまでくればできるよね！と思うが
CHATGPT さんに指示しきれなかったので、断念　デザイナーに見てもらってCSSを変更もできるが、素人の私でもやれる方法をと！さらにCHATGPTにききながら別の方法を模索していきます。

さて次の方法ですが、CHATGPTは次の方法を提案してくれてます。

方式B：メニューを上下2本に分ける（安全＆崩れない）

方式A：1本帯のまま強制安定化

ここでまず、CAHTGPTに素人に簡単にできて、見栄えが良いのはどちら？と聞いてみました。
答えは！

結論：初心者なら「方式B：結論：初心者なら「方式B：上下2本に分ける（ヘッダーバー使用）」一択です。
理由は、クリック操作だけで完結・崩れにくい・デザインも整えやすいから。CSSは最小限でOKです。」一択です。
理由は、クリック操作だけで完結・崩れにくい・デザインも整えやすいから。CSSは最小限でOKです。

筆者：ハイ了解です　あなたのおすすめ方式　方式Bでやりましょう。

方式B　グローバルメニューを結論：初心者なら「方式B：上下2本に分ける

やるべきことをステップバイステップで進めていきましょう！　すべてCHATGPTの指示通りに動きますね

すべて追加CSSでやること諦めました。

1) 追加CSSをいったん空にする

外観 → カスタマイズ → 追加CSS → 全部削除して公開

上記画面通り何とかグローバルメニューは2段化できたが、ヘッダー画像に2段目が食い込んでいるので、いったんかいしょうしますので、追加CSSは削除します。　【公開】　でCSSは削除しました。

2) サブ用メニューを作る

外観 → メニュー

• 既存 …「PC：グローバルナビ」（上段用）はそのまま
• 新規 … 「サブメニュー」 を作成して、2段目に出したい項目を入れる
  ※メニュー名は何でもOK）
• 新しいメニューを作成しましょう
  

メニュー名　Gメニュ2段　としました。

ここではメニューの位置等のチェックボックスは、チェックを入れないでOK
理由：このサブメニューは「メニューの位置」に割り当てず、ヘッダーバーのウィジェットから呼び出す方式で使うためです。

Gメニュ2段　　　【メニューを保存】ボタンを押して、名前だけ登録します！　出したい項目があるので、まずはそれを入れていきます。　とりあえずグローバルメニュはシンプルに、カテゴリーの一段目をいれたいので、グローバルメニューの1段目に表示ができないものを追加で入れておきましょう。　テストのために2項目ほど入れておきます。

このあとやること（確認）

1. メニューを保存（チェックなしのまま保存）。
2. 外観 → カスタマイズ → ヘッダー → ヘッダーバーをPCで表示 をON。
3. 外観 → カスタマイズ → ウィジェット → ヘッダーバー →
   　「ナビゲーションメニュー」ブロックを追加 → サブメニューを選択 → 公開。
4. スマホ側を変えたくない場合は、ヘッダーバーはPCのみ表示にしておきます。

3) ヘッダーバーを出す

外観 → カスタマイズ → ヘッダー → ヘッダーバーをPCで表示 をON → 公開

WORDPRESS　6.8.1 ではヘッダーバーはPCでのみ公開という設定になっているようです。
このまま続けましょう

4) ヘッダーバーにサブメニューを割当

外観 → カスタマイズ → ウィジェット → ヘッダーバー
→「ナビゲーションメニュー」ブロックを追加 → サブメニューを選択 → 公開

ナビゲーションメニューには名前が必要なので、適当に！　Gmenu2とでもしておきます。　そしてメニュとの連携が必要なので、プルダウンででてくるメニューから先ほど作った、Gメニュー2段を選択しておきます。

5) 仕上げ（必要なら入れる最少CSS）

外観 → カスタマイズ → 追加CSS に下だけ貼る → 公開

仕上げに入れるCSS

@media (min-width:1024px){
/* ヘッダーバー(下段)を白い帯にして、横に並べて少し詰める */
.p-headerBar, .p-headerBar .widget, .p-headerBar .widget_nav_menu { background:#fff; }
.p-headerBar .menu { display:flex; flex-wrap:wrap; gap:0 12px; row-gap:2px; margin:0; padding:4px 0; }
.p-headerBar .menu a { display:inline-block; padding:5px 10px; line-height:1.2; font-size:.95rem; white-space:nowrap; }

/* 上段(既存のグローバルナビ)も少しだけ引き締めたい場合（任意） */
.l-header__gnav a { padding:6px 10px; line-height:1.25; font-size:.95rem; }
}

これで得られること

• 上段＝主要リンク、下段＝補助リンクの2本レイヤーになり、ヒーロー画像へかぶらない
• コード競合のリスクがほぼゼロ（テーマ更新にも強い）
• 文字サイズや余白をCSSの数値だけで簡単に微調整

---

仕上がりの微調整（必要に応じて数値だけ変更）

• さらに詰めたい：.p-headerBar .menu a { padding:4px 8px; }
• 文字を小さく：font-size:.9rem;
• 行間をさらにタイト：line-height:1.15;

ナビゲーションは、グローバルのサブで用いたほうが良いようです。

今一度整理

グローバルメニューとナビゲーションメニュの違いと活用場所

**ブログでは「グローバルメニュー＝最重要導線（5〜7項目）」「ナビゲーションメニュー＝補助導線や箇所限定の案内」**として役割分担し、表示位置も“ヘッダー直下（グローバル）／ヘッダー上・下・サイド・フッター（ナビゲーション）”で住み分けるのが一般的です。

使い分けの基本

グローバルメニュー（テーマの「メニューの位置」に割り当て）

• 目的：サイト全体の“主要動線”。迷わず目的地へ。
• 中身：トップレベル5〜7項目に絞る（カテゴリ/サービス軸）。
  例）ホーム／ダイソー／ワイヤレスイヤホン／LDAC・コーデック／骨伝導／「どこの国？」シリーズ／特集
• 表示位置：ロゴの近く、ヘッダー直下の横一列（PC）。スマホはハンバーガー。
• 設計のコツ
  • ラベルは短く（日本語7〜9字目安）
  • 余った項目は**子メニュー（ドロップダウン）**へ整理
  • PCで2段化は避ける（高さが増えてUX低下＋崩れやすい）

ナビゲーションメニュー（ブロック/ウィジェットで任意場所に表示）

• 目的：補助導線・文脈限定の案内・再掲。
• 代表的な置き場所と役割
  • ヘッダーバー（ヘッダー上の細い帯）：お知らせ／セール／新着／人気記事
  • ヘッダー下（グローバルの下の帯）：特集・ランキング・メーカー一覧など“季節/企画枠”
  • サイドバー（カテゴリページで）：そのカテゴリ内のサブ目次・シリーズ一覧
  • フッター：会社情報／お問い合わせ／プライポリ／免責／サイトマップ等のユーティリティ
• 注意：グローバルと同じ中身を重複させない（役割がぶれるため）

PC/スマホ別の“配置の定石”

• PC
  • 上：ロゴ／検索／CTA（任意）
  • グローバルメニュー（横一列）：主要5〜7項目
  • 下：（任意）ナビゲーションメニューで特集帯やランキング
  • サイド：カテゴリ内だけのローカルナビ
  • フッター：法務・問い合わせ・再掲リンク
• スマホ
  • ヘッダーはロゴ＋ハンバーガーに集約
  • 補助リンクはフッターや記事下に回す（帯を増やさない）

SWELL前提での具体的なやり方

1. グローバルメニュー
   • 外観 → メニュー → 主要5〜7項目に絞って**「PC：グローバルナビ」**に割当
   • 収まりきらない項目は子メニュー（ドロップダウン）へ
   • もっと整理したい場合はメガメニュー化（プラグイン利用）で“上は少数・下層に多く”
2. ナビゲーションメニュー（補助導線）
   • 外観 → カスタマイズ → ウィジェット →
     ヘッダーバー or ヘッダー下 に「ナビゲーションメニュー」ブロックを追加
   • ここに「特集」「ランキング」「メーカー一覧」「どこの国シリーズ」など別メニューを割当
3. 二重表示を避ける
   • グローバルと同じものをウィジェットにも出さない
   • “主要＝グローバル”、“補助＝ナビゲーションメニュー”で中身を分ける

あなたのサイト向けサンプル

耳スタ（オーディオ特化）

• グローバル：ホーム／ダイソー／ワイヤレスイヤホン／LDAC・コーデック／骨伝導／「どこの国？」／特集
• ヘッダー下（ナビメニュー）：新着／ランキング／比較表／メーカー一覧／セール情報

TECN（総合テック）

• グローバル：ホーム／スマホ／PC／オーディオ／生活家電／ブログ運営／特集
• ヘッダー下：レビュー／比較／「どこの国？」シリーズ／セール／連載

運用チェックリスト（超実務）

• クリック分布を**GA4「行動→ナビゲーション」**で確認、上から並べ替え
• GSCの検索パフォーマンスで、グローバル項目が拾うクエリと合っているかを点検
• スマホは1段（ドロワー）固定、PCは1段＋子メニューが基本
• 半年に1回、グローバルの並びと数を棚卸し（増やしすぎ注意）

---

まとめ：
グローバル＝“全体の最短ルート”／ナビメニュー＝“文脈や企画で補助”。
まずはグローバルを5〜7項目に削り、あふれる分は子メニューやヘッダー下のナビへ。
“2段のグローバル”を無理に作るより、役割で分けて2本体制にした方が、崩れず・見やすく・成果も出やすいです。

SWELL　でグローバルメニュの2段表示方法　SEWLLでは難しいので

現実解①（いちばん簡単・崩れない）：メガメニュー化

上段は5–7項目に整理 → 余りは各親のドロップダウンに入れる（Max Mega Menu等）。
横幅不足問題を根本から解消でき、デザインも整います。

---

現実解②（本当に2段を並べる）：子テーマで“2段目の表示枠”を追加（推奨）

「グローバルメニュー（1段目）」の直下に別のメニュー位置を作って出力します。CSSの小手先ではなく、DOMとして2本にするので安定します。

手順（そのままやればOK）

1. 子テーマを有効化
   すでに子テーマ導入OKとのことなので、子テーマを有効化してください。
   （※ 追加CSSは子テーマ側にコピペしておく）
2. メニュー位置（2段目）を登録
   子テーマの functions.php に下を追記： // 2段目のメニュー位置を追加 add_action('after_setup_theme', function () { register_nav_menus([ 'global_nav_row2' => 'グローバルナビ（2段目）', ]); });
3. ヘッダーに“2段目のメニュー出力”を差し込む
   FTP / ファイルマネージャで
   • 親テーマ：/wp-content/themes/swell/header.php を子テーマへコピー（swell-child/header.php）
   • 子テーマの header.php を開き、1段目メニューを出している wp_nav_menu() の直後に下を貼り付け：
   <?php // グローバルナビ（2段目） wp_nav_menu([ 'theme_location' => 'global_nav_row2', 'container' => 'nav', 'container_class'=> 'c-gnav-row2', 'menu_class' => 'c-gnav-row2__list', 'depth' => 1, ]); ?> 目印は header.php 内の wp_nav_menu([... 'global_nav' ...]) です。そのすぐ下に入れればOK。
4. 管理画面で2段目の中身を作って割り当て
   • 外観 → メニュー → 新規作成「グローバルナビ（2段目）」
   • 表示したい項目を追加
   • メニューの位置で「グローバルナビ（2段目）」にチェック → 保存
5. 最小CSSで整える（PCだけ適用）
   外観 → カスタマイズ → 追加CSS に下を貼る： @media (min-width:1024px){ /* 2段目の帯（白背景・前面） */ .c-gnav-row2{ background:#fff; position:relative; z-index:10; } .c-gnav-row2__list{ display:flex; flex-wrap:wrap; gap:0 12px; row-gap:2px; margin:0; padding:6px 0; list-style:none; } .c-gnav-row2__list > li > a{ display:inline-block; padding:5px 10px; line-height:1.2; font-size:.95rem; white-space:nowrap; text-decoration:none; } /* 1段目が高すぎる場合は少し圧縮（任意） */ .l-header__gnav a{ padding:6px 10px; line-height:1.25; font-size:.95rem; } /* 下のヒーロー画像が被るのを防ぐ保険 */ .hero,.main-visual,.p-mainVisual,.l-visual{ position:relative; z-index:0; margin-top:0; } }

これで何が変わる？

• **“本物の2段”**になるので、ヒーロー画像に食い込む/重なる問題が構造的に解消
• 2段目は別メニューなので、並びや項目、文字詰めを自由にコントロール可能

---

どちらで行くか？

• 工期短く・ノーコードで：→ メガメニュー化（現実解①）
• どうしても2段：→ 子テーマで2段目位置追加（現実解②）

両方のやり方を行って、どうなるかを記事にします。

本記事が少しながくなってきたので、別記事にします。