WordPressで作成したページで、ヘッダー画像をページごとに変える方法になります。
今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。
プラグインなしで簡単にできましたのでご紹介します。
ファイル作成が面倒ですが、条件分岐で変更できるので、「header.php」が一つで済みますので後々楽かな？
それでは、wordpressのテーマにある「header.php」の表示させたい部分に以下の条件分岐を記述します。
メニュー部分の下に表示させたいなら、その後ろに記述してください。
<!-- ヘッダー画像 条件分岐 -->
<div id="gazou-area">
<?php
if ( is_front_page() ) { //frontページ（TOPページなど）の時は、
get_template_part( 'frontimages' ); //frontimages.phpというファイルを読み込みます。
} elseif ( is_page(red) ) { //http://○○○.com/red の時は、
get_template_part( 'redimages' ); //redimages.phpというファイルを読み込みます。
} elseif ( is_page(blue) ) { //http://○○○.com/blue の時は、
get_template_part( 'blueimages' ); //blueimages.phpというファイルを読み込みます。
} elseif ( is_page(yellow) ) { //http://○○○.com/yellowの時は、
get_template_part( 'yellowimages' ); //yellowimages.phpというファイルを読み込みます。
} elseif ( is_page(black) ) { //http://○○○.com/black の時は、
get_template_part( 'blackimages' ); //blackimages.phpというファイルを読み込みます。
} elseif ( is_page(white) ) { //http://○○○.com/white の時は、
get_template_part( 'whiteimages' ); //whiteimages.phpというファイルを読み込みます。
} elseif ( is_single(green) ) { //http://○○○.com/green の時は、
get_template_part( 'greenimages' ); //greenimages.phpというファイルを読み込みます。
} else {
// それ以外
}
?>
</div><!-- /gazou-area-->後は、それぞれのテンプレートファイル（読み込まれるファイル）frontimages.phpを作成します。
そして、frontimages.phpの中に
<div class="frontimages">
<div class="images-mian">
<div class="container">
<h1>それぞれのテンプレートファイル（読み込まれるファイル）</h1>
<p>後は、それぞれのテンプレートファイル（読み込まれるファイル）を作成します。</p>
</div>
</div>
</div>div#gazou-area div.frontimages {
background-image: url(http://test2.j-land.jp/wp-content/uploads/2020/10/frontimages.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
}PHPコードとCSSコードを書き出力になります。
また、複数のheader.phpをまとめたい場合は、ディレクトリの中に専用のフォルダ（images-main）などを作り、各PHPファイルを入れてもOKです。
その場合はパスが変わりますので修正してください。
<!-- ヘッダー画像 条件分岐 -->
<div id="gazou-area">
<?php
if ( is_front_page() ) { //frontページ（TOPページなど）の時は、
get_template_part( '/main-images/frontimages' ); //frontimages.phpというファイルを読み込みます。
} elseif ( is_page(red) ) { //http://○○○.com/red の時は、
get_template_part( '/main-images/redimages' ); //redimages.phpというファイルを読み込みます。
} elseif ( is_page(blue) ) { //http://○○○.com/blue の時は、
get_template_part( '/main-images/blueimages' ); //blueimages.phpというファイルを読み込みます。
} elseif ( is_page(yellow) ) { //http://○○○.com/yellowの時は、
get_template_part( '/main-images/yellowimages' ); //yellowimages.phpというファイルを読み込みます。
} elseif ( is_page(black) ) { //http://○○○.com/black の時は、
get_template_part( '/main-images/blackimages' ); //blackimages.phpというファイルを読み込みます。
} elseif ( is_page(white) ) { //http://○○○.com/white の時は、
get_template_part( '/main-images/whiteimages' ); //whiteimages.phpというファイルを読み込みます。
} elseif ( is_single(green) ) { //http://○○○.com/green の時は、
get_template_part( '/main-images/greenimages' ); //greenimages.phpというファイルを読み込みます。
} else {
// それ以外
}
?>
</div><!-- /gazou-area-->以上になります。