Posted: 2014.11.24 / Category: WordPress 

カテゴリー一覧をカテゴリーごとに色分けしたいときのメモです。

HTML & CSS

HTMLは「label-カテゴリースラッグ」にするとわかりやすいと思います。
ここでは例として「WordPress」「jQuery」「HTML5」があるとします。

html

<a href="#" class="label label-wordpress">WordPress</a>
<a href="#" class="label label-jquery">jQuery</a>
<a href="#" class="label label-html5">HTML5</a>
    

CSSはカテゴリー分だけ作成します。

css

a.label {
    background: #333;
    color: #fff;
    padding: 8px;
    width: 90px;
    display: block;
    text-align: center;
    text-decoration: none;
}
a.label-wordpress {
    background-color: #69ba3b;
}
a.label-jquery {
    background-color: #E24B4A;
}
a.label-html5 {
    background-color: #C66EE4;
}
    

WordPress

「functions.php」に下記を追記。
カテゴリー一覧は get_the_category を使用すると一旦情報を取得できるので出力とかも色々カスタマイズできます。 やることは class のとこに slug を入れればいいだけですがね。
カテゴリーじゃなくてタグを表示したい場合は get_the_category を get_the_tags に変更してください。

functions.php

function categories_label() {
    $cats = get_the_category();
    foreach($cats as $cat){
        echo '<a href="'.get_category_link($cat->term_id).'" ';
        echo 'class="label label-'.esc_attr($cat->slug).'">';
        echo esc_html($cat->name);
        echo '</a>';
    }
}
    

あとは表示したいとこに、先ほど作成した関数を呼び出せば完成。
（functions.phpじゃなくて直接書いちゃっても大丈夫です。）

functions.php

<?php categories_label() ?>
    

ちょっと小ネタ過ぎた気がしますが以上です。