カテゴリーごとに別々のアイコンを表示する

categoryslug

 

投稿記事の一覧を表示しているページなどで、すべての複数の投稿カテゴリーが羅列される際に、それぞれがどのカテゴリーに属する記事なのかがパッと見で視覚的にわかるようにしたいとき、該当するカテゴリーに応じてアイコンなどを付けるといいかもしれません。

そこでこのブログに表示しているようなテキスト表記でカテゴリー名を表記し、背景の色を変更することで見分けやすいようにしてみます。

 

slug-image1

 

CSSに追記

 

PHPに追記

カテゴリー名を表示したい部分に以下のコードを書き込みます。

 以上でアイコンが表示します。

テキストではなくて、画像にしたい場合は、CSSでそのように設定すれば問題ないと思います。

 

補足

 

get_the_category();テンプレートタグ

 

 

$post_id(整数,オプション)投稿ID
初期値は$post->ID(現在の投稿ID)

get_the_categoryは、現在の記事が属しているカテゴリを調べてくれます。
このタグは、パラメータに投稿IDを渡すことで、ループの外側でも使用することができます。

 

 

 変数$catにカテゴリー名を代入
$catに現在の記事が属している1番目のカテゴリー情報を取得する
変数「cat_ID」でカテゴリー名を取り出します。

 

▼変数

カテゴリID term_id
カテゴリ名 name
カテゴリスラッグ名 slug
カテゴリーグループ term_group
カテゴリタクソノミーID term_taxonomy_id
タクソノミー名 taxonomy
カテゴリの説明 descripttion
親カテゴリ parent
カテゴリに登録されている記事数 count
カテゴリID cat_ID
カテゴリの説明 category_description
カテゴリ名 cat_name
カテゴリスラッグ名 category_nicename
親カテゴリ category_parent




mororeco > WordPress > カテゴリーごとに別々のアイコンを表示する