ワードプレスでカテゴリー毎に背景色を変更したいです

質問

ワードプレス（テーマはスティンガー3）を使用しています。

今回ご教授願いたい内容なんですが、

記事一覧の抜粋記事の背景をカテゴリー毎に設定したいというものです。

自分なりに検索して調べたところ、記事につけたスラッグを使って条件分岐させてcssでクラスごとに指示を出す。

と色々試してみましたが、できません。（php、cssともに初心者です。）

http://akaandmore.com/blog/archives/12

こちらのサイトなども参考にさせてもらったんですが、上手くできませんでした。

なにか不足している情報がありましたら追記していきますので、解決の手助けを宜しくお願いします。

回答No.1

russun

スラッグがうまく設定出来ていない可能性も考えてカテゴリーIDでの分岐を提案してみます。

■HTML
<!--ループ-->
<div class="bgcolor-<?php $cat_now = get_the_category();$cat_now = $cat_now[0];$now_id = $cat_now->term_id ;echo $now_id; ?>">
記事内容
</div>
<!--ループここまで-->

■CSS
.bgcolor-1 {
background-color:#ff0000;
}

.bgcolor-2 {
background-color:#ffff00;
}

※「1」「2」の部分はカテゴリーのIDを入れて下さい。
カテゴリーのIDの確認はWPの管理画面でカテゴリーを編集するときのURL内のtag_ID=となってる箇所を確認するのが早いと思います。

お礼

ご教授ありがとうございます。早速、記入していただいたコードを入れてみました。

私なりの言い方（専門知識がないのですいません）になりますので、上手く伝わるか分かりませんが・・・。

結果を先に言いますと、レイアウトが崩れてしまう現状です。

<div class="entry" data-href="<?php the_permalink();?>"> ←ここを変更しました。
<script>
(function($){
  $(function(){
    $('div.entry').click(function(){
        window.location = $(this).data('href');
           });
  });
})(jQuery);
</script>

一部を抜粋するとトップページ部分はこうなっているので上記「←部分」をとりあえず

<div class="bgcolor-<?php $cat_now = get_the_category();$cat_now = $cat_now[0];$now_id = $cat_now->term_id ;echo $now_id; ?>">

に変更し、

cssの方も

.bgcolor-1 {
background-color:#ff0000;
}

このまま追記、変更してみました。

崩れ方が自分で検索して試した時と全く一緒なのでやはり、変更部分が間違っているのでしょうか？

<div class="entry"

これが抜粋記事の装飾をしている部分なのでこちらだと思っているのですが・・・。

ちなみに、自分なりで検索して試みた時の参考サイトがこちらになります。

http://simplehack.net/wordpress/recommend-css-regular-performance/

こちらのまま、function.phpにコードを追加してhome.php（同じ箇所）を変更しました。

そしてこちらが今やろうとしているサイトになります。

http://arromanches-ngy.sakura.ne.jp/wp/

※IDにつきましては、=category&tag_ID=4&post_type=postでしたので

.bgcolor-4

でcssに記入しておりました。