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

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

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

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

しかし、中には

ケケンタ

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

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

そこで今回は、

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

をご紹介していきます。




ケケンタ

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


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

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

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

ケケンタ

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

タイマースタート

3:00

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


目次

ソースコード

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

下記のソースコードを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()タグページかどうか判定
主要な条件分岐タグ

まとめ

以上がページ種類ごとに背景色を変更する方法でした。

今回ご紹介したソースコードを使用すれば簡単に実装可能ですので、ぜひご活用いただけると嬉しいです。

ケケンタ

それでは、最後までご覧いただきありがとうございました。

当ブログではWordPressやWeb制作、PHPに関する情報を発信しています。
他の記事もご覧いただけると嬉しいです。

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

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次