はじめに
複数のページで構成されているWordpressサイトで、固定ページやカスタム投稿、カテゴリーやタームの大枠のデザインは一緒だけど「ヘッダーの画像を変える」ことで、閲覧者へ違うページであることをぱっと見で伝えられるというメリットがあります。
テーマファイルの数は出来るだけ少なめに、コードもできるだけシンプルに、でも閲覧者が混乱してしまうようなデザインにならない様にします。
PHPではそれぞれ条件分岐を書きますが、実際に画像をページの種類によって変えるのは、CSSで行っていますので簡単に実装が可能です。
完成イメージ
完成イメージは以下の画像です。
背景に画像があり、その上にタイトルが表示されているという形です。
画像は、固定ページ、カスタム投稿、カテゴリー、ターム等で変えます。
コード
とりあえずコードだけって方はこちらから。
<?php
//homeかfrontページなら表示するheader
if( is_home() || is_front_page()):
?>
<div id="container">
<div class="Contents-wrap">
<?php
//home以外で、カスタム投稿archiveだったら表示するheader
elseif(is_post_type_archive()):
?>
<div id="container">
<div class="Contents-wrap-sub">
<section class="subheader-image custom-arch">
<h1><?php
//カスタム投稿の名前を取得し、h1に表示
$taxonomy = $wp_query->get_queried_object;
echo esc_attr($taxonomy->label); ?></h1>
</section><!--//class="subheader-image"-->
<?php
//home以外で、archiveだったら表示するheader
elseif(is_archive()): ?>
<div id="container">
<div class="Contents-wrap-sub archive">
<section class="subheader-image">
<h1 class='page-title'><?php echo get_the_archive_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php
//home以外で、固定ページだったら表示するheader
elseif(is_page()): ?>
<div id="container">
<div class="Contents-wrap-sub page">
<section class="subheader-image-pc">
<h1><?php the_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php
//home以外で、archive以外だったら表示するheader
else: ?>
<div id="container">
<div class="Contents-wrap-sub">
<section class="subheader-image post">
<h1><?php the_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php endif; ?>
コード解説
「ヘッダーの画像を変える」ので当然ですが、header.phpにコードを書きます。
TOPページなのか下層ページなのか
//homeかfrontページなら表示するheader
if( is_home() || is_front_page()):
?>
<div id="container">
<div class="Contents-wrap">
header.phpはすべてのテンプレート共通で使用されるテンプレートですので、条件分岐の一番上には必ずif( is_home() || is_front_page()):を入れて、homeなのか、下層ページなのかを区別します。
大抵のWebサイトのTOPページは、他の下層ページとはデザインが違うため、別のコードを用意します。
ここでは画像を表示せず、そのままコンテンツが表示される様になっています。
アーカイブページ
ここはコメントにもある様に「カスタム投稿アーカイブだった場合の条件分岐」です。
<?php
//home以外で、カスタム投稿archiveだったら表示するheader
if(is_post_type_archive()):
?>
<div id="container">
<div class="Contents-wrap-sub">
<section class="subheader-image custom-arch">
<h1><?php
//カスタム投稿の名前を取得し、h1に表示
$taxonomy = $wp_query->get_queried_object;
echo esc_attr($taxonomy->label); ?></h1>
</section><!--//class="subheader-image"-->
「カスタム投稿アーカイブ」は、register_post_typeの引数has_archiveをtrueにする必要があります。
プラグイン（Custom Post Type UI）でカスタム投稿を作成した場合は、「アーカイブあり」をtrueにします。
titleはタクソノミー名を表示します。
ここで大切なのは、section class=にcustom-archを入れていることです。
このclassを変えることで、CSSでそれぞれの条件にあった画像を表示させることができます。
以下も同様にclassを入れています。
変数に入れてコードをシンプルにもできますが、今回は初心者向けなので分かりやすくしています。
コードは、メンテナンス性も考えて実装するのが理想なので、何を どのように 行っているのかが見て分かる様にしているのが良いと思います。
カテゴリとターム
<?php
//home以外で、archiveだったら表示するheader
elseif(is_archive()): ?>
<div id="container">
<div class="Contents-wrap-sub">
<section class="subheader-image">
<h1><?php echo get_the_archive_title(); ?></h1>
</section><!--//class="subheader-image"-->
ここではカテゴリ、ターム一覧表示をarchiveでまとめて分岐しています。
細かくカテゴリやタームの種類で分けたい時は、この下に条件分岐を追加します。
<?php
//home以外で、archiveだったら表示するheader
elseif(is_archive()): ?>
<div id="container">
<div class="Contents-wrap-sub">
<?php
if(is_category('カテゴリslug')):
?>
<section class="subheader-image category">
<h1><?php echo get_the_archive_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php
elseif(is_tax('タームslug')):
?>
<section class="subheader-image term">
<h1><?php echo get_the_archive_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php
endif; ?>
細かく分ける例としてはこんな感じでしょうか？
カテゴリでも、タームでもget_the_archive_title();で名称が取得できるので、
<?php
//home以外で、archiveだったら表示するheader
elseif(is_archive()): ?>
<div id="container">
<div class="Contents-wrap-sub">
<?php
if(is_category('カテゴリslug')):
?>
<section class="subheader-image category">
<?php
elseif(is_tax('タームslug')):
?>
<section class="subheader-image term">
<?php
endif; ?>
<h1><?php echo get_the_archive_title(); ?></h1>
</section><!--//class="subheader-image"-->
でも良いかもしれないですね。（sectionの部分だけ分岐させている）
固定ページとその他のページ
あとは固定ページ用とそれ以外の条件から漏れたページ用の分岐です。
<?php
//home以外で、固定ページだったら表示するheader
elseif(is_page()): ?>
<div id="container">
<div class="Contents-wrap-sub">
<section class="subheader-image page">
<h1><?php the_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php
//home以外で、archive以外だったら表示するheader
else: ?>
<div id="container">
<div class="Contents-wrap-sub">
<section class="subheader-image post">
<h1><?php the_title(); ?></h1>
</section><!--//class="subheader-image"-->
<?php endif; ?>
CSSで表示する画像を指定
subheader-imageに表示する画像の大きさを指定し、h1のタイトルをその中の上下中央、左寄せに表示します。
.subheader-image {
position:relative;
width:100%;
height:300px;
}
.subheader-image h1 {
position:absolute;
top:50%;
left:5%;
font-weight:bolder;
}
それぞれの条件で付与したclassの画像を指定します。
.custom-arch {
background-images:url('画像のurl01');
}
.archive {
background-images:url('画像のurl02');
}
.page {
background-images:url('画像のurl03');
}
.post {
background-images:url('画像のurl04');
}
カテゴリとタームの分岐をさせている場合はこちらも追加
.category {
background-images:url('画像のurl05');
}
.term {
background-images:url('画像のurl06');
}
うまく表示されない
うまく表示されない場合は、大体「条件分岐」が思ったようにされていないことが原因なので、デベロッパ―ツールなどを利用して、<section class="subheader-image">の中にどのclassが入っているかを確認しながら、「自分はどういう条件の時にどの画像を表示したいのか」を再度整理してコードの修正をしてみてください。
また、表示されない原因で、CSSのbackground-imagesのURLの相対参照先（../images/等）が間違えていたりもするので、そこも含めて確認してください。
まとめ
今回は、それほど難易度の高くない、条件分岐とCSSを利用してヘッダーの画像を変える機能を実装しました。
個別ページは、画像部分をCSSで指定せず、アイキャッチを利用して表示するやり方もあるので、また機会があれば紹介したいと思います。
毎度、WPで15年ほどWebサイトを制作していますが、独学の為、解釈が違ったり記述が間違えていたりという部分あるかと思います。その場合は、ぜひコメントで教えていただけると幸いです。