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ページ facebooRSS font functions.php google NEWマーク photoshop RSS SEO single.php webツール WEBデザインツール Wordpress アイコン アーカイブ エディタ カスタム カスタムタクソノミー カスタムフィールド カスタムフィールドテンプレート カスタム投稿 カテゴリー カレンダー クリップアート サイドバー ターム テキスト テンプレートタグ パターン ブラシ プラグイン ヘッダ ページ 人気 便利 分岐 文法チェック 月別アーカイブ 特定カテゴリー 画像 記事