ブログ記事一覧を表示する時、
カテゴリーごとにデザインを指定して表示をしたい時があります。

 

ここでは、カテゴリーごとの色分けを実現するためのPHPプログラムの実装方法について見ていきましょう。

 

カテゴリー・タクソノミーごとにデザインを適用する方法

単純に、カテゴリーやカスタムタクソノミーごとにデザインを変化させるためには、カテゴリー・タクソノミーごとに違ったHTMLタグを付与し、それぞれのHTMLタグのデザインをスタイルシートに記述することによって実現できます。

 

カテゴリー・タクソノミーごとに違ったHTMLタグを適用するためには、取得したカテゴリー情報のスラッグ名をHTMLタグのクラスに付与することで実現できます。

 

具体的な例でいうと、カテゴリー名「ニュース(スラッグ:news)」「スタッフブログ(staffblog)」「コラム(column)」というものがあったとすれば、それぞれニュース記事の場合はクラス名に「news」、スタッフブログ記事の場合はクラス名に「staffblog」、コラム記事の場合はクラス名に「column」を付与します。
このようなタグの振り分けを行うためのプログラムは以下の通りです。

 

投稿記事(post)のカテゴリーごとにデザインを適用する方法

カテゴリーごとのデザインの振り分けをするHTMLタグの記述

 

カテゴリーごとのデザインを適用させるCSS

 

カスタムタクソノミーごとにデザインを適用する方法

カスタムタクソノミーごとのデザインの振り分けをするHTMLタグの記述

 

カスタムタクソノミーごとのデザインを適用させるCSS

 

 

おすすめの記事