Wordpress

2020.09.08

WordPress|カテゴリーごとにデザインを変えるいろいろな方法

この記事は1318日前に投稿されたものです。

WordPressでカテゴリーごとにデザインやレイアウトを変える方法はいくつかあります。例えば、カテゴリーごとにタイトルの色を変えるといった簡単なものならcssで対応できるし、大きくレイアウトが変わるのであれば、テンプレートを変更した方が効率的です。

読み込むテンプレートを条件分岐で変更

in_category()を使って分岐させます。
もちろんsingle.phpの中で条件分岐を使ってレイアウトを変えるという方法もありますが、テンプレートで分岐した方が効率的です。

カテゴリーごとにテンプレートを読み込むなら、各テンプレート（single-○○.php）が必要です。

single.php

<?php
if ( in_category('food') ) { //  カテゴリースラッグかカテゴリーIDを指定
      include(TEMPLATEPATH . '/single-food.php');
} else if ( in_category(2) ) { 
      include(TEMPLATEPATH . '/single-drink.php');
} else {
      include(TEMPLATEPATH . '/single-other.php');
}
?>

カテゴリーがFOOD(スラッグ:food)なら、single-food.phpというテンプレートを読み込む。
カテゴリーがDRINK(ID:2)なら、single-drink.phpというテンプレートを読み込む。
それ以外なら、single-other.phpというテンプレートを読み込む。

読み込むcssでデザインを変える

例えば、カテゴリーごとにページのテーマカラーを変更するといった簡単な変更の場合はcssで行った方がいいかと思います。それぞれのCSSを作成する手間は増えますが、変更する部分だけ追加する形で読み込めば効率的です。こちらもin_category()を使って分岐させます。

header.php

<link href="<?php echo get_template_directory_uri(); ?>/css/base.css" rel="stylesheet" type="text/css">  
<?php if ( in_category('food')): ?>
      <link href="<?php echo get_template_directory_uri(); ?>/css/food.css" rel="stylesheet" type="text/css">  
<?php elseif ( in_category('drink')): ?>
      <link href="<?php echo get_template_directory_uri(); ?>/css/drink.css" rel="stylesheet" type="text/css">   
<?php else: ?>
      <link href="<?php echo get_template_directory_uri(); ?>/css/other.css" rel="stylesheet" type="text/css">    
<?php endif; ?>

カテゴリーのclassを追加して表示を変える

カテゴリーを取得してclassに追加する方法です。

single.php ループ内で

<?php 
    $cat = get_the_category();
    $cat_slug = $cat[0]->slug;
    $cat_name = $cat[0]->name;
?>
<div class="post-body <?php echo $cat_slug; ?>" >
      <h2>TITLE</h2>
      <div><?php echo $cat_name; ?></div>
</div>

例えば、ページのテーマカラーをカテゴリーごとに変えたい場合は、cssで予め設定しておきます。親要素（上記の場合はpost-body）にカテゴリーのclassを追加しておけば管理しやすいです。

css

.post-body h2{ color : black; }
.post-body p{ border : thin solid #000000; }

/*　カテゴリーがfoodの場合　ページのテーマカラーを赤（#FF0000）に　*/
.post-body.food h2{
     color : #FF0000;
}
.post-body.food div{
      border-color: #FF0000;  
}

/*　カテゴリーがdrinkの場合 ページのテーマカラーを青（#0000FF）に　*/
.post-body.drink h2{
      color : #0000FF;
}
.post-body.drink div{
      border-color　: #0000FF;
}

カテゴリーがFOODなら、h2とボーダーを赤（#FF0000）に。
カテゴリーがDRINKなら、h2とボーダーを青（#0000FF）に。
それ以外のカテゴリーなら、元のまま変更なし。