CUBE-LOG | きゅーぶろぐ

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

WordPress 2014年08月25日
WordPress 記事一覧でカテゴリ名表示&カテゴリ毎に色分け!視覚的にカテゴリを伝え他の記事も見てもらおう!
Pocket

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

はじめに

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

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

株式会社LIG (リグ) - 東京都上野にあるWeb制作会社

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

株式会社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; ?>

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

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

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

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

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

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

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

<?php echo $catslug; ?>

このコードをカテゴリー名を挟んでいるタグ(今回は<span>)に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

“WordPress 記事一覧でカテゴリ名表示&カテゴリ毎に色分け!視覚的にカテゴリを伝え他の記事も見てもらおう!” への14件のフィードバック

  1. […] 参考サイト WordPress 記事一覧でカテゴリ名表示&カテゴリ毎に色分け!視覚的にカテゴリを伝え他の記事も見てもらおう! […]

  2. こよみ より:

    記載の方法を行いましたが、変更できませんでした。
    ブログを確認していただけないでしょうか。

    タイトルと日付は削除してあります。

  3. panda より:

    お返事ありがとうございます!思うように表示されました!
    書き方にも種類がある事を知りました。
    まだまだ完成ではないのですが頑張れそうです!
    また参考にさせて頂きます!ありがとうございましたヾ(@>▽<@)ノ

    • panda より:

      query_posts( ‘cat=35,36,25&posts_per_page=5’

      で複数のカテゴリーを表示する事はできましたが、各カテゴリーにクラスを指定する書き方は
      <span class=””> <?php the_category(‘, ‘) ?></span> //カテゴリ名表示//

      ではhtmlで
      <span class=””><a href=”http://▶︎××></a>カテゴリー名</a></span>となり、クラスがつけられないのですが、そもそも書き方が違いますか?

      つぎつぎとすみませんがご教授いただけるとたすかります。

      • panda より:

        $cat = get_the_category();
        $catslug = $cat[0]->slug;

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

        これでhtmlに
        スラグ名(クラス), カテゴリー名 記事タイトル 日時
        という順番で表示されました。

        カテゴリー名B(クラスB) 記事タイトル 日時
        カテゴリー名A(クラスA) 記事タイトル 日時
        としたい場合なんですが・・(汗)

        • CUBE より:

          どもです!

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

          とした場合、「class=”< ?php echo $catslug; ?>“」という箇所でクラスにカテゴリのスラッグを入れる事ができますよね?

          例えばニュースカテゴリでスラッグが「news」の場合、
          「class=”news”」としてhtmlで出力されているかと思います。

          <span class="news"><a href"#">ニュース</a></span>
          

          出力がこのようになっていれば、あとはスタイルシートでデザインをするだけなのですがいかがでしょうか?

          • panda より:

            はい!上記のコードでできました(涙)
            本当に助かりました!
            初心者にも丁寧に対応してくださり、本当に感謝です。これからも応援してます!
            ブクマします♥

  4. panda より:

    すばらしい記事をありがとうございます。初心者なのでコピペで実装できるのは大変助かります、一つ質問があります。
    上記のコードをコピーしたところ、新着順にカテゴリーが3件表示されました。
    この3件を5件に、また、特定のカテゴリーだけ表記したい場合はどのように書いたらよいのでしょうか?よろしくお願いいたします。

    • CUBE より:

      コメントありがとうございます!
      少しはお役に立ててますでしょうか?
      カテゴリ指定や件数指定の件、本文に追記という形で記載してみました。
      またご確認してみてください!

      • panda より:

        おお〜!早速のお返事をいただいておきながら確認がおくれした!
        少し説明が足りなかったのであつかましくもう一つ質問を失礼します。
        たとえばスラグを複数指定する場合

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

        ↑の&cat&#ID;#IDとID指定すれば指定したID記事の新着のみが表示されるのでしょうか?

        また

        とした場合はnewsとproductの新着が5件表示されますか?

        ちょっと頭が混乱しています、すみません

        • panda より:

          category_name=news&posts_per_page=5

          category_name=news,product&posts_per_page=5

          上の書き方でnewsとproductの両方が表示されますか?

          • CUBE より:

            どもです!

            < ?php query_posts("cat=1,2,3&posts_per_page=5"); ?>
            上記のようにすれば、IDが1と2と3のカテゴリから合計5件の情報が表示されると思います〜^^

    • panda より:

      なんとか出来ました!なんかコメント欄を荒らしてしまって(汚してしまって申し訳ございません)
      けせる物であれば消してください(/TДT)/ ありがとうございました。

コメントを残す

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

Search

Category

RSS

follow us in feedly     

About

About CUBE

Name : CUBE(キューブ)
Web&グラフィックデザイナー