WordPressの記事のカテゴリー表示のリンクにCSSを指定する

0 google+0 はてなブックマーク0
2016年4月14日2:51 PM|WordPress テーマ

WordPressの各記事の上などにある、カテゴリー名表示。
そのカテゴリー毎に色を変えるとか、アイコンを付けたい時がある。
そんな時には、リンクにCSSのclassを入れればカテゴリー別にする事ができる。

調べると、以下のサイトにそのままズバリで書かれていた。

参考サイト:
WordPressのカテゴリー一覧(the_category)をカテゴリー別に色分けする | webOpixel

私の場合は、cat slug-カテゴリースラッグ名という形にしたかったので、以下のように書いた。

functions.php

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

後は、CSSの方で
a.slug-カテゴリースラッグ名
の指定をしてあげれば、カテゴリー別に表示を変える事ができた。
詳しい内容については、上記のサイトに記載されているのでどうぞ。

その他の参考サイト:
WordPressで記事のカテゴリーを取得する | Webデザイン | いいなもっと.com

コメントを残す

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