Blogブログ

リッキー | 2022.11.24

WordPressの投稿記事をカテゴリー別にデザインを変える方法

wordpress

今回は、WordPressの投稿記事をカテゴリー別にデザインを変える方法についてご紹介していきます。

この記事では、特定のカテゴリーの記事だけ別のCSSファイルを読み込みこむようにしていくので

・カテゴリーごとに違うデザインにしたい

という方におすすめな方法を紹介していきます。

カテゴリー別にデザインを変更する為の準備

まず初めに、カテゴリーごとにデザインを変える為に確認することが下記２点があります。

・スラッグ
・ID

さっそくどこで確認すればいいかみていきましょう！

カテゴリーの「スラッグ」を確認

スラッグとはURLの一部のことで、カテゴリーごとに、１つのスラッグがあります。
管理画面にログイン>投稿>カテゴリー
からスラッグを確認することができます。

カテゴリーの「ID」を確認

IDもスラッグ同様にカテゴリーごとにIDが決まっています。
デザインを変更したいカテゴリーをクリック
URLの中に「tag_ID=○○」を探します
この○○の数字がIDとなります。

カテゴリー別にデザインを変える手順

下記の手順で特定のカテゴリーの記事だけ別のCSSファイルを読み込むようにします。
1,CSSファイルを複製
2,header.phpを編集
3,新しいCSSを好きなデザインにカスタマイズ

1,CSSファイルを複製

style.cssを複製して、複製したファイル名を好きな名前に変更します。
例）style.css→複製→○○.css
複製したcssファイルの〇〇を好きな名前に変更
仮にtest.cssという名前にします。
これで、style.cssとtest.cssという２つのファイルができました。

2,header.phpを編集

テーマフォルダにあるheader.phpに、特定のカテゴリーごとにCSSファイルを読み込むように設定していきます。
以下のコードを探しましょう。

<link rel='stylesheet' href='○○〇/style.css' type='text/css'/>

※○○〇の部分はテーマごとに違うので注意！

この部分を以下の様に書き換えます。

<?php if ( in_category(array('スラッグ')) ) ://特定のカテゴリーの場合 ?> 
  <link rel="stylesheet" href="○○〇/test.css" type="text/css" />
<?php else://通常ページの場合 ?>
  <link rel="stylesheet" href="○○〇/style.css" type="text/css" />
<?php endif; ?>

上記のコードで「特定のカテゴリーの記事では、test.cssを読み込み、それ以外のカテゴリーの記事はstyle.cssを読み込みます」という命令をしています。’スラッグ’の部分は、事前準備の際に確認した英数字をいれます。