WordPress 記事一覧でカテゴリ名表示＆カテゴリ毎に色分け！視覚的にカテゴリを伝え他の記事も見てもらおう！

WordPress 2014年08月25日

WordPressでトップページに記事一覧を表示することは非常に多いと思います。
その際「記事タイトル・記事が属するカテゴリ名・投稿日」なんかを最低限表示させることになるかと思いますが、カテゴリ名だけでは無く、カテゴリー毎に色分けをして視覚的にも分かりやすく表示することができれば、同じカテゴリに属するその他の記事にも興味をもってもらう可能性を上げることができるのではないかと。
例えばこの記事は当ブログの「WordPress」カテゴリに属している訳ですが、WordPress関連の記事を見て頂いている方が「WordPressカテゴリの記事はこの他に何があるのだろう？」といった具合に。
そんなに狙い通りになることは少ないかも知れませんし、そもそも当ブログでいうとサイドにカテゴリリストがある訳なのですが、見て頂ける方々にとって分かりやすいサイトにすることが大事なので、やり方をメモがてら書いておこうと思います。

はじめに

ブログサイトに限らずWordPressで企業サイトなどを構築する際にも「新着情報」として特定のカテゴリを一覧で表示したりすることがよくあるかと。
新着情報に並ぶ記事の中でも、その記事は「ニュースリリース」であったり「製品情報」であったり、はたまた「イベント情報」なんかもあるかも知れません。
この際、全部がずらーっと並んでいるだけで、タイトルから何の情報なのかを判断して頂く場合と、色分け等でどういった情報なのかが分かりやすくなっているのとでは大きな違いです。
WordPress 記事一覧でカテゴリ名表示＆カテゴリ毎に色分け

ブログ形式のサイトでもカテゴリ分けを視覚的に分かりやすくすることは有効な手段かと思います。有名なサイトで「株式会社LIG」のウェブサイトも記事の属するカテゴリが非常に分かりやすく表示されています。（2014年8月25日のトップページキャプチャ）

赤い枠でかこってある箇所がカテゴリ名になってます

株式会社LIG (リグ) – 東京都上野にあるWeb制作会社
http://liginc.co.jp/

カテゴリ名の取得はどのサイトでもやっていることかと思います。
今回はその「カテゴリ名表示＋カテゴリ名の箇所」をWordPressでデザインする方法を書いていきます。

まずは仕組み

WordPressではザックリというと「条件に当てはまるものがあれば下記形式で表示、無かったら無視・もしくは無いって表示してね！」てな感じで色々な箇所を表示させています。
細かいテーマの作り方は今回は無しとして、下記項目なんかをループ内で表示させることで、トップページなんかは構成されています。

記事タイトル
日付
カテゴリー
本文一部抜粋

こちらもザックリ。

ループっていうのは「決められた回数分、同じルールで表示をしてね！」って感じで、トップページに新着記事が10件並んでいるサイトでも5件並んでいるサイトでも、PHPのコードは1記事分の記載で後は同じ条件で繰り返して表示されているという感じです。

今回はこのループ内にある「カテゴリ名」を表示させる箇所に、各カテゴリ毎に別々のクラス（CSS用のclass）を割り当てて、CSSで好きにデザインをしようではないかーということです。

まずは記事を表示する

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<ul>
<li>
<span><?php the_category(', ') ?></span> <!-- カテゴリ名表示 -->
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a> <!-- 記事タイトル表示 -->
<span><?php the_time('Y年m月j日') ?></span> <!-- 投稿日表示 -->
</li>
</ul>

<?php endwhile; ?>
           
<?php else : ?>
<p>記事が見つかりませんでした</p>
<?php endif; ?>

上記の記述で各記事の「カテゴリ名・タイトル・投稿日」が表示されます。
今回はリストを利用して１つの項目に全て横並びで表示しています。

カテゴリーのスラッグを取得する

「スラッグ」とはカテゴリを作る際に入力するモノで、WordPressの画面では下記のように説明が記載されています。

“スラッグ” は URL に適した形式の名前です。通常はすべて半角小文字で、英数字とハイフンのみが使われます。

スラッグはそのままURLとして使われるため、カテゴリを作る際にSEOも考え丁寧に指定しておくと良いかと思います。
今回はそのカテゴリ毎に指定されている「スラッグ」を、CSSで使えるクラス（class）として利用することになりますので、まずはスラッグをループ内で使えるように取得することにします。

<?php
$cat = get_the_category();
$catslug = $cat&#91;0&#93;->slug;
?>

上記コードをループ内に記載することでスラッグ名を使う事が可能になります。
スラッグ名を呼び出すには下記。

