WordPressで新着記事を「カテゴリー名表示+色分け」で表示したい

WordPressで企業サイトを作成するときに、トップページに新着記事を表示することはよくあることかと思います。 この時に、ただ新着記事をズラ~と表示するのではなく、記事のカテゴリー名も併せて表示、さらにカテゴリーごとに色分けして表示したいと思います。

20140127

テンプレートの記述

新着記事を5件表示

<?php query_posts("post_type=post&posts_per_page=5"); ?>
<?php if(have_posts()): ?>
<ul>
<?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; ?>
</ul>
<?php else: ?>
<p>現在投稿記事はありません。</p>
<?php endif; ?>

投稿カテゴリー名とスラッグを取得

<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name; //カテゴリー名
$catslug = $cat[0]->slug; //スラッグ名
?>

<span class=”スラッグ名”>でカテゴリー名を囲む

<span class="<?php echo $catslug; ?>"><?php echo $catname; ?></span>

テンプレートに追加

<?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; ?>

表示HTML

<ul>
  <li><span class="cat-c">カテゴリーC</span> <a href="/">記事タイトル1</a><span class="ymd">(2014年01月14日)</span></li>
  <li><span class="cat-b">カテゴリーB</span> <a href="/">記事タイトル2</a><span class="ymd">(2014年01月08日)</span></li>
  <li><span class="cat-b">カテゴリーB</span> <a href="/">記事タイトル3</a><span class="ymd">(2014年01月07日)</span></li>
  <li><span class="cat-a">カテゴリーA</span> <a href="/">記事タイトル4</a><span class="ymd">(2014年01月01日)</span></li>
  <li><span class="cat-b">カテゴリーB</span> <a href="/">記事タイトル5</a><span class="ymd">(2013年12月26日)</span></li>
</ul>

CSS

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul li {
	clear: both;
	margin: 0 0 1em;
}
ul li span {
	display: block;
	float: left;
	width: 6em; /*カゴテリー名による*/
	margin: 0 10px 10px 0;
	padding: 5px;
	text-align: center;
	font-size: 10px;
}
ul li span.cat-a {
	background: #e3efef;
}
ul li span.cat-b {
	background: #efe3ec;
}
ul li span.cat-c {
	background: #efefe3;
}
ul li span.ymd {
	display: inline;
	float: none;
	padding: 0 5px;
	font-size: 13px;
	color: #999;
}

20 件のコメント

  • これ、探してました!ありがとうございます。
    ちなみに、これのプラグインとかやっぱりないんですかね〜(><)
    いくら探しても無かったので、ん〜やっぱりないか〜

    • コメントありがとうございます!お役に立てて良かったです〜。
      こういうタイプのプラグインは…ちょっと見た覚えがないですねぇ。
      あると絶対便利ですし、誰か作って欲しいですね〜。

  • やったー!これだー!と思い、使わせていただいたのですが、カテゴリー名はそれぞれ表示されるものの、の色分けは1種類のみが表示されます。
    取得コードを書く位置によって、全部がcat-aだったり、全部がcat-bだったり…
    修行してきます…

    • コメントありがとうございます!
      取得コードを書く位置によって取得できるカテゴリースラッグが変わる、ということでしょうか…?しかも全部一緒、と。不思議な現象ですね〜。
      気になるので、もしよろしければ詳しく教えていただけませんか?

      • 返信ありがとうございました。
        初心者ですので何かがケンカをしてるだけだと思うのですが、いったん余計なものは削除して、コンテンツIDの中に上記コードだけ書いても「cat-a」のみ表示されます。
        カテゴリー名が表示されるのは、<?php echo $catname; ?>を<?php the_category(‘ ‘); ?>に変えて表示させており、変えなければ、「cat-a」の名前のみ表示されます。
        「取得コードを書く位置によって取得できるカテゴリースラッグが変わる」のは、取得コード部分を重複して書いてしまった単純なミスでした。
        もう少しやってみます。お邪魔いたしました。

        • コメントありがとうございます!
          「the_category」ではカテゴリー名が表示され、「echo $catname」で「cat-a」の名前のみ表示される
          これは前者では正しく表示されるけれども、後者では表示されるカテゴリー名が違う、ということですよね?

          「get_the_category();」や「query_posts」、「while(have_posts()」の記述順番のせいかなぁと思います。
          ちなみに、記事内「テンプレートに追加」の記述まるっとコピペしてもダメでしたでしょうか?

          なにやら混乱させてしまっていましたら申し訳ないです。

          • ざっくりですけど
            これでどうでしょう?

            cat_name;
            $catslug = $cat[0]->slug;
            ?>
            <span class="”> <a href="”>()

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

          • ありがとうございます。
            「テンプレートに追加」をまるっとコピペすると、すべて「cat-a」になってしまうため、前述した部分だけ「the_category」に変えております。
            超初心者のため、記述の順番等、いろいろ試してみます。
            こちらこそ、モヤモヤさせてしまい申し訳ありませんでした。
            丁寧にご対応いただきありがとうございます。

          • お役に立てず申し訳ないです。
            もし記事内記述のなにかが問題であると判明した場合は、ぜひご連絡ください!
            すぐに記事を修正します。
            よろしくお願いします〜。

  • カテゴリを複数選択している場合、
    色分けされずに一つ目の色にすべてなってしまうのですが
    どうしたらいいですか?

    • コメントありがとうございます。
      申し訳ありませんが、カテゴリー複数選択には対応していません。
      いずれ、複数選択に対応した記事を作成したいと思います。

  • 私も上の方と同じく、全て同じ「cat-a」になります。
    正しくは「お知らせ」というタイトルがそろいコードをみるとspanクラスに「new」というクラスが並ぶ格好です。カテゴリーはそれぞれ違う記事になるはずなんですが・・・
    初心者のためコピペのみの使用です。よろしくお願いいたします。

  • お世話になります

    私は上記のソースをそのままコピーしたのですが
    どうしてもカテゴリが1種類になってしまいます。

    lunchを投稿すれば全てlunchに、dinnerを投稿すれば全てdinnerに変わってしまいます

    何か書き換えが必要なのでしょうか?
    何卒よろしくお願いいたします

    • コメントありがとうございます!
      > lunchを投稿すれば全てlunchに、dinnerを投稿すれば全てdinnerに変わってしまいます
      これは、$catnameも$catslugもすべて最新の投稿と同じになってしまう、ということでしょうか?

      • お世話になります。

        oodaikoさんのコメントと同じでわたしもカテゴリが1種類になってしまいます。

        私の場合、投稿のカテゴリを「ニュース」と「ブログ」の2種類があるのですが、
        カテゴリを「ニュース」にして投稿すると、
        表示されているすべてのカテゴリ名が「ニュース」になり、
        カテゴリを「ブログ」にして投稿すると、
        表示されているすべてのカテゴリ名が「ブログ」に変更されてしまいます。
        ※「ブログカテゴリ」に属していても「ニュース」を更新すると「ニュース」と表記が変わってしまうということです。

        何か変更しなければいけない箇所がありましたら、
        おしえていただければと思います。

        • コメントありがとうございます。
          返信が遅れてしまい申し訳ありません。

          > ※「ブログカテゴリ」に属していても「ニュース」を更新すると「ニュース」と表記が変わってしまうということです。
          全てのカテゴリーが最新記事が属するカテゴリーに変わってしまう、ということでよろしいでしょうか?
          ちょっと試せていないのですが、「投稿カテゴリー名とスラッグを取得」の記述をループの中に移動してみてください。
          いかがでしょうか?

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    CAPTCHA