カテゴリごとに背景を切り替えたい

背景といったスタイル情報を定義するのはCSSなので、
あらかじめCSSで背景パターンを定義しておけばいいわけですが、
カテゴリによって異なったクラス名やID名を、どうやってHTMLの中に埋め込むかというところでしょう。
愚直な方法ですが、やってみたいと思います。

1.カテゴリを作成し、スラッグを定義する。
今回はカテゴリのスラッグをCSSクラス名にしてみたいと思います。
半角小文字でスラッグを入れておいてください。
今回は、(カテゴリー名)カテゴリーA | (スラッグ)cat_a と、
(カテゴリー名)カテゴリーB | (スラッグ) cat_b という2つのカテゴリーを作成しました。

0720-1

2.wp-content/themes/twentytwelve/style.css にCSSを定義します。

.cat_a {
    background-color:black;
}
.cat_b {
    background-color:navy;
}

3.wp-content/themes/twentytwelve/header.php のの下の行を以下のように書き換えます。

<body <?php body_class(); ?>>
<div id="page" class="hfeed site<?php if(strlen($cat) > 0){ $cats = get_category($cat); echo ' ' . $cats->slug; } ?>">
    <header id="masthead" class="site-header" role="banner">
        <hgroup>

4.各カテゴリーページを確認してみると、該当DIVの範囲の背景色が変わります。

0720-2

いろいろ応用できそうですね。

カテゴリー: 未分類   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

* Copy This Password *

* Type Or Paste Password Here *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>