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

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

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

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

しかし、中には

ケケンタ

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

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

そこで今回は、

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

をご紹介していきます。

目次

Web制作を仕事にしたいなら

 ̄ ̄ ̄

格安レンタルサーバーを
お探しなら

格安サーバーをお探しならリトルサーバーがおすすめ!

リトルサーバーの特徴
  • 月額150円~利用可能
  • 標準で全サーバー毎日自動バックアップ付き
  • 全プランWordPress対応(簡単インストール機能付き)
  • 独自SSLが無料(全プランがSSLに完全対応)
  • 提供ドメインが複数あるため独自ドメインが無くても複数サイト運営可能
  • 独自ドメイン無制限(サブドメインも無制限で利用可能)
  • 無料お試し期間がある

リトルサーバーの最大の特徴は安価な月額料金です

\ 利用料金比較表 /

ミニプランワードプランリトルプランビッグプラン
月額料金150円~195円~250円~430円~
SSD容量20GB30GB60GB120GB
提供ドメインアカウント+2アカウント+2アカウント+3アカウント+5
独自ドメイン無制限
バックアップ7日分
リトルサーバー>プラン別サービス比較

有名なサーバーだと月額料金は1000円前後であることが普通です。

仮にリトルサーバーで同じ料金(1000円)を支払ったとすると

最も安いミニプランだと半年分
おすすめのリトルプランでも4カ月分のサーバーがレンタル可能!

こんな方にオススメ

  • 実案件でテスト用のサーバーを用意したい
  • とりあえずサーバーというものに触れてみたい
  • 試しにWordPressを本番運用してみたい
  • いま利用しているサーバーが高額だから安価なレンタルサーバーに乗り換えたい
ケケンタ

リトルサーバーには無料お試し期間があります。
ご興味のある方は是非ご検討してみてはいかがでしょうか。

無料お試しのお申し込みはこちら

「仕事が忙しい方」、「すぐに商品が欲しい方」にピッタリのサービス

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る 
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

  • Amazonプライムに会員登録する
  • 会員の自動更新を解除しておく=期限が来たら自動解約
  • 1~3ヶ月ぐらいすると再度無料体験の案内が表示される
ケケンタ

僕自身、過去に少なくとも3回は無料体験を利用しています。

ソースコード

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

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);

主要な条件分岐タグ

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

ケケンタ

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

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

まとめ

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

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

ケケンタ

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次