Kadence テーマでページごとにヘッダーの見た目を変えるには、変えたい度合いに応じて方法を選びます。背景を透明にして画像に重ねる程度なら無料版の「透明ヘッダー」とページ単位の設定で足ります。ヘッダーそのものを消して LP 専用のヘッダーを置くこともページ単位で可能です。まったく別のレイアウトのヘッダーを条件で出し分けたい場合は、有料の Kadence Pro の機能を使うか、子テーマで CSS やメニューの切り替えを組み合わせます。この記事では、それぞれの方法の手順と、どこでつまずきやすいかを説明します。
先に知っておきたい Kadence のヘッダーの仕組み
Kadence のヘッダーは、カスタマイザーのヘッダービルダーで作る「サイト共通のヘッダー」が1つあり、それに対して次のような変化を付ける仕組みです。
- 透明ヘッダー: 共通ヘッダーの背景を透明にして、ページ上部の画像などに重ねる表示。ロゴや文字色を通常時とは別に設定できます。
- 固定（スティッキー）ヘッダー: スクロールしても上部に残る表示。こちらも見た目を別に設定できます。
- ページ単位の設定: 投稿やページの編集画面のサイドバーにある Kadence の設定パネルで、透明ヘッダーの有効・無効、ヘッダーやページタイトルの表示・非表示などを個別に指定できます。
つまり無料版の範囲では、「共通ヘッダー」「透明ヘッダー」「ヘッダーなし」の3通りをページごとに選べる、と考えると整理しやすくなります。メニューの項目やボタンの文言までページごとに変えたい場合は、後述する Pro の機能かコードが必要です。
なお、Kadence はカスタマイザーの項目名や無料版と Pro の機能の区分が更新で変わることがあります。この記事では目的ごとに説明しているので、実際の画面の表記は使っているバージョンで確認してください（2026年10月現在の情報です）。
作業の前に
ヘッダーの設定はサイト全体の見た目に影響します。次の準備をしてから始めてください。
- サイトのバックアップを取る。可能ならステージング環境で試す。
- コードを追加する場合は子テーマを使う。Kadence は公式に子テーマのひな形を配布しているほか、一般的な手順で自作することもできます。
- カスタマイザーで設定を大きく変える前に、現在の設定を控えておく。Customizer Export/Import のような、カスタマイザー設定を書き出せるプラグインを使う方法もあります。
方法1：透明ヘッダーでトップページや LP だけ見た目を変える
メインビジュアルのあるトップページやキャンペーンページだけ、ヘッダーを画像に重ねたいという要望が最も多いパターンです。
- カスタマイザーのヘッダー設定の中から透明ヘッダーの項目を開きます。
- 透明ヘッダーを有効にする範囲を選びます。投稿タイプ単位（固定ページ全体、投稿全体など）で有効にでき、全体では無効にしておいて特定のページだけ有効にする運用も可能です。
- 透明ヘッダー用のロゴ、文字色、ホバー色を設定します。暗い画像に重ねるなら白いロゴを用意しておくと見やすくなります。
- 対象のページを編集画面で開き、サイドバーの Kadence の設定パネルで透明ヘッダーを「有効」にします。ほかのページは「既定」のままにしておけば、カスタマイザーの設定に従います。
つまずきやすいのは、ヘッダーがコンテンツに重なる分、ページ先頭のブロックが隠れることです。カバーブロックなどを先頭に置き、上側の余白をヘッダーの高さ以上にとってください。もう1つは文字の読みやすさです。明るい部分のある写真に白い文字のメニューが重なると読めなくなるため、カバーブロックのオーバーレイを濃くするなどしてコントラストを確保します。
方法2：ページ単位でヘッダーを消して専用ヘッダーを置く
LP のように、通常のナビゲーションを見せずにロゴと申し込みボタンだけを置きたい場合は、そのページだけテーマのヘッダーを非表示にし、ページ本文の先頭に専用のヘッダーを作ります。
- 対象ページの Kadence の設定パネルで、ヘッダーを表示しない設定にします（必要に応じてフッターやページタイトルも非表示にします）。
- ページ本文の先頭に、グループブロックや横並びブロックでロゴとボタンを配置します。
- 複数の LP で同じヘッダーを使うなら、そのまとまりを同期パターンとして保存しておくと、1か所の修正で全ページに反映できます。
この方法はコードを書かずに済み、ページごとの自由度も高いのが利点です。一方で、ここで作るヘッダーはテーマのヘッダー機能ではないので、固定表示やスマートフォン用のメニュー開閉は自分で用意する必要があります。LP のように1画面で完結するページ向けの方法と考えてください。
方法3：Kadence Pro の条件付きヘッダーを使う
「会員向けページではメニューもロゴも違うヘッダーを出したい」「特定のカテゴリーの記事だけ別のヘッダーにしたい」といった、レイアウトから異なるヘッダーを条件で出し分けたい場合は、有料アドオンの Kadence Pro に含まれる条件付きヘッダーの機能が候補になります。ヘッダービルダーで別のヘッダーを作り、表示する条件（ページ、投稿タイプ、ログイン状態など）を指定する仕組みです。
Pro にはほかにも、指定した位置にブロックで作ったコンテンツを差し込む機能（Elements）があり、ヘッダーの上に告知バーを出すといった用途にも使えます。ただし、どの機能がどのプランに含まれるか、条件にどんな項目を選べるかは変わることがあるため、導入前に Kadence の公式ドキュメントで最新の内容を確認してください。
方法4：子テーマのコードで見た目とメニューを切り替える
Pro を使わずに、特定のページだけヘッダーの色を変えたり、メニューを別のものに差し替えたりすることもできます。ヘッダーの構造は共通のままで、見た目と中身の一部だけ変える方法です。
まず、対象ページの body に目印のクラスを付けます。子テーマの functions.php に追加します。
<?php
// 指定したスラッグの固定ページに目印のクラスを付ける
add_filter( 'body_class', function ( $classes ) {
if ( is_page( array( 'lp-spring', 'campaign' ) ) ) {
$classes[] = 'header-variant-lp';
}
return $classes;
} );このクラスを手がかりに、子テーマの CSS でヘッダーの見た目を変えます。
.header-variant-lp .site-header {
background-color: #0b3d2e;
}
.header-variant-lp .site-header a {
color: #ffffff;
}Kadence が出力するヘッダーの要素やクラス名はバージョンで変わる可能性があるため、ブラウザーの開発者ツールで実際の要素を確認してからセレクターを決めてください。セレクターを細かく指定しすぎると、テーマ更新で効かなくなる原因になります。
メニューを差し替えるには、WordPress コアの wp_nav_menu_args フィルターを使います。「外観」→「メニュー」で LP 用のメニューを作っておき、対象ページでだけそれを使わせます。
<?php
// LPページでは、メインメニューの位置に別のメニューを表示する
add_filter( 'wp_nav_menu_args', function ( $args ) {
if ( is_page( 'lp-spring' )
&& isset( $args['theme_location'] )
&& 'primary' === $args['theme_location'] ) {
$args['menu'] = 'LPメニュー'; // 作成したメニューの名前・スラッグ・IDのいずれか
}
return $args;
} );'primary' はメニューの位置の名前です。Kadence が登録している位置の名前は「外観」→「メニュー」の「位置の管理」などで確認し、スマートフォン用のメニューに別の位置が割り当てられている場合は、その位置も条件に加えてください。
切り替えたあとの確認ポイント
- スマートフォン表示: Kadence のヘッダービルダーはデスクトップとモバイルで別々のレイアウトを持っています。片方だけ設定してもう片方を忘れることが多いので、両方の幅で確認します。
- キャッシュ: ページキャッシュや CDN を使っていると、設定を変えても古いヘッダーが表示されます。変更後はキャッシュを削除し、ログアウトした状態やシークレットウィンドウでも確認します。
- レイアウトのずれ: 透明ヘッダーと通常ヘッダーでロゴの大きさが違うと、読み込み時に表示がずれる（CLS）ことがあります。ロゴ画像の幅と高さをそろえておくと防ぎやすくなります。
- 固定ヘッダーとの組み合わせ: 透明ヘッダーと固定ヘッダーを併用すると、スクロール後は固定ヘッダー側の見た目に切り替わります。両方の色設定を確認してください。
まとめ
- Kadence の無料版では、共通ヘッダーに対して「透明ヘッダー」「ヘッダーなし」をページ単位で選べる。
- 画像に重ねたいだけなら透明ヘッダー、LP で別のヘッダーを置きたいならヘッダーを非表示にしてブロックで作る。
- レイアウトから異なるヘッダーを条件で出し分けるなら Kadence Pro の条件付きヘッダーが候補。機能の範囲は公式ドキュメントで確認する。
- コードで対応するなら、
body_classで目印を付けて CSS で見た目を変え、wp_nav_menu_argsでメニューを差し替える。 - 変更後は、モバイル表示、キャッシュ、ロゴの大きさによる表示のずれを確認する。