wordpressでカテゴリーを色分けして表示する方法。複数カテゴリー対応。コピペでオッケー

こんにちは！

Web制作でフリーランスをしている「はやた」と申します！

今回は僕が実務で使ったWordPressのテクニックを書いていきます！

新着記事を取得し、記事一覧を作るときにタイトルの下にカテゴリーを表示することありますよね？

また、記事ページにもカテゴリー表示することがあります。

そんな時に、カテゴリーごとに色分けしなければならないこともあるかと思います。

こんな感じに↓

今回はやり方書いていきますね！

カテゴリーごとの色分け方法について

まず、カテゴリーごとに色分けする方法ですが、これはめっちゃ簡単です！

WordPressで設定するカテゴリーのスラッグをクラス名にして、色をつければいいのです。

　
　 p.blog { background-color:red; }
　 p.news { background-color:blue; }
　

blogやnewsがスラッグです。

これで、そのスラッグがクラスに設定されるようにすればオッケーです！

そしてこれがスラッグを取得するコードになります。

　
　<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>
　

これをHTMLのclass="〇〇"に入れればオッケーです！

単純にカテゴリーを色分けしたのであればこれでもいいのですが、WordPressで使えるように動的にしなければいけないので、実務だとそのまま使うことはなさそうです。

カテゴリーを取得してスラッグ名を付与する

まずは投稿に付与されたカテゴリを取得してみましょう。

メイン（一番最初の）のカテゴリを取得

カテゴリ名を取得するには、

　
　<?php　$category = get_the_category();echo $category[0]->name;　?>
　

こちらのコードを利用します。

カテゴリ名を表示したいところに挿れてください！

ちなみにリンクをつけたい場合は、<a>タグごと出力します。

　
<?php
$category = get_the_category();
echo '<li><a href="'.get_category_link($category[0]->term_id).'">'.$category[0]->name.'</a></li>';
?>
　

これでカテゴリーを一つ取得できるようになります。

記事に登録されているカテゴリーを全て取得する

WordPressではカテゴリーは複数選択できるので、複数に対応しなければならないこともあります。

なので、投稿に登録されているカテゴリー全て取得するパターンも載せておきますね。

　
<?php
$categories = get_the_category();
foreach( $categories as $category ) {
echo $category->name;
}
?>
　

foreachを利用して全て取得しています。

リンクをつける場合はなんとなくわかるかと思いますのでやってみてください！

それでは次に、複数のカテゴリーを取得して、クラスにスラッグ名を付与してみたいと思います！

カテゴリーを複数取得し、クラスにスラックを付与

先ほどclass="〇〇"に入れるコードを紹介しましたが、他にクラスを挿れている場合、どうやら機能しないみたいなんです。

ガッツリ検証したわけではないので、確実な情報ではないですが。

僕が試した限りでは難しかったです。なのでそのカテゴリーにcssをつけたい場合、IDでつけるか、<div>とかで囲むと良いかも。

　
<div class="category">
<?php 
$categories = get_the_category();
foreach( $categories as $category ) {
echo '<p class="' . $category->category_nicename . '">' . $category->name . '</p>'; 
} 
?>
</div>
　

カテゴリーを全て取得する為にforeachを使います。

そして、<p>タグを出力し、$category->nameでカテゴリー出力し、

$category->category_nicenameでスラッグ名を出力しています。

このまま使えば表示はできるので、試してみてください！