いろいろなことをちゃんとしたいブログ

ちゃんとしたブログ

Wordpress

ヘッダーのメイン画像を条件分岐とCSSを使ってカテゴリー別や固定ページ別に違う画像を表示させる方法

投稿日:

カテゴリー毎や、固定ページ毎にヘッダーのメイン画像を変更したい場合、最初に思い浮かんだ方法として、それぞれにheader.phpを用意して get_header() で対応するphpファイルを読み込んでしまえば良いと考えました。
しかしこの方法は切り替えるページが少なければなんとかなりますが、沢山の沢山のテンプレートページができてしまいますし、何か変更が加わる度に、全てのテンプレートファイルの修正が必要になり、なんのためのphpなのかよく分からなくなってしまいます。

条件分岐を使う

そこで使用したいのが「条件分岐」と呼ばれるタグ。
要するに「もし◯◯の場合は1のテンプレート、そうじゃないなら2のテンプレートを使う」というように条件に応じて反映させる結果を変化させる事ができるわけです。
今回の、カテゴリー毎にヘッダー画像を変えたい時や、ページの説明を使い分けたい時など利用出来る範囲はかなり広いので覚えておくと便利。

条件分岐の基本的な記述1

<?php if( is_home() ) : // トップページの場合 ?>
 トップページだった場合の反映させたい内容を記述
<?php else : // トップページ以外の場合 ?>
 トップページ以外だった場合の反映させたい内容を記述
<?php endif; // 条件分岐終わり ?>

条件分岐の基本的な記述2

<?php if( is_home() ) : // トップページの場合 ?>
<?php elseif( is_month() ) : // 月別ページの場合 ?>
<?php else : // それ以外の場合 ?>
 それ以外だった場合の反映させたい内容を記述
<?php endif; // 条件分岐終わり ?>

条件分岐で使うタグ

is_home():トップページかどうかを判断
if(is_front_page()):フロントページかどうかを判断(固定ページをトップにしている場合)
if(is_single()):single.php 個別ページかどうかを判断
if(is_page());page.php 固定ページかどうかを判断

CSSと条件分岐を使って切り替える

条件分岐の記述

<?php if( is_home() ) : // フロントページの場合 ?>
 ここはトップページです
<?php elseif( is_single() ) : // 個別ページの場合 ?>
 記事のタイトルは<?php the_title(); ?>です。
<?php else : // それ以外の場合
$cat = get_the_category();
$cat = $cat[0];
?>
<div class="cat-<?php echo $cat->cat_ID; ?>"></div>
<?php endif; ?>

cat-cat_ID;の部分で
cat-カテゴリーのID番号を出力
という状態で書き出されるようになっている。
なのでCSSは
.cat-1 { }
.cat-3 { }
.cat-12 { }
などの形でそれぞれのカテゴリーに応じたCSSを読み込むように設定する。

CSSの記述

.cat-1 {
background:url(images/main_01.jpg) no-repeat;
width: 980px;
height: 250px;
} 
.cat-2 {
background:url(images/main_02.jpg) no-repeat;
width: 980px;
height: 250px;
} 
.cat-3 {
background:url(images/main_03.jpg) no-repeat;
width: 980px;
height: 250px;

-Wordpress
-, ,

Copyright© ちゃんとしたブログ , 2019 All Rights Reserved.