カテゴリーによって名前の色分け
WordPressのカテゴリー設定を行い、カテゴリーの名前や背景を色分けする方法をご説明いたします。
新着情報表示方法
まずは新着情報を表示する方法をご説明いたします。
?php the_title(); ? ・・・・・・タイトル出力タグ
?php the_permalink(); ? ・・・・・・投稿へのリンクタグ
?php the_time(‘Y年m月d日’); ? ・・・・・・日付表示タグ
?php else: ?> ・・・・・・もしも投稿がなかった場合に表示
|
1 2 3 4 5 6 7 8 9 10 |
<?php query_posts("post_type=post&posts_per_page=5"); ?> <ul> <?php if(have_posts()): ?> <?php while(have_posts()): the_post(); ?>//ここからループしたい内容を表示します。 <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="ymd">（<?php the_time('Y年m月d日'); ?>）</span></li> <?php endwhile; ?> <?php else: ?> <li>現在投稿記事はありません。</li> <?php endif; ?> </ul> |
この記述をして頂いて、スタイルシートやタグを修正していただきますと新着情報は表示されます。
カテゴリー名を取得
上記で記載した内容を参考に付け加えられた部分を記載いたします。
?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
$catslug = $cat[0]->slug;
?> ・・・・・・カテゴリー名とスラッグ名を取得いたします。
span class=”” ・・・・・・classへスラッグ名を割り当てます
?php echo $catname; ? ・・・・・・カテゴリーの名前を取得します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php query_posts("post_type=post&posts_per_page=5"); ?> <?php $cat = get_the_category(); $catname = $cat[0]->cat_name; $catslug = $cat[0]->slug; ?> <?php if(have_posts()): ?> <ul> <?php while(have_posts()): the_post(); ?> <li><span class="<?php echo $catslug; ?>"><?php echo $catname; ?></span> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="ymd">（<?php the_time('Y年m月d日'); ?>）</span></li> <?php endwhile; ?> </ul> <?php else: ?> <p>現在投稿記事はありません。</p> <?php endif; ?> |
この増えた部分、
で、ワードプレスの「投稿」「カテゴリーの追加」で追加して頂いたカテゴリーの「スラック名」を取得し、「css」名にしています。
※スラック名は半角アルファベットで挿入してください。
でカテゴリーの名前を表示しています。
では色を変更したい場合、「.スラッグ名」へスタイルを当てて色を変えれば、
カテゴリーがいくつもあった場合に、
※cssを割り当てる為に、カテゴリー名は半角英数に変えてください。
「.カテゴリーのスラック名01」
「.カテゴリーのスラック名02」
「.カテゴリーのスラック名03」
に対して、スタイルを個別に当てていきます。
|
1 2 3 4 5 6 7 8 9 |
.カテゴリーのスラック名01{ color:#000; } .カテゴリーのスラック名02{ color:#fff; } .カテゴリーのスラック名03{ color:#ff999; } |
これで各カテゴリー名のフォントのカラーの変更が可能です。
カテゴリーによって文字色や、背景画像、またアイコンなどを変更したい際にスタイルシートで
簡単に変更する事が可能ですので一度お試しください。
