WordPress新着情報カテゴリーによって色分け

WordPressのカテゴリー設定を行い、カテゴリーの名前や背景を色分けする方法をご説明いたします。

まずは新着情報を表示する方法をご説明いたします。

?php the_title(); ? ・・・・・・タイトル出力タグ

?php the_permalink(); ? ・・・・・・投稿へのリンクタグ

?php the_time(‘Y年m月d日’); ? ・・・・・・日付表示タグ

?php else: ?> ・・・・・・もしも投稿がなかった場合に表示

 
//ここからループしたい内容を表示します。
（）


現在投稿記事はありません。

この記述をして頂いて、スタイルシートやタグを修正していただきますと新着情報は表示されます。

上記で記載した内容を参考に付け加えられた部分を記載いたします。

?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
$catslug = $cat[0]->slug;
?> ・・・・・・カテゴリー名とスラッグ名を取得いたします。

span class=”” ・・・・・・classへスラッグ名を割り当てます

?php echo $catname; ? ・・・・・・カテゴリーの名前を取得します。

cat_name;
$catslug = $cat[0]->slug;
?>



 （）



現在投稿記事はありません。

この増えた部分、

で、ワードプレスの「投稿」「カテゴリーの追加」で追加して頂いたカテゴリーの「スラック名」を取得し、「css」名にしています。
※スラック名は半角アルファベットで挿入してください。

でカテゴリーの名前を表示しています。

では色を変更したい場合、「.スラッグ名」へスタイルを当てて色を変えれば、
カテゴリーがいくつもあった場合に、
※cssを割り当てる為に、カテゴリー名は半角英数に変えてください。
「.カテゴリーのスラック名01」
「.カテゴリーのスラック名02」
「.カテゴリーのスラック名03」
に対して、スタイルを個別に当てていきます。

.カテゴリーのスラック名01{
color:#000;
}
.カテゴリーのスラック名02{
color:#fff;
}
.カテゴリーのスラック名03{
color:#ff999;
}

これで各カテゴリー名のフォントのカラーの変更が可能です。
カテゴリーによって文字色や、背景画像、またアイコンなどを変更したい際にスタイルシートで
簡単に変更する事が可能ですので一度お試しください。

Magicalog