WordPressでカテゴリー毎に表示スタイルを変更する方法

WordPressで、CSSを利用してカテゴリーごとにスタイルを変更する方法をメモ。MovableTypeにはそういったプラグインがあったが、WordPressにはプラグインが無い(見つからない)ので力技で対応。例えば特定カテゴリーだけヘッダー部分の背景を赤色にしたい場合などに使う。

例:カテゴリー「日記」「写真」のタイトル文字色をそれぞれ青と赤にする

1.カテゴリーごとに英文字でカテゴリースラッグをつける

カテゴリー作成時(作成済みの場合は編集画面)のカテゴリースラッグ欄に、英数字で名前をつけておく。この名前を後々cssのクラス名として使う。
今回の例の場合、「日記」のカテゴリースラッグを「diary」に、「写真」のカテゴリースラッグを「photo」にする。

2.カテゴリーを表示するテンプレート(今回はarchive.php)にカテゴリースラッグを出力

ページの階層は以下の通り。divのクラス属性としてカテゴリースラッグを出力するphpコードを挿入する。また、月別や日別アーカイブの時には表示しないように、if文でカテゴリーページの時だけclassを表示するようにする。

CODE:
  1. <div id="contents"<?php if (is_category()) { ?> class="<?php $cat = get_the_category(); $cat = $cat[0];{echo $cat->category_nicename;} ?>"<?php } ?>>
  2.     <h2 class="pagetitle"><?php echo single_cat_title(); ?></h2>
  3.     <p>内容</p>
  4. </div>

この状態で日記のカテゴリーページにアクセスすると

CODE:
  1. <div id="contents" class="diary">
  2.     <h2 class="pagetitle">日記</h2>
  3.     <p>内容</p>
  4. </div>

と出力され、写真のカテゴリーページにアクセスすると

CODE:
  1. <div id="contents" class="photo">
  2.     <h2 class="pagetitle">写真</h2>
  3.     <p>内容</p>
  4. </div>

と出力される。

3.スタイルシートを記述

ここまでくれば、あとはスタイルシートで各々のタイトルに色を設定するだけ。

CSS:
  1. div.diary h2.pagetitle {
  2.     color: #00F;
  3. }
  4. div.photo h2.pagetitle {
  5.     color: #F00;
  6. }

もちろん文字色だけでなく、背景色などスタイルシートで設定できるものはすべて変更可能。これを使えばカテゴリーごとにページのデザインをガラッと変更できる。


Tag:, ,

ブックマーク: このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加ツイートツイート


関連するエントリー


■コメント

