ズボラ応援ブログ始めました

WordPressでカテゴリ毎に違うcssを適用する

f:id:niketcha:20190707173219j:plain

WordPressでカテゴリ毎にスタイルを変えたいときのやり方を紹介します。

カテゴリ毎にテーマカラーを決めて見出しの色を変えたり、カテゴリ毎に違う画像を表示したりすることもできます。

カテゴリ毎cssの設定方法

phpファイルの修正

カテゴリ別スタイルを適用したい箇所に、カテゴリIDを含んだクラス名を付けます。

example

<?php
$catinfo = get_the_category();
$catid = $catinfo[0]->cat_ID;
?>
<div class="cat-<?php echo $catid ?>">
</div>

こうすることで、「cat-カテゴリID」というクラス名が出力されます。

cssの修正

cat-カテゴリIDのクラスを定義してcssを設定します。

example

.cat-4{
background:#333;
}



カテゴリ毎に画像を切り替える

カテゴリIDを画像のファイル名に入れて、カテゴリ毎に画像を切り替えることもできます。

example

echo '<img src="https://example.com/images/logo-' . $catid . '.jpg" />'; 

例では「logo-カテゴリID」という名前の画像が表示されます。

カテゴリIDの調べ方

カテゴリIDはカテゴリ一覧ページで調べることができます。

IDを調べたいカテゴリの「編集」リンクをマウスオーバーしたときに出るリンクの「category&tag_ID=」の後にある数字がカテゴリIDです。

タイトルとURLをコピーしました