特定カテゴリーのページのみヘッダーメニューを変更する

2025/05/26 一部コード変更

変更適用イメージ

特定のカテゴリーページでのみヘッダーメニューを変更する方法

このサイトでは、以下のようにカテゴリーが階層化されています:

• 趣味の部屋
  • ゲーム
    • スーパーマリオギャラクシー

ここでは、スーパーマリオギャラクシーのページでのみヘッダーメニューを変更したいとします。

↓イメージ

変更手順

1. 通常時と切り替えたいヘッダーメニューを作成します。
   (条件分岐を行うのでいくつでも製作可能です。)
2. テーマファイルエディター内の [functions.php] を編集する必要がありますので、注意が必要です。

ヘッダーメニューの作成手順

1. [外観] > [メニュー] に移動します。
2. [新しいメニューを作成しましょう] をクリックします。
3. 【メニュー構造】で、わかりやすい自分自身のメニュー名を入力します。
4. メニューを保存します。
5. 【メニュー項目を追加】で、必要な項目にチェックを入れ、メニューに追加します。
6. メニューを保存します。

これを必要な分だけ繰り返します。

メインのヘッダーメニューは【メニュー設定】で、〈ヘッダーメニュー〉と〈ヘッダーモバイルメニュー〉にチェックを入れておきます。
(特定のページにだけ表示するメニューはチェックを入れません)

メニューIDの確認方法

1. [外観] > [メニュー] に移動します。
2. プルダウンメニューから特定のページでのみ使用したいメニューを選択し、選択ボタンをクリックします。
3. すると、URLの最後の部分に「menu=〇」と表示されます。〇の部分の数字がメニューIDです。

テーマの編集

ここからは、functions.phpを編集します。

間違った操作をすると最悪、初期化しなければならないためバックアップ推奨。

[外観] > [テーマ] > [Theme Functions (functions.php)]に移動します

そこに、下記コードを貼り付け

add_filter( 'wp_nav_menu_args', 'cocoon_change_header_menu_by_category', 10, 1 );
function cocoon_change_header_menu_by_category( $args ) {

    if ( !isset($args['theme_location']) || $args['theme_location'] !== 'navi-header' ) {
        return $args;
    }

    if ( is_page( 'カテゴリースラッグ1' ) || is_category( 'カテゴリースラッグ1' ) || ( is_singular( 'post' ) && has_category( 'カテゴリースラッグ1' ) ) ) {
        $args['menu'] = 'メニューID'; 
    }
    elseif ( is_page( 'カテゴリースラッグ2' ) || is_category( 'カテゴリースラッグ2' ) || ( is_singular( 'post' ) && has_category( 'カテゴリースラッグ2' ) ) ) {
        $args['menu'] = 'メニューID'; 
    }

    return $args;
}

上記コード内の ‘カテゴリースラッグ1’ ‘カテゴリースラッグ2’ ‘メニューID’ は実際の環境で必要なものに変更する。

• カテゴリースラッグ1, カテゴリースラッグ2
  ヘッダーメニューを変更したいカテゴリーのカテゴリースラッグを記入
  [投稿] > [カテゴリー] の各スラッグの部分
  (3つ以上のカテゴリーでヘッダーメニューを変更する場合は、11～13行目の部分をコピーして増やしていけばいい)
• メニューID
  上で確認した変更したいメニューのメニューIDを記入

ファイルを更新で終了。

これでヘッダーメニューを特定のカテゴリーでのみ変更することはできました。

まとめ

需要がないからか検索しても全然方法が出てこないので試行錯誤の末なんとか形にはした感じです。

---

記事を読んでわかりにくいところとか、疑問なところがあればコメントください。
できる限りお答えさせていただきます。