特定のページのみカスタマイザーとは別のタイプのヘッダー位置を指定する

投稿日 2020年12月11日
更新日 2020年12月18日
著者アクツユミ
カテゴリースニペット

転載内容です

この記事のコードはSnow Monkey 公式フォーラムで回答されていたものを転載しています
（カスタマイズ情報として検索結果から見つけやすいよう &　自分のスニペット用に記事化しただけの全力パクリ記事です・・・すみません）

特定のページ（特にトップページなど）は、ヘッダにスライダーやカバー、全幅の画像などが入っており、ヘッダをそこにかぶせたいですよね。（いわゆるオーバーレイ）
そんなときは下記コードで対応することができます。

PCのヘッダ位置をコントロールしたい場合

add_filter(
	// PC 用ヘッダー位置をカスタマイズ
	'theme_mod_header-position-lg',
	function( $value ) {
		// フロントページの場合
		if ( is_front_page() ) {
			// オーバーレイ&固定
			return 'sticky-overlay';
		}
		// それ以外はカスタマイザーで設定したヘッダー位置
		return $value;
	}
);

スマホのヘッダ位置をコントロールしたい場合

add_filter(
	// スマホ用ヘッダー位置をカスタマイズ
	'theme_mod_header-position',
	function( $value ) {
		// フロントページの場合
		if ( is_front_page() ) {
			// オーバーレイ＆固定
			return 'sticky-overlay';
		}
		// それ以外はカスタマイザーで設定したヘッダー位置
		return $value;
	}
);

その他

フィルターフックの名称が「theme_mod_header-position」と「theme_mod_header-position-lg」でスマホかPCを設定します
if文の条件を変えたら、特定のページだけではなく、特定のページ以外も可能です

//返す値の選択肢

'sticky' → 固定
'sticky-overlay' → オーバーレイ（上部固定）
'sticky-overlay-colored' → オーバーレイ（上部固定 / スクロール時白）
'overlay' → オーバーレイ
''  → ノーマル