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

転載内容です

この記事のコードは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' → オーバーレイ
''  → ノーマル