<?php echo $catslug; ?>

このコードをカテゴリー名を挟んでいるタグ（今回は）にclassとして追加すればOKです。

<span class="<?php echo $catslug; ?>"><?php the_category(', ') ?></span>

最終的なコード

先程書いたカテゴリー名の箇所の他に、タイトルの箇所や日付を表示する箇所にもclassをあてて、CSSでデザインすれば完成です。
まずはテーマ（テンプレート）に記載するコード。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
           
<?php
$cat = get_the_category();
$catslug = $cat&#91;0&#93;->slug;
?>

<ul>
<li>
<span class="<?php echo $catslug; ?>"><?php the_category(', ') ?></span>
<a href="<?php the_permalink() ?>" class="title"><?php the_title(); ?></a>
<span class="data"><?php the_time('Y年m月j日') ?></span>
</li>
</ul>

<?php endwhile; ?>
           
<?php else : ?>
<p>記事が見つかりませんでした</p>
<?php endif; ?>

上記内容で出力されるHTMLは下記のようになるはずです。

<ul>
<li>
<span class="cat-a"><a href="カテゴリページのURL" rel="category">カテゴリの名前</a></span>
<a href="記事のURL" class="title">記事タイトル</a>
<span class="data">投稿した日付</span>
</li>
</ul>

CSSの内容（サンプルCSS）

上記でテーマ側の設定（記載）は完了ということで、ここからはCSSの内容。
かなり単純なコードですので今回CSSで用意すべきは下記項目。

ul
ul li
ul li span
ul li span.タイトル用
ul li span.各スラッグ用
ul li span.日付用

サンプルを用意してみました。
各カテゴリスラッグは「cat-a」「cat-b」「cat-c」の3つと想定。

ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
ul li {
     clear: both;
     margin: 0 0 10px;
}
ul li span {
     display: block;
     float: left;
     width: 120px;
     margin: 0 10px 10px 0;
     padding: 3px 5px;
     text-align: center;
     font-size: 12px;
}
ul li span.cat-a {
     background: #80a8cc;
}
ul li span.cat-b {
     background: #cbdcec;
}
ul li span.cat-c {
     background: #cdefe1;
}
ul li span.data {
     display: inline;
     float: none;
     padding: 0 5px;
     font-size: 12px;
     color: #999;
}

上記の結果下にある画像のように表示されるようにできました！

カテゴリ名の背景がカテゴリ毎に違う新着情報完成の図

まとめ

少しでも見やすく分かりやすいサイトを目指すなら意外とカンタンにできますのでオススメです。
実際にこのカスタマイズである程度の効果が出た経験もありますので、WordPressのプチカスタマイズとしては細かい設定にはなるのですが、さほど難しい作業でも無いので挑戦してみてはいかがでしょうか。
小技と侮るなかれ！

追記

コメントでご質問を頂いたので簡単に追記します。

本文で書いてあるコードはループの箇所のみの記載でした。
じゃあ、どのカテゴリの記事を何件表示したい！って場合はどうするのかってご質問だったので、簡単にコードを紹介しておきます。

まずは下記をご確認ください。

<?php query_posts( 引数 ); ?> 

//ループ開始
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<ul>
<li>
<span><?php the_category(', ') ?></span> <!-- カテゴリ名表示 -->
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a> <!-- 記事タイトル表示 -->
<span><?php the_time('Y年m月j日') ?></span> <!-- 投稿日表示 -->
</li>
</ul>

<?php endwhile; ?>
           
<?php else : ?>
<p>記事が見つかりませんでした</p>
<?php endif; ?>
//ループ終了

<?php wp_reset_query(); ?>

上記コードの「 //ループ開始」と「 //ループ終了」の間は以前から記載していたコードです。今回はその前後に下記が追加されています。

<?php query_posts( 引数 ); ?> 
〜〜〜〜
<?php wp_reset_query(); ?>

こちらはループを囲う形で記述されていて、そのループで出力する条件を指定できるって感じで思ってもらって大丈夫かと思います。
ですのでこの「query_posts( 引数 )」の引数って箇所に色々と条件を記述すれば、その内容でループされるってことですね。

今回のカテゴリ指定と件数指定は下記のようになります。

<?php query_posts( 'category_name=カテゴリースラッグ&posts_per_page=表示件数 ); ?>

指定したいカテゴリのスラッグを入れ、表示件数もそのまま数字を入れる。
例えば「news」カテゴリの記事を「5」件表示するのであれば・・・

<?php query_posts( 'category_name=news&posts_per_page=5); ?>

とすればOKなはずです。
いかがでしょうか？少しはお役に立てましたでしょうか？

Pocket