WordPressで投稿記事を表示させる時にカテゴリーごとに異なるクラスをつけて、それぞれにCSSを適用したい、なんてことよくありますよね。
今回はWordPressで記事が属するカテゴリーのスラッグを取得して、そのままクラス名としてHTMLに出力する方法についてまとめました。
記事のカテゴリー情報を取得する
まずは記事がどのカテゴリーに属しているのかという情報を取得することです。
WordPressではget_the_category()というテンプレートタグを使えばカテゴリー情報を得ることができます。
記事を表示するループのなかに次のように書きます。
1 2 3 4 5 6 7 | <?php // 記事のカテゴリー情報を取得する $cat = get_the_category(); // 取得した配列から必要な情報を変数に入れる $cat_name = $cat[0]->cat_name; // カテゴリー名 $cat_slug = $cat[0]->category_nicename; // カテゴリースラッグ ?> |
これでカテゴリー名やカテゴリースラッグなど、欲しいカテゴリー情報をそれぞれ変数に入れることができました。
それでは変数に入れた情報（今回はカテゴリースラッグ）をHTMLに表示させましょう。先のコードを踏まえて、次のように書きます。
1 | <p class="<?php echo $cat_slug ?>"><?php echo $cat_name; ?></p> |
これでpタグにカテゴリースラッグと同じクラス名を設定することができました。pタグ内のテキストはカテゴリー名を表示させています。
クラス名に応じてCSSを書いてあげれば記事が属するカテゴリーに応じて異なるデザインを表示させることができます。
以上、記事が属するカテゴリーのスラッグを取得してクラスをつける方法でした。
参考URL
テンプレートタグget_the_categoryについて詳しくはWordPress Codexをご確認ください。
SEOノウハウを駆使したホームページ制作で、企業の認知拡大やブランディング向上にお応えします。
