WordPress カテゴリー毎にヘッダ画像をCSSで変更する方法 2011年2月22日
Tag: | |

wordpressで制作するにあたって、カテゴリー毎にヘッダ画像を変更したい事は多いと思います。
テンプレートタグとCSSで実装できる方法を記載します。

1.header.php内に下記を記述

<?php if( is_home() ) : // フロントページの場合 ?>
<?php elseif( is_month() ) : // 月別ページの場合 ?>
<?php else : // それ以外の場合
$cat = get_the_category();
$cat = $cat[0];
?>
<div class="cat-<?php echo $cat->cat_ID; ?>"></div>
<?php endif; ?>

2.cssの記述は下記の通り

(※赤字部分は自サイトに合わせて変更)

.cat-1 {
background:url(images/head_img01.jpg) no-repeat;
width: 900px;
height: 250px;
}

.cat-2 {
background:url(images/head_img02.jpg) no-repeat;
width: 900px;
height: 250px;
}

.cat-3 {
background:url(images/head_img03.jpg) no-repeat;
width: 900px;
height: 250px;
}

New

Aechive

Tag

css Facebook facebookカスタマイズ Facebookページ font functions.php google NEWマーク RSS single.php webツール WEBデザインツール Wordpress アーカイブ カスタム カスタムフィールド カスタムフィールドテンプレート カスタム投稿 カテゴリー カレンダー サイドバー ターム テキスト テンプレートタグ プラグイン ヘッダ ページ ポップアップ メニュー 並び替え 並べ替え 人気 便利 分岐 印刷 年別アーカイブ 投稿 投稿記事 改行 文字数 文法チェック 最新記事 月別アーカイブ 特定カテゴリー 画像