• Home
  • /WordPress
  • /WordPressのカテゴリに色分け機能を追加できる「Colorful Categories」

WordPressのカテゴリに色分け機能を追加できる「Colorful Categories」

WordPressのカテゴリ表示は多くの方が使ってると思いますが、どんなテーマを使用しても味気ないですよね。

・カテゴリ表示に色を持たせて華やかにしたい
・カテゴリをひと目で識別できたらいいのに・・・
・カテゴリ毎にテーマカラーをもたせたい

今回はカテゴリに色を指定できる機能を持つプラグイン「Colorful Categories」とそれの簡単な応用法をご紹介します。

他にもカテゴリに色をつけられるようなプラグインは多くありますが、「Colorful Categories」は管理画面のカテゴリ一覧からページ遷移なしでシームレスにカテゴリの色を指定することができるようになっています。
screenshot-3

2種類のデザインでウィジェットに表示させることができます。
screenshot-1 screenshot-2

更に応用として・・・
自分のテーマに表示しているカテゴリ表示の背景のカラーに「Colorful Categories」で指定した色を入れちゃいましょう。
まずはテーマフォルダ中の記事のループのカテゴリを表示している構文を下記に置き換えます。

<ul>
<?php foreach((get_the_category()) as $cat){
$color = ColorfulCategories::getColorForTerm($cat->term_id, true);
echo '<li style="background-color: '.esc_attr($color).';">' . $cat->cat_name . '</li>'; } ?>
<ul>

foreach構文を使うことで複数カテゴリを指定していても別々に繰り返し取得できるようになっています。
「$color」に「Colorful Categories」で指定した色の16進数を格納し、それをliタグに別個にスタイルbackground-colorを指定して代入させます。

また、CSSは適当に指定してあげてください。
以下は参考程度に。

ul {
	list-style: none;
	width: 17em;
}
ul li {
	color: #fff;
	padding: 1px 4px;
	display: inline-block;
	margin: 0 2px 2px 0;
}