Blogブログ

リッキー | 2022.11.24

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

  • wordpress

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

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

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

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

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

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

・スラッグ
・ID

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

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

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

カテゴリーの「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つのファイルができました。

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を読み込みます」という命令をしています。’スラッグ’の部分は、事前準備の際に確認した英数字をいれます。

3,新しいCSSを好きなデザインにカスタマイズ

ここまでで、特定のカテゴリー記事はtest.cssのデザインを読み込むようになっているのでtest.cssを好きなデザインにカスタマイズするだけ!

まとめ

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

今回ご紹介した方法で、カテゴリー別に好きなデザインに変更することができるのでぜひ活用していただければと思います!以上、「WordPressの投稿記事をカテゴリー別にデザインを変える方法」でした。

最後まで読んでいただきありがとうございました。

株式会社TORATはクリエイティブから様々な業務まで
TORATを一緒に盛り上げて頂けるメンバ―を募集しております!

▽採用情報の詳細ついてはこちらから▽
https://www.torat.jp/recruit/

この記事を書いた人

リッキー デザイナー

関連記事

Recommend愛されているブログ