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

2018-01-30 @niketcha

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;
}

Sponsored Link

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

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

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

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

カテゴリIDの調べ方

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

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

-ウェブサイト構築, word press

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2019 All Rights Reserved.