※当サイトにはプロモーションが含まれています。
クライアント ワードプレステーマのSWELLで、カテゴリーごとに背景色を変更する方法を教えてくれ！
にゃテック おけまるだにゃ。
多くのワードプレステーマでは、カテゴリーごとに背景色を設定することはできません。
それは、SWELLでも同様で、それを実現するのであれば、自分でカテゴリー別のクラスを付与して、CSSで指定してあげる必要があります。
今回は、その方法として、テーマエディターからfunction.phpを編集して、カテゴリーごとに専用クラスを <body> タグへ付与し、それを使って背景色を切り替える手順を解説します。
なお、検証したSWELLの環境は以下の通りです。
SWELLバージョン：2.14
WordPressバージョン：6.8.x
PHPバージョン：8.2.x
サーバー：エックスサーバー
※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます
にゃテック SWELLで検証していますが、他のワードプレステーマでも応用可能です。
SWELLの背景色・背景画像の設定方法
通常、SWELLで背景色を設定するには、
左メニューにある、
外観 > カスタマイズ > サイト全体設定 > 基本カラー
の背景色で設定することができます。
また、背景に画像を使用したい場合は、
外観 > カスタマイズ > サイト全体設定 > 基本デザイン
のページ背景（PC・SP）で設定する事ができます。
にゃのらいと ここで設定された内容がすべてのページに適用されるにゃ。
カテゴリーごとに背景色を変更する方法
SWELLでカテゴリーごとに背景色を変更する方法についてです。
CSSのクラス名について
各カテゴリーには、「スラッグ」と呼ばれる文字列が設定されています。
この画像（サイト）例では、
- manual-list
- basic-settings
- shohei-career
が、スラッグになります。
このスラッグの前に、cat-を付けた形をCSS用のクラス名として <body> タグに付与します。
つまり、上記の例だと以下のようなクラスが追加されます。
- cat-manual-list
- cat-basic-settings
- cat-shohei-career
にゃのらいと この上記のクラスに対して、背景色の設定をしてあげるにゃ。
/* manual-list */
#body_wrap.cat-manual-list {
background-color: #fce4ec;
}
/* basic-settings */
#body_wrap.cat-basic-settings {
background-color: #e3f2fd;
}
/* shohei-career */
#body_wrap.cat-shohei-career {
background-color: #e8f5e9;
}このCSSを「追加CSS」に記載するのですが、スラッグの文字列は、作成されているサイトでそれぞれ違うはずです。
たとえば、カテゴリー（スラッグ）が「お知らせ（news）」「野球（baseball）」「サッカー（soccer）」であれば、付与されるクラス名は以下のようになります。
- cat-news
- cat-baseball
- cat-soccer
となるので、記載するCSSは下記のようになります。
/* news */
#body_wrap.cat-news {
background-color: #fce4ec;
}
/* baseball */
#body_wrap.cat-baseball {
background-color: #e3f2fd;
}
/* soccer */
#body_wrap.cat-soccer {
background-color: #e8f5e9;
}
つまり、クラス名は、それぞれのサイトで使用しているスラッグにあわせて記載（修正）する必要があります。
補足：他のテーマでも応用可能
この「カテゴリーごとに背景色を変更する方法」は、SWELLだけでなく、Cocoon・AFFINGER・JINなど、他のテーマでも応用可能です。
何故なら、functions.phpに記載したbody_class()が WordPress独自のテンプレートタグ（関数） であり、基本的にどのテーマでも利用できるからです。
このbody_class()を使えば、任意のクラスを <body> タグに追加できます。
あとは、
body.クラス名 { … }というルールをCSSで作成すれば、カテゴリーごとに背景色や背景画像などのデザインを自由に変更できます。
function.phpについて
function.phpに以下のコードを記載します。
add_filter('body_class', function ($classes) {
// 反映対象のスラッグを限定
$targets = ['manual-list', 'basic-settings', 'shohei-career'];
// 投稿ページ（single）
if (is_single()) {
$cats = get_the_category();
if (!empty($cats)) {
foreach ($cats as $cat) {
if (in_array($cat->slug, $targets, true)) {
$classes[] = 'cat-' . $cat->slug;
}
}
}
}
if (is_category()) {
$cat = get_queried_object();
if ($cat && in_array($cat->slug, $targets, true)) {
$classes[] = 'cat-' . $cat->slug;
}
}
return $classes;
});なお、CSSと同様に、スラッグは運営されているサイトで違うため、以下の箇所を書き換える必要があります。
// 反映対象のスラッグを限定
$targets = ['manual-list', 'basic-settings', 'shohei-career'];たとえば、CSSでも説明したように、カテゴリー（スラッグ）が「お知らせ（news）」「野球（baseball）」「サッカー（soccer）」であれば、以下の様になります。
// 反映対象のスラッグを限定
$targets = ['news', 'baseball', 'soccer'];なお、カテゴリーのスラッグを増やしたい場合は、以下の様に記載します。
$targets = ['news', 'baseball', 'soccer', 'basketball', 'volleyball'];これらを、追加CSS、function.phpに記載すると、カテゴリーごとに背景色が変わるようになります。
にゃのらいと 背景色ではなく、カテゴリーごとに背景画像を変更することも可能だにゃ。
にゃテック わかりやすくする為に、アイコンを隙間なく配置しています。
function.phpの場所は？
function.phpは、だいたいどのテーマも、
外観 > テーマエディター
にあります。
テーマエディターに移動したら、編集するテーマが、現在、使用しているテーマかを確認しましょう。
問題なければ、「function.php」を選択します。
なお、function.phpに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。
その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。
選択したら、一番下に以下のコードを追加します。
add_filter('body_class', function ($classes) {
// 反映対象のスラッグを限定
$targets = ['manual-list', 'basic-settings', 'shohei-career'];
// 投稿ページ（single）
if (is_single()) {
$cats = get_the_category();
if (!empty($cats)) {
foreach ($cats as $cat) {
if (in_array($cat->slug, $targets, true)) {
$classes[] = 'cat-' . $cat->slug;
}
}
}
}
if (is_category()) {
$cat = get_queried_object();
if ($cat && in_array($cat->slug, $targets, true)) {
$classes[] = 'cat-' . $cat->slug;
}
}
return $classes;
});変更箇所（スラッグ）を変更するのを忘れずに･･･。
最後に、「ファイルを更新」ボタンで、保存（更新）します。
※function.phpの設定を失敗すると、最悪、サイトが表示されなくなります。
その為、コードを追加する際は、必ずバックアップを取ってから追加するようにしてください。
にゃテック プラグイン「Code Snippets」を使用すると、安全にfunction.phpを編集することができます。
このブログでは、ワードプレス（WordPress）のカスタマイズ方法を多数紹介していますが、その中にはfunctions.phpの編集が必要なケースもあります。 そのためか、これまでに数件「サイトが真っ白になってしまった …
ご支援のお願い
この記事が役に立ったと感じたら･･･
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。
ご購入いただいた商品の金額の一部が私に入り、より有益な記事を作るための励みになります。
なお、商品は、ご自身の好きなものをご購入いただければと思います。
無料相談・お問い合わせはこちら