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

変更適用イメージ

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

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

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

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

↓イメージ

変更手順

1. 通常時と変更したい場合の2種類のヘッダーメニューを作成します。
   (私のサイトの場合は2種類しか作成していませんが、3種類以上でも同じように切り替えることができます)
2. テーマファイルエディター内の [functions.php] を編集する必要がありますので、注意が必要です。

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

1. [外観] > [メニュー] に移動します。
2. [新しいメニューを作成しましょう] をクリックします。
3. 【メニュー構造】で、わかりやすい自分自身のメニュー名を入力します。
4. メニューを保存します。
5. 【メニュー項目を追加】で、必要な項目にチェックを入れ、メニューに追加します。
6. 【メニュー設定】で、〈ヘッダーメニュー〉と〈ヘッダーモバイルメニュー〉にチェックを入れておきます。
   (メインのヘッダーメニューのみです。特定のページにだけ表示するメニューはチェックを入れません)
7. メニューを保存します。

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

メニューIDの確認方法

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

テーマの編集

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

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

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

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

add_filter( 'wp_nav_menu_args', 'cocoon_change_global_menu', 10, 1 );
function cocoon_change_global_menu( $args ) {
if ( is_page( 'カテゴリースラッグ' ) || ( is_singular( 'post' ) && has_category( 'カテゴリースラッグ' ) ) ) {
$args['menu'] = 'メニューID';
}
return $args;
}  Copy code

上記コード内の赤文字は実際の環境で必要なものに変更する。

• カテゴリースラッグ
  ヘッダーメニューを変更したいカテゴリーのカテゴリースラッグを記入
  [投稿] > [カテゴリー] の各スラッグの部分
• メニューID
  上で確認した変更したいメニューのメニューIDを記入

ファイルを更新で終了。

補足

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

ただ、致命的な欠陥があります。

この方法だとなぜかヘッダーメニューだけでなくフッターメニューまで変更されてしまいます…。

いろいろ試してみたもののどうにもならなかったため、当サイトではフッターメニューがおかしなままの状態で運用しています。

むしろ、わかる人は教えていただけるとありがたいです。

まとめ

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

まだまだ改良の余地はあるのでアップデートしていこうと思います。

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