WordPressでページごとにヘッダーメニューを変更する方法｜3つの設定手順
WordPressでホームページを運営していると、「特定のページだけヘッダーメニューを変更したい」「サービスページでは、そのサービスに関係する項目だけを表示したい」と感じることはありませんか。
通常、WordPressのヘッダーメニューはサイト全体で共通の内容が表示されます。しかし、プラグインやテーマの機能、PHPコードを活用すれば、ページごとに異なるメニューを表示することが可能です。
今回は、初心者でも取り組みやすいプラグインを使った方法から、ブロックテーマや人気テーマ「SWELL」での設定方法まで、具体的な手順を紹介します。
WordPressでページごとにヘッダーメニューを変更できる？
結論からいうと、WordPressではページごとにヘッダーメニューを変更できます。
ただし、使用しているテーマによって設定方法が異なります。
ヘッダーメニューとは、ホームページの上部に表示される「ホーム」「サービス」「会社概要」「お問い合わせ」などのリンクをまとめた部分です。
一般的には「グローバルナビゲーション」または「グローバルナビ」とも呼ばれます。
ページごとにメニューを変更するメリット
ページの内容や目的に合わせてヘッダーメニューを変更すると、訪問者が必要な情報を見つけやすくなります。
例えば、次のような活用方法があります。
- トップページ：サービス・制作実績・会社概要・お問い合わせを表示
- サービスページ：サービス一覧・料金・導入事例・お問い合わせを表示
- 採用ページ：仕事内容・社員紹介・募集要項・応募フォームを表示
- キャンペーンページ：キャンペーン詳細・よくある質問・申し込みを表示
このようにメニューを整理することで、訪問者が目的のページへ移動しやすくなります。
特に、企業サイトやサービス紹介サイトなど、複数の目的を持つホームページでは効果的な設計方法の一つです。
ただし、メニューを変更すれば必ず問い合わせが増えるわけではありません。訪問者が迷わず操作できることを優先する必要があります。
ヘッダーメニューを変更する前に確認すること
設定を始める前に、現在使用しているWordPressテーマの種類を確認しましょう。
主なテーマには、従来型の「クラシックテーマ」と、サイト全体をブロックで編集できる「ブロックテーマ」があります。
クラシックテーマの場合
SWELLやLightningなど、従来型のメニュー管理機能を利用するテーマでは、一般的に次の場所からメニューを設定します。
WordPress管理画面 → 外観 → メニュー
この画面では、複数のメニューを作成したり、表示するリンクを変更したりできます。
ただし、標準のメニュー設定だけでは、特定の固定ページに応じて自動的にメニューを切り替えられない場合があります。
その場合は、プラグインやPHPコードを利用します。
ブロックテーマの場合
Twenty Twenty-Fiveなどのブロックテーマでは、通常「外観 → エディター」からメニューを編集します。
ブロックテーマでは、ナビゲーションブロックやテンプレートを利用して、ページごとに異なるヘッダーを作成できます。
まずは、自分のサイトで「外観 → メニュー」と「外観 → エディター」のどちらが利用できるか確認してみましょう。
方法1：プラグインでページごとにヘッダーメニューを変更する
クラシックテーマを利用している場合、比較的簡単なのが専用プラグインを使う方法です。
おすすめの選択肢の一つが「Conditional Menus」です。
Conditional Menusは、固定ページや投稿、カテゴリーなどの条件に応じてメニューを切り替えられるプラグインです。
WordPress標準のメニュー機能を使用するテーマに対応しています。ただし、テーマ独自のナビゲーション機能などでは、事前の動作確認が必要です。
手順1：表示したいメニューを作成する
まず、WordPress管理画面から「外観 → メニュー」を開きます。
続いて、次の手順で新しいメニューを作成しましょう。
- 「新しいメニューを作成しましょう」をクリックする
- メニュー名を入力する
- 「メニューを作成」をクリックする
- 表示したい固定ページやカスタムリンクを追加する
- 「メニューを保存」をクリックする
例えば、以下の2種類を用意します。
- 通常メニュー：ホーム・サービス・会社概要・お問い合わせ
- サービス専用メニュー：サービス一覧・料金・導入事例・お問い合わせ
専用メニューは、この段階では通常のグローバルナビの表示位置に割り当てる必要はありません。
手順2：Conditional Menusをインストールする
- 管理画面の「プラグイン → プラグインを追加」を開く
- 検索欄に「Conditional Menus」と入力する
- 開発元がThemifyのプラグインを確認する
- 「今すぐインストール」をクリックする
- インストール後に「有効化」をクリックする
インストール後は、メニュー管理画面から表示条件を設定できるようになります。
手順3：メニューの表示条件を設定する
「外観 → メニュー」を開き、「位置の管理」タブを選択します。
ヘッダーメニューの表示位置に対して、次の操作を行います。
- 「Conditional Menu」をクリックする
- 先ほど作成した「サービス専用メニュー」を選択する
- 「Conditions」または「+ Conditions」をクリックする
- 対象となる固定ページを選択する
- 条件を確定し、設定を保存する
これで、指定した固定ページではサービス専用メニューが表示され、それ以外のページでは通常メニューが表示される設定になります。
設定画面の名称は、プラグインのバージョンや管理画面の言語によって異なる場合があります。
手順4：実際のページで確認する
設定後は、必ずホームページを実際に開いて確認しましょう。
- トップページで通常メニューが表示されているか
- 指定した固定ページで専用メニューに変わるか
- メニューのリンク先が正しいか
- スマートフォンでも問題なく操作できるか
特にスマートフォンでは、PC用とは別のメニューが設定されている場合があります。
PCだけでなく、スマートフォン表示も確認することが大切です。
方法2：ブロックテーマのテンプレートでメニューを変更する
ブロックテーマを使用している場合は、プラグインを追加せずに対応できるケースがあります。
その際に利用するのが「テンプレート」と「ナビゲーションブロック」です。
テンプレートとは、ページのヘッダーや本文、フッターなどの配置を決めるひな形のことです。
手順1：専用テンプレートを作成する
- WordPress管理画面から「外観 → エディター」を開く
- 「テンプレート」を選択する
- 新しいテンプレートを追加する
- 通常の固定ページを参考に、専用ページのレイアウトを作成する
- 必要なヘッダーと本文エリアを配置する
テンプレートを追加する操作や表示される項目は、テーマによって多少異なります。
手順2：専用ヘッダーとメニューを設定する
通常のヘッダーをそのまま変更すると、同じヘッダーを使用するほかのページにも影響する可能性があります。
そのため、専用のヘッダーテンプレートパーツを作成し、対象のテンプレートに配置する方法が適しています。
テンプレートパーツとは、ヘッダーやフッターなど、複数のページで再利用できる部品のことです。
専用ヘッダー内のナビゲーションブロックで、新しいメニューを作成するか、あらかじめ用意したメニューを選択します。
既存メニューを編集すると、そのメニューを共有するほかの場所にも変更が及ぶ場合があります。別の構成にしたいときは、新しいメニューを作成しましょう。
手順3：対象の固定ページに適用する
- 「固定ページ → 固定ページ一覧」を開く
- メニューを変更したいページを編集する
- ページ設定の「テンプレート」を確認する
- 作成した専用テンプレートを選択する
- ページを保存して表示を確認する
この方法なら、ページのデザインとメニューをまとめて管理できます。
サービス紹介用や採用ページ用など、複数のページで共通の専用ヘッダーを使用したい場合にも便利です。
方法3：SWELLでページごとにヘッダーメニューを変更する
WordPressテーマ「SWELL」を利用している場合も、ページごとにヘッダーメニューを切り替えることが可能です。
SWELLでは「外観 → メニュー」からグローバルナビを管理できますが、固定ページによる切り替えには追加のカスタマイズが必要になる場合があります。
ここでは、WordPressのPHPコードを利用する方法を紹介します。
手順1：切り替え用メニューを作成する
まず「外観 → メニュー」から、通常のグローバルナビとは別に「サービス専用メニュー」を作成します。
メニューには、サービス一覧・料金・導入事例・お問い合わせなど、表示したいリンクを追加して保存します。
このとき、通常のグローバルナビの割り当ては変更しないようにしましょう。
手順2：PHPコードを追加する
SWELLでは、WordPressの「wp_nav_menu_args」というフィルターフックを利用して、表示するメニューを条件に応じて変更できます。
フィルターフックとは、WordPressが処理するデータを、表示前などのタイミングで変更できる仕組みです。
例えば、固定ページのURLが「/service/」の場合だけ、メニューを変更するコードは次のようになります。
function custom_page_header_menu( $args ) {
if (
is_admin() ||
! isset( $args['theme_location'] ) ||
'header_menu' !== $args['theme_location']
) {
return $args;
}
if ( is_page( 'service' ) ) {
$args['menu'] = 'サービス専用メニュー';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'custom_page_header_menu' );このコードは、SWELLのグローバルナビで使用される「header_menu」というメニュー位置を対象にした記述例です。実際のテーマバージョンや構成で利用できることを確認してから使用してください。
コードの重要な部分を説明します。
- is_page(‘service’)：スラッグが「service」の固定ページか確認する
- header_menu：変更対象をSWELLのグローバルナビに限定する
- サービス専用メニュー：切り替え先のメニュー名を指定する
「service」は対象の固定ページのスラッグに、「サービス専用メニュー」は実際に作成したメニュー名に置き換えてください。
コードは、SWELLの子テーマのfunctions.php、またはPHPコードを管理できるCode Snippetsなどのプラグインに追加できます。
Code Snippetsに登録する場合は、PHPスニペットとして追加してください。通常、先頭の「<?php」は不要です。
なお、テーマのfunctions.phpを直接編集すると、記述ミスによってサイトにエラーが発生する可能性があります。必ずバックアップを取り、可能であればテスト環境で確認してください。
手順3：SWELLのキャッシュ設定を確認する
コードを追加してもメニューが切り替わらない場合は、キャッシュが影響している可能性があります。
キャッシュとは、以前表示した情報を一時的に保存し、表示を高速化する仕組みです。
SWELLでは、管理画面の「SWELL設定 → 高速化」からヘッダーのキャッシュ設定を確認できます。
ページごとにヘッダーを切り替える場合は、必要に応じて「ヘッダーをキャッシュする」を一時的に無効化し、動作を確認しましょう。
キャッシュ削除だけでは解決せず、ページ別の表示内容が共通化される場合には、該当するキャッシュ設定を無効のまま運用する必要があります。
また、SWELLではPC用グローバルナビとスマートフォン用メニューが別々に管理される場合があります。このコード例はPC側のグローバルナビを対象としているため、スマートフォン側を変更したい場合は別途設定が必要です。
ページごとにヘッダーメニューを変更するときの注意点
ページ別のメニュー設定は便利ですが、適切に管理しなければ訪問者が迷う原因にもなります。
メニューの変更を必要最小限にする
ページを移動するたびにメニューの構成が大きく変わると、訪問者がどこにいるのか分かりにくくなる場合があります。
企業サイトでは、会社概要やお問い合わせなどの重要な導線をなるべく共通化することも検討しましょう。
必要な項目だけを追加・変更することで、一貫した操作性を保ちやすくなります。
スマートフォンの表示を確認する
WordPressテーマによっては、次のようなメニューが個別に設定されています。
- PC用グローバルナビ
- スマートフォン用ヘッダーメニュー
- スマートフォンの開閉メニュー
- 画面下部の固定メニュー
PC側のメニューを変更しても、すべてのメニューが自動的に切り替わるとは限りません。
特にスマートフォンでは、メニューが開かない、項目が多くて操作しにくいといった問題が起こっていないか確認しましょう。
CSSで非表示にする方法との違いを理解する
CSSを使い、特定ページのメニュー項目を非表示にする方法もあります。
ただし、CSSで「display: none」を指定する方法は、メニューそのものを切り替えるものではありません。
表示上は項目が消えても、元のHTMLにはメニュー項目が残ります。
また、テーマのHTML構造が変更されるとCSSが効かなくなる場合もあります。
ページによってメニュー構成を大きく変更する場合は、プラグインやテンプレート、PHPによる切り替えを検討するほうが管理しやすいでしょう。
リンク切れや導線の不足に注意する
専用メニューを作成した際には、各リンクが正しいページへ移動するか確認することも重要です。
特に「お問い合わせ」「予約」「申し込み」など、訪問者の行動につながるリンクは慎重に設定しましょう。
メニューを変更して必要な情報への導線が失われてしまっては、かえって使いにくいホームページになってしまいます。
WordPressのヘッダーメニュー変更に関するよくある質問
Q. プラグインを使わずにページごとにメニューを変更できますか？
はい、可能です。
ブロックテーマでは専用テンプレートやナビゲーションブロックを利用できます。また、クラシックテーマでもPHPコードによる条件分岐で対応できる場合があります。
ただし、テーマによってカスタマイズ方法が異なるため、事前の確認が必要です。
Q. 特定の固定ページだけメニューを変更できますか？
はい。Conditional Menusなどのプラグインでは、対象の固定ページを指定してメニューを切り替えられます。
PHPコードでも、is_page()という条件分岐関数を使用することで、特定のページだけを対象にできます。
Q. ページごとにヘッダーメニューを変更するとSEOに悪影響がありますか？
メニューを変更すること自体が、直接SEOに悪影響を与えるとは限りません。
ただし、重要なページへのリンクを減らしすぎると、訪問者が情報を探しにくくなったり、サイト内のリンク構造が変わったりします。
SEOだけを意識してメニューを増減させるのではなく、利用者にとって分かりやすいナビゲーションを設計することが重要です。
Q. SWELLでメニューを変更したのに反映されません。なぜですか？
主に次のような原因が考えられます。
- 対象ページのスラッグが間違っている
- 指定したメニュー名が一致していない
- PHPコードの条件が正しく設定されていない
- SWELLやサーバーのキャッシュが残っている
- PC用とスマートフォン用のメニュー設定が異なる
まず設定内容を確認し、必要に応じてキャッシュを削除して再読み込みしてみましょう。
Q. ページごとにメニューを変更するなら、どの方法がおすすめですか？
クラシックテーマで簡単に切り替えたい場合は、Conditional Menusなどのプラグインが候補になります。
ブロックテーマの場合は、専用テンプレートの作成が適しています。
一方、SWELLなどで細かな表示条件を設定したい場合は、PHPコードによるカスタマイズも選択肢です。
使用しているテーマと、変更したいページ数、今後の更新方法を考えて選びましょう。
まとめ｜ページに合ったヘッダーメニューで使いやすいサイトに
WordPressでは、使用しているテーマやサイト構成に応じて、ページごとにヘッダーメニューを変更できます。
今回紹介した主な方法は、次の3つです。
- 方法1：Conditional Menusなどのプラグインで切り替える
- 方法2：ブロックテーマの専用テンプレートを利用する
- 方法3：SWELLなどでPHPコードによる条件分岐を設定する
大切なのは、単純にメニューを変更することではなく、訪問者が必要な情報に迷わずアクセスできる状態を作ることです。
サービスページや採用ページなど、目的が明確なページでは、関連する項目を整理することで、より使いやすいホームページを目指せます。
一方で、変更範囲が広い場合やPHPコードの編集が必要な場合は、サイト全体への影響も考慮しなければなりません。
設定に不安がある場合は、WordPressのカスタマイズに対応したWeb制作者へ相談することも一つの方法です。
現在のホームページの構成を見直し、訪問者にとって分かりやすく、目的につながるヘッダーメニューを設計していきましょう。