21 コメント

  1. WordPressで特定のページのみコンテンツを表示する方法 - A.K.A and more ブログ says:

    [...] ■記事 « WordPressでカテゴリー毎に背景などのスタイルを変更する方法 [...]

  2. suito says:

    はじめまして、こんにちは。
    カテゴリー毎のスタイル変更、参考にさせていただきました。
    ありがとうございました!

    ところで、現在私が制作中のサイトで、1つの記事を「新着情報」と「カテゴリーA」の2つのカテゴリーに属させているのですが、新着情報のIDの方が若いため、記事ページのスタイルに、新着情報のものが適用されています。
    制作の都合上、新着情報のIDは変更したくないのですが、変更せず、記事に「カテゴリーA」のスタイルを適用させることは可能でしょうか?

    お時間がある時に教えていただければ幸いです。
    よろしくお願いいたします。

  3. kr9 says:

    はじめまして。ほったらかしにしていたので返事が遅れました。
    簡単に出来る方法としては、プラグインでその記事のメインのカテゴリを指定してしまうという方法があります。
    プラグインもいろいろあると思いますが、パッと探したものはこれ。
    http://wordpress.org/extend/plugins/be-main-category/
    試していないのでわかりませんが、おそらく投稿の際にメインのカテゴリを選べる類のプラグインではないかと思います。
    これを使用すれば、2つのカテゴリに属していてもメインのカテゴリースラッグが出力されると思います。多分。
    ダメだったらまた他の方法を考えてみましょう。

  4. suito says:

    お返事ありがとうございました!
    さっそく試してみましたが、残念ながら変化なしでした。
    ソースを見ても、新着情報の方のclassが効いているようです。
    もしかすると私の使用しているWordPressのバージョンが2.3.3だからかもしれません。
    (投稿画面でMain Categoryは無事選べたのですが…)
    またお時間のある時にお教えいただければ大変助かります。
    よろしくお願いいたします。

  5. レゾン says:

    すいません。
    最近、ワードプレスを使い始めたんですが、全くわからない状態です。
    コメントとかもURL入力が出来ない状態ですしスタイルシートも変更したいんですが、更新ボタンがありません。

    教えてもらえたらありがたいです。

  6. shikichi says:

    カテゴリーが3つの場合は、どのようにするのでしょうか?

  7. やました says:

    参考になりました!
    また違う記事も拝見させていただきますね!!

  8. カテゴリースラッグを出力する | Pikato Design says:

    [...] A.K.A and more WORDPRESS Codex カテゴリー: wordpress   タグ: WordPress   作成者: pikato [...]

  9. WordPressで同人小説サイトを作ってみた | 雨過天晴 says:

    [...] 小説カテゴリの時だけ違うスタイルを設定するか、 ・WordPressでカテゴリー毎に表示スタイルを変更する方法 [...]

  10. トップページの個別記事の背景をカテゴリ別に変更に挑戦 says:

    [...] 参考サイト:アシタコンナコトシテアソブ [...]

  11. ルイヴィトンバッグ2915新作 says:

    ルイヴィトンダミエ
    長財布l字ファス
    ナー
    ルイヴィトン長
    財布ヴェルニロー
    ズポップ
    ルイヴィトンエピ折りたたみ財

    http://fukustock.com/viewtopic.php?pid=499

  12. ルイヴィトンヴェルニ財布ローズ says:

    ルイヴィトン財布ヴェルニ

    ルイヴィトンの財
    布一番人気
    ルイヴィトンエピバッグ

    http://tgreat.ru/o-studii/blog/podgotovka-k-svadbe-vybor-tsvetovoj-gammy

  13. Plantar Warts says:

    While some may experience gout pain by intermittent flashes
    of attack, some sufferers on the other hand experience the discomfort of gout during cold temperature or from
    immobility. The magnetic fields in the earth organize the human body to completely a
    wonderful extent. Ill-fitting shoes may also cause pain because
    they tend to squeeze the foot, causing the pressure inside the increase.

  14. Hillary Amborn says:

    > Waste is a huge issue with food production Waste in total might But the food production which results from pigs eating waste is very small remember 90%+ of the energy is lost Especially if you actually compare it to the alternative which would be using the waste http://www.return-address-labels.info/item/label/single/106869605928543972/silver-glitter-look-wedding-address-labels.html for ethanol production or heat > to reduce our footprint in terms of Which implies an almost completely plant based 40% of all grain is used for feed , if we used it for people instead the US in particular could feed 800million people extra The savings you can get by feeding pigs waste is _insignificant_ in For the main grass fed cattle point I have this to say Edit: link to 90%

  15. bridal shower invitations templates says:

    When you follow your bliss… doors will open where you would not have thought there would be doors and where there wouldn’t be a door for anyone else.

  16. カジュアル コーデ says:

    ガールが気になるのはオシャレですよね。いろいろなスーツやドレスが季節毎にトレンドになりますから。やっぱり最旬の素敵な服を着たいというのは、女の希望です。そんな時は最旬のトレンドの商品をたくさん紹介しているショップを見てみるのがマジでおすすめです。それに値段も大切です。高額ばかりじゃなくて安くてもお洒落な商品は探せばたくさんあります。オシャレにもお小遣いがかかりますが、頭を使って安く済ませたいならネットでゲットがおすすめです。そんな時は、こちらのサイトがなかなか安くてレビューも載っていて分かりやすいですね。絶対おすすめですね

  17. ジャズ大名 says:

    記事を拝見させていただいて、試行錯誤したのですがなかなかうまく切り替えられません。
    ご教授願えませんでしょうか?私の使っているテーマでは、

    Blog Archives

    と書かれています。

    どのように書き換えればいいのでしょうか?よろしくお願い致します。

  18. ジャズ大名 says:

    すみません、変な表示になってしまいました。

    一つの投稿記事に複数のカテゴリが選択されている状態で、そのうちの一つのカテゴリを選択してarchiveで表示させた場合、どのカテゴリを選んでも特定のカテゴリしか選択されない状態です。

    item   …親
    item_A  …子
    item_B  …子

    と、3つのカテゴリに登録した場合、item_Bカテゴリをarchiveで出力させても、class=item_A と
    なってしまいます。

  19. boy tシャツ 激安 says:

    ダイヤルの地板がスケルトンになっており、複雑。

  20. www.agen-casinosbobet.com says:

    May I simply saʏ what a comfort tto fiind a
    person tһat really knows what they are discussing on the internet.

    Yoou ԁefinitely understand howw tⲟ Ьring a problem tоo light
    аnd make it іmportant. Ꭺ loot mⲟre people need to rad
    thіѕ andd understand thіѕ side oof yourr story.

    Ӏt’s surprising you aren’t more popular ɡiven tҺat you
    surely haνe the gift.

  21. gentleman says:

    Thats a good thing. I found the tool helpful in XP but upgraded to windows 7 when it came out. This is a great development, thanks.

■コメントを書く

コメントを書く


この記事の投稿者

kr9

kr9 (12)

【ケーアールナイン】
WEBデザイン担当。
twitter:
http://twitter.com/akaandmore
ブックマーク:
http://b.hatena.ne.jp/kr9/

作成ツール一覧

【楽天アフィリエイト ランキングリンク作成支援ツール】

楽天ランキング上位30商品のアフィリエイトリンクを簡単に作成できます。

【Amazon アソシエイト (アフィリエイト) 短縮URL作成ツール】

Amazon(アマゾン)のアフィリエイトリンクが長すぎてコーディングが大変なので、短いアドレスに変換できるツールを作成しました。

【TwiAll(ツイオール) - Twitterの自動フォロー・フォロー返しを一括管理】

Twitter APIを利用したツイッターの整理・管理プログラム。質の高いフォロワーを増やしたいすべての方に。

【Twicolor(ツイカラー)- ツイッターの背景画像・カラー変更ツール】

ツイッターの着せ替えツール。誰でも簡単にデザインを変更することができます。

おすすめ

デザイナーのための著作権ガイド

デザイナーのための著作権ガイド
著作権についてとてもわかりやすく書いてあります。

レンタルサーバー Xserver


このブログのサーバです。マルチドメイン、サブドメイン、メールアドレス、FTPアカウント、全て無制限!