現役エンジニア・デザイナーの備忘録ブログ

2021.2.13 / 更新日: 2022.1.10
Wordpress

【wordpress】記事ごとにカテゴリーを表示してそれぞれにcssを付与する

woedpressの投稿記事ごとにカテゴリーを表示させる方法と、カテゴリーのスラッグ名を取得してクラス名として反映させ、それぞれにcssを付与できるようにする方法をご紹介します。

 

やりたいこと

  • 投稿記事のカテゴリーを表示し、それそれに違うcssを付与して色分けをしたい

 

手順

wordpressの投稿ではカテゴリーを作成することができ、投稿記事をカテゴリーごとに分類できます。

その分類したカテゴリを表示させるために、以下のコードを記事のループの中に記載します。

 

各コードの解説です。

記事のカテゴリー情報を取得

$cat = get_the_category();

 

取得した配列から必要な情報を変数に入れる

・カテゴリー名

$cat_name = $cat[0]->cat_name;

・ カテゴリーのスラッグ名
$cat_slug = $cat[0]->category_nicename;

 

これでクラス名を付与する準備が整いました。

取得した情報を表示させましょう。

 

class=<?php echo $cat_slug ?>“ の部分に、カテゴリーのスラッグ名が入ります。

これで、カテゴリごとに色分けするなど、cssの調整ができるようになります。

検証でコードを見てみたらスラグ名が反映されているのがわかると思います。

 

カテゴリー名は表示させたい名前で、スラッグ名はクラス名になるので英語表記で設定します。

 

最終的なコード

カテゴリだけでなくサムネイルとタイトル、日付も表示させた最終的なコードはこちら。

 

サムネイル部分はbackground-imageにすることで表示する大きさを均一にすることができます。

良かったら参考にしてください。

 

関連記事