WordPressでカテゴリー毎に表示スタイルを変更する方法
WordPressで、CSSを利用してカテゴリーごとにスタイルを変更する方法をメモ。MovableTypeにはそういったプラグインがあったが、WordPressにはプラグインが無い（見つからない）ので力技で対応。例えば特定カテゴリーだけヘッダー部分の背景を赤色にしたい場合などに使う。
例：カテゴリー「日記」「写真」のタイトル文字色をそれぞれ青と赤にする
1.カテゴリーごとに英文字でカテゴリースラッグをつける
カテゴリー作成時（作成済みの場合は編集画面）のカテゴリースラッグ欄に、英数字で名前をつけておく。この名前を後々cssのクラス名として使う。
今回の例の場合、「日記」のカテゴリースラッグを「diary」に、「写真」のカテゴリースラッグを「photo」にする。
2.カテゴリーを表示するテンプレート（今回はarchive.php）にカテゴリースラッグを出力
ページの階層は以下の通り。divのクラス属性としてカテゴリースラッグを出力するphpコードを挿入する。また、月別や日別アーカイブの時には表示しないように、if文でカテゴリーページの時だけclassを表示するようにする。
CODE:
-
<div id="contents"<?php if (is_category()) { ?> class="<?php $cat = get_the_category(); $cat = $cat[0];{echo $cat->category_nicename;} ?>"<?php } ?>>
-
<h2 class="pagetitle"><?php echo single_cat_title(); ?></h2>
-
<p>内容</p>
-
</div>
この状態で日記のカテゴリーページにアクセスすると
CODE:
-
<div id="contents" class="diary">
-
<h2 class="pagetitle">日記</h2>
-
<p>内容</p>
-
</div>
と出力され、写真のカテゴリーページにアクセスすると
CODE:
-
<div id="contents" class="photo">
-
<h2 class="pagetitle">写真</h2>
-
<p>内容</p>
-
</div>
と出力される。
3.スタイルシートを記述
ここまでくれば、あとはスタイルシートで各々のタイトルに色を設定するだけ。
CSS:
-
div.diary h2.pagetitle {
-
color: #00F;
-
}
-
div.photo h2.pagetitle {
-
color: #F00;
-
}
もちろん文字色だけでなく、背景色などスタイルシートで設定できるものはすべて変更可能。これを使えばカテゴリーごとにページのデザインをガラッと変更できる。
- Mar 26, 2008 at 6:27 PM
- Written by：kr9
- Leave a Reply
ソーシャルブックマークに登録：
(12)
(1)
(0)
(1)
Total: 14
[...] ■記事 « WordPressでカテゴリー毎に背景などのスタイルを変更する方法 [...]
はじめまして、こんにちは。
カテゴリー毎のスタイル変更、参考にさせていただきました。
ありがとうございました！
ところで、現在私が制作中のサイトで、1つの記事を「新着情報」と「カテゴリーA」の2つのカテゴリーに属させているのですが、新着情報のIDの方が若いため、記事ページのスタイルに、新着情報のものが適用されています。
制作の都合上、新着情報のIDは変更したくないのですが、変更せず、記事に「カテゴリーA」のスタイルを適用させることは可能でしょうか？
お時間がある時に教えていただければ幸いです。
よろしくお願いいたします。
はじめまして。ほったらかしにしていたので返事が遅れました。
簡単に出来る方法としては、プラグインでその記事のメインのカテゴリを指定してしまうという方法があります。
プラグインもいろいろあると思いますが、パッと探したものはこれ。
http://wordpress.org/extend/plugins/be-main-category/
試していないのでわかりませんが、おそらく投稿の際にメインのカテゴリを選べる類のプラグインではないかと思います。
これを使用すれば、２つのカテゴリに属していてもメインのカテゴリースラッグが出力されると思います。多分。
ダメだったらまた他の方法を考えてみましょう。
お返事ありがとうございました！
さっそく試してみましたが、残念ながら変化なしでした。
ソースを見ても、新着情報の方のclassが効いているようです。
もしかすると私の使用しているWordPressのバージョンが2.3.3だからかもしれません。
（投稿画面でMain Categoryは無事選べたのですが…）
またお時間のある時にお教えいただければ大変助かります。
よろしくお願いいたします。
すいません。
最近、ワードプレスを使い始めたんですが、全くわからない状態です。
コメントとかもURL入力が出来ない状態ですしスタイルシートも変更したいんですが、更新ボタンがありません。
教えてもらえたらありがたいです。