はじめに
複数のページで構成されている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サイトを制作していますが、独学の為、解釈が違ったり記述が間違えていたりという部分あるかと思います。その場合は、ぜひコメントで教えていただけると幸いです。