この記事にはプロモーションが含まれています。

【WordPress】固定ページや投稿ページなどページ種別ごとに背景色を設定する

2024-06-262024-10-12

以前に以下の記事で「特定のページごとに背景色を変更する方法」を解説しました。

【WordPress】特定のページのみ背景色を変える方法

しかし、中には

ケケンタ

「ページごと」っていう細かい括りじゃなくて、「固定ページ」、「投稿ページ」って感じでもっと大きな枠ごとに設定したいんだよな

という方もいらっしゃるかと思います。

そこで今回は、

固定ページ・投稿ページ・カテゴリーページなど
ページ種類に応じて背景色を設定する方法

をご紹介していきます。

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

ソースコード

早速ですが、ベースとなるソースコードは以下のようになります。

下記のソースコードをfunctions.phpへ記述する

function my_headinputtags() {
  $headinputtag = '';

  if ( ページ種類の判定条件 ) {
    $headinputtag = <<<EOM
      <style>
        body {
          background-color: ここに任意のカラーを設定;
        }
      </style>
    EOM;
  } 
  echo $headinputtag;
  }
  add_action( 'wp_head', 'my_headinputtags', 99);

上記のソースコードに、「ページ種類を判定するための条件分岐タグ」と「任意のカラー」を設定するだけで、ページ種類ごとに背景色を変えることが可能です。

（例）固定ページの背景色を「green」に設定

function my_headinputtags() {
  $headinputtag = '';

  if ( is_page() ) {  // 固定ページかどうかを判定
    $headinputtag = <<<EOM
      <style>
        body {
          background-color: green; // カラーに「green（緑）」を指定
        }
      </style>
    EOM;
  } 
  echo $headinputtag;
  }
  add_action( 'wp_head', 'my_headinputtags', 99);

functions.phpの編集方法がご不明な場合は、こちらの記事をご覧ください

主要な条件分岐タグ

ご参考までに、主要な条件分岐タグをいくつか掲載します。

ケケンタ

ページ種類の判定にご活用ください。

条件分岐タグ	判定内容
is_front_page()	トップページかどうか判定
is_home()	投稿一覧ページかどうか判定
is_page()	固定ページかどうか判定
is_single()	投稿ページかどうか判定
is_category()	カテゴリーページかどうか判定
is_tag()	タグページかどうか判定