カテゴリーに合わせて、ヘッダーのメニューとフッター・サイドバーの案内を切り替える方法を紹介します。
そこでヘッダーとフッターの内容をカテゴリーに合わせて変更するカスタマイズをしてみました。
ヘッダーは掲載PHPで判定し、フッターやサイドバーの内容は制限エリアとブログパーツで出し分けます。
メニューを切り替えても、URLやサイト構成を分割する処理は行いません。
掲載コードはSWELL 2.19.0のメニュー位置を対象にしています。
別テーマではメニュー位置の登録名を確認して変更する必要があります。
［ヘッダー］グローバルメニューをカテゴリーごとに変更する
ダッシュボード > メニュー > 新しいメニューを作成しましょう。
をクリック
今回はWordPressというカテゴリーページの記事を表示した時にグローバルメニューを子カテゴリーの内容にしてみます。
名前は｢wp-menu｣としています。
最後にメニューを保存ボタンを押し忘れないようにしましょう。
バックアップを取り、子テーマのfunctions.phpへ下記を追加します。
Code Snippetsで登録する場合はfunctions.phpへ重複して追加しないでください。
PHPの設置先としてCode Snippetsを使う場合も、既存の同名関数と重複しないか確認します。
function waza_is_category_branch( $root_id ) {
$root_id = absint( $root_id );
if ( ! $root_id ) return false;
if ( is_category() ) {
$ids = [ get_queried_object_id() ];
} elseif ( is_singular('post') ) {
$ids = wp_get_post_categories( get_queried_object_id() );
if ( is_wp_error($ids) ) return false;
} else {
return false;
}
foreach ( $ids as $id ) {
if ( (int) $id === $root_id || cat_is_ancestor_of($root_id, (int) $id) ) return true;
}
return false;
}
function waza_category_nav_args( $args ) {
// SWELLのPCヘッダーとスマホ開閉メニューだけを対象にする。
if ( ! in_array($args['theme_location'] ?? '', ['header_menu', 'nav_sp_menu'], true) ) return $args;
if ( ! waza_is_category_branch(3) ) return $args;
$menu = wp_get_nav_menu_object('wp-menu');
if ( ! $menu || is_wp_error($menu) ) return $args;
$args['menu'] = $menu->term_id;
return $args;
}
add_filter('wp_nav_menu_args', 'waza_category_nav_args');カテゴリーIDの3とメニュー名wp-menuを自分の設定へ変更します。
指定カテゴリーとその子孫の一覧、およびそこに属する通常の投稿が対象です。
固定ページ・検索結果・対象外のカテゴリーは元の設定を保ちます。
複数カテゴリーが付いた通常投稿は、そのうち1つでも指定カテゴリーまたは子孫に一致すれば対象です。
対象外カテゴリーも付いているという理由で除外されるわけではありません。
専用メニューが見つからない場合、このフィルターは元のメニュー引数を返します。
メニューの外枠やリンク内のHTMLはテーマに任せます。
フッターメニュー、スマホ用ヘッダー内メニュー、ウィジェットの独立メニューは変更しません。
引数の詳細はWordPress公式のwp_nav_menu()リファレンスを参照してください。
対象カテゴリーと対象外の記事を、それぞれURLから直接開いて切り替えを確認します。
直接開くと切り替わり、サイト内の遷移だけで古いメニューが残る場合は、PHPの条件ではなく、キャッシュやPjaxによる共通ヘッダーの再利用を確認します。
導入先でSWELLの「ヘッダーをキャッシュする」が有効な場合は、変更前の設定を記録して無効化し、確認対象ページのキャッシュを消して再確認します。
WP Rocketなどのページキャッシュを使用している場合は、そのキャッシュも確認対象です。
掲載したPHPはページ生成時に判定します。
Pjaxでヘッダーを作り直さない構成では、通常のページ読み込みへ戻して確認してください。
フッターの遅延読み込み設定を、このメニュー切り替えのために変更する必要はありません。
下の画像は旧実装時の記録です。
旧コードはすべてのメニューを変更していましたが、掲載コードはメニュー位置で対象を限定しています。
スマホ開閉メニューも同じ条件で切り替える場合は、「スマホ開閉メニューをキャッシュする」の設定を記録してから無効化し、対象・対象外の両方で開閉を確認します。
下の画像は旧表示例です。
掲載コードの対象範囲は、続く「切替結果を確認する順番」で照合してください。
切替結果を確認する順番
対象カテゴリーの子だけを付けた記事を開き、PCヘッダーのリンクが専用メニューになることを確認します。
スマホではメニューボタンを開き、同じ専用メニューのリンクを確認してから閉じます。
次に対象外の固定ページへ通常のページ読み込みで移動し、元のメニューへ戻ることを確認します。
2026年10月2日にこの3つの画面を実SWELLで確認し、対象記事でもフッターの通常メニューが維持されることを確認しました。
下の画面は専用メニューを隔離環境で作成した実例で、本番サイトのメニュー設定は変更していません。
ロゴ画像の切替は2026年10月3日にPCで追加確認しましたが、Widget Optionsの設定保存とPjax・WP Rocketを組み合わせた遷移は引き続き未検証です。
追記│ヘッダーロゴとメニューを変更する
カテゴリーごとにロゴとメニューを変更する実装があったので、コードを改修しました。
コードのリファクタリング
メニュー名の変更は上のコードのwp-menuを書き換えます。
別のcustom_nav_args関数を追加する必要はありません。
// 上の waza_category_nav_args を使います。
// 同名関数を追加せず、カテゴリーIDとメニュー名を上のコードで変更してください。ロゴ画像の場合
WordPresテーマSWELLの「swell_head_logo」のフックを使用。
カテゴリーID3関連の場合、ロゴを変更します。
add_filter('swell_head_logo', function( $logo ) {
if ( ! function_exists('waza_is_category_branch') || ! waza_is_category_branch(3) ) return $logo;
$replacement = ''; // メディアライブラリのロゴ画像URLを入力。
return $replacement !== '' ? esc_url_raw($replacement) : $logo;
});画像ロゴと対象外ページへの復帰を確認する
ロゴ切替のコードは、上のカテゴリー判定関数と同じ設置先に追加します。
$replacementにメディアライブラリで公開済みの画像URLを入力し、カテゴリーIDの3をメニュー用コードと同じ値へ変更してください。
画像URLが空なら既存のロゴを返すため、サンプルコードを貼っただけでは画像は変わりません。
2026年10月3日、WordPress 7.1.2・SWELL 2.19.0で画像ロゴを設定し、対象の子カテゴリー一覧に専用画像と専用メニューが出ることをPCで確認しました。
専用メニューのリンクをEnterで開いて対象外の固定ページへ進むと、通常の画像とメニューへ戻りました。
本文のカテゴリー判定は画像URLを選ぶ処理であり、フッターの画像置換や共通ヘッダーのキャッシュ制御まで行うものではありません。
フッターに画像を配置する手順はSWELLのフッターロゴの設定を参照してください。
今回の新しい画像ロゴ条件はPCのみの確認で、スマホとPjaxを使う導入先では別途確認が必要です。
追記│制限エリアブロック+ブログパーツ
SWELLの制限エリアブロックでカテゴリー別等の表示ができるようになりました。
ブログパーツと組み合わせて、ウィジェットにショートコードを入れてあげれば、
フッターやサイドバー、記事下等でカテゴリー別に表示の出し分けができます。
制限エリアでカテゴリー別の案内を作る手順
まずブログパーツを新規作成し、カテゴリーごとの案内やリンクを「制限エリア」ブロックの中に入れます。
ブロックのページ制限でカテゴリーの条件を選び、記事ページにも一覧ページにも表示したい場合は、個別ページとアーカイブの両方を対象にします。
対象カテゴリーを選んでブログパーツを公開し、外観のウィジェットからフッターやサイドバーへ、そのブログパーツを呼び出すブロック・ウィジェットを配置します。
共通の問い合わせ先など、すべてのページで必要な情報は制限エリアの外へ置きます。
表示条件の異なる案内は、制限エリアを分けて作成します。
| 設定方法 | 親カテゴリーだけを指定した場合 | 子カテゴリーも対象にする方法 |
|---|---|---|
| この記事のメニューPHP | 親とその子孫のカテゴリー一覧・通常の投稿が対象 | 親のIDを指定する |
| SWELLの制限エリア | 指定したカテゴリーに一致する一覧・投稿が対象 | 表示したい子カテゴリーも明示的に選択する |
子カテゴリーだけを付けた投稿、親カテゴリーの一覧、子カテゴリーの一覧、検索結果を開き、案内が意図した場所だけに出るか確認します。
WordPress 7.1.2・SWELL 2.19.0の実レンダリングでは、親IDのみと親子IDの両方を指定した場合を含む7条件を確認しました。
ウィジェットの保存画面とキャッシュ込みの遷移は別途確認が必要です。
ウィジェットの［フッター］コンテンツをカテゴリーごとに変更する
フッターコンテンツの切り替え方法です。
以下はWidget Optionsを使った旧設定例です。
現在の管理画面での設定保存は再検証していません。
これからSWELLで作成する場合は、上の制限エリアとブログパーツの手順を先に選べます。
ダッシュボード > プラグイン > 新規追加から Widget Optionsで検索します。
今すぐインストールボタンを押して、有効化しましょう。
ダッシュボード > 外観 > ウィジェット へ
旧画面ではウィジェット下部で表示条件を指定しています。
適用後は対象カテゴリーと対象外ページの両方を開き、意図しないページにも表示されていないか確認します。
［サイドバー］コンテンツをカテゴリーごとに変更する
フッターと基本的にやり方は一緒です。
ウィジェットをWidget Optionsで設定してあげます。
サイドバーも対象ページと対象外ページで確認します。
表示が更新されない場合は、先に該当ページのキャッシュを消し、利用中のキャッシュ設定を確認してください。
カテゴリー別人気記事ランキングの作り方
以下は旧Widget Options方式の流れです。
カテゴリーで絞り込むだけでは人気順にはならないため、ランキングにする場合は投稿リスト側の並び順も確認してください。
カスタムHTML欄でショートコードが動くとは限らないため、現在の設置方法は上の制限エリア・ブログパーツの手順を優先します。
- SWELLのブログパーツを開きます。
- 投稿リストブロックを作成してカテゴリーでソートしてあげて公開。
- 発行されたショートコードをウィジェットのカスタムHTMLに挿入。
- あとはWidget Optionsでカテゴリーで制限をかけると即席で作成できます。
旧例のプラグイン方式と、SWELLの制限エリア方式を同じウィジェットへ重ねる前に、それぞれの表示条件と設置場所を確認してください。
カテゴリーごとにヘッダーのグローバルメニューとフッター/サイドバーの内容を変更する方法まとめ
本記事ではカテゴリーごとにヘッダーのグローバルメニューとフッター/サイドバーの内容を変更する方法を書きました。
ヘッダーとフッターは共通パーツなので、カテゴリーには関係のない情報が表示されてしまうのを避けたい場合は、本記事のカスタマイズで擬似的に特化サイトっぽく見せても良いと思います。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
旧custom_nav_args関数とそのadd_filterはバックアップ後に外し、掲載コードを子テーマのfunctions.phpまたはCode Snippetsの片方へ1回だけ登録します。
戻す場合は今回の関数・フィルターを外し、必要ならバックアップを復元してください。
ロゴ例は上の判定関数と併用します。
旧設定画面は操作場所の参考です。
2026年10月2日・3日の隔離環境で撮影した画像は、各説明に記載した条件だけの検証結果です。
2026年10月1日以降の隔離環境では、カテゴリーによるメニューの適用範囲に加え、PCの画像ロゴ切替と通常リンクによる対象外ページへの復帰を確認しています。
Pjaxでメニューが残る場合の設定と再確認
| 確認順 | 結果の見方 |
|---|---|
| 対象外からカテゴリー記事へリンクで移動 | URLと本文だけでなく、ヘッダーメニューのラベルを見る |
| SWELLのPjax設定を記録して無効化 | ページを再読込してから同じリンクを開く |
| 対象外へ戻り、ブラウザーの戻るを使う | 通常メニューとカテゴリー専用メニューを往復して確認する |
2026年10月3日のSWELL 2.19.0では、実Pjaxでカテゴリー記事へ移動すると通常メニューが残り、Pjaxを無効にした通常読込ではカテゴリー専用メニューへ切り替わりました。
通常読込では対象外へ戻ったときの通常メニューと、ブラウザーの戻るでカテゴリー記事へ復帰したときの専用メニューも確認しました。
この方法ではフッターメニューを変更しないため、カテゴリー記事でも通常のフッターメニューを維持します。
メニューの切替を優先する導入先では、変更前のSWELL高速化設定を保存してからPjaxを無効にし、ヘッダーのキャッシュ設定と合わせて対象・対象外の両方を再確認してください。
以前のPjax設定へ戻す場合は、通常メニューが残る条件も再確認します。
この検証はメニューの切替が対象で、Pjax中の画像ロゴ、Widget Options、WP Rocketとの組み合わせを検証したものではありません。
