WordPressのブログ投稿ページで、カテゴリ毎にヘッダー画像を変える方法

WordPressのブログでカテゴリ毎にヘッダー画像を変える方法をお知らせします。

ワードプレスにはブログ形式の投稿ページと、普遍的な情報を載せるための固定ページの2種類あります。ヘッダーの画像をカテゴリ毎に変える場合、固定ページはテンプレート機能を使えばいいのですが、投稿ページのテンプレートはカテゴリ毎に変えられません。

下記のカスタマイズを行えば、カテゴリ毎にヘッダー画像を変える事ができるようになります。

1. header.phpなどに下記のコードを加えます。

<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<div class="cat-<?php echo $cat->"cat_ID; ?>"></div>

2.スタイルシートに下記のコードを加え、画像のURLを指定します。

.cat-1 {
background:url(images/sample1.jpg) no-repeat;
width: 740px;
height: 200px;
}

.cat-2 {
background:url(images/sample.jpg) no-repeat;
width: 740px;
height: 200px;
}

.cat-3 {
background:url(images/sample.jpg) no-repeat;
width: 740px;
height: 200px;
}

.cat-4 {
background:url(images/sample.jpg) no-repeat;
width: 740px;
height: 200px;
}

catはカテゴリ番号です。カテゴリ番号は、ダッシュボードの[投稿]→[カテゴリ]で、該当のカテゴリをクリックすると、http://(中略)=category&tag_ID=XXXといったURLが表示されます。このXXXがカテゴリ番号です。

幅や高さは適宜調整してください。

PHPを修正する場合は、事前にバックアップを取りましょう。

投稿者プロフィール

数藤圭介
数藤圭介
株式会社ネクスト・アクション代表取締役。プロデューサー/Webマーケティング戦略コンサルタント。複数の企業・団体の顧問を務める。
ワードプりす
お気軽にお問合せください ワードプレスやWebマーケティングにおける様々な課題(集客向上、成約向上、費用削減、運営改善)をお聞かせください。初回のお打合せは無料です。
お申込み・お問合せ
トップへ戻る