なるWeb
コーディングclassCSSWordPress

WordPressで特定ページだけCSSを変える方法｜body_class()とpage-id

WordPressで特定ページだけCSSを変える。page-id-123のページだけ色を変える図解
XfB!LINE

どうも7noteです。

WordPressで「この固定ページだけ色を変えたい」ときは、bodyタグに付いているクラスを使うと便利です。今回は、同じお知らせ枠を使いながら、1ページだけ背景と枠線を変えてみます。

このページだけ色を変える

固定ページのIDが123なら、.page-id-123 .notice-boxと書きます。123のページは緑系、別のページはグレーのままになる例です。

対象ページではお知らせ枠が緑系になる表示例
対象：page-id-123
対象外ページではお知らせ枠がグレーのままの表示例
対象外：page-id-124

まず、固定ページ本文の「カスタムHTML」ブロックなどに、次のお知らせ枠を置きます。notice-boxはこの例で自分で付けるクラス名です。

<div class="notice-box">
  <p>お知らせ：営業時間は10時〜18時です。</p>
</div>

次のCSSを、サイトで読み込まれる追加CSSなどへ入れます。数字の123は、実際の対象ページIDへ置き換えてください。

/* どのページでも共通の見た目 */
.notice-box {
  padding: 24px;
  border: 2px solid #64748b;
  border-radius: 12px;
  background: #f1f5f9;
  color: #172033;
}
/* 123は対象の固定ページIDに置き換える */
.page-id-123 .notice-box {
  border-color: #0f766e;
  background: #ccfbf1;
}

先に共通の見た目を決め、その後ろに対象ページ用の指定を書いています。同じお知らせ枠を別ページにも置くと、色が変わる範囲を確認できます。

page-idを調べる

対象の固定ページをブラウザーで開き、右クリックの「検証」からbodyタグを探します。たとえば、次のように表示されます。ほかのクラスはテーマやページによって異なります。

<body class="page page-id-123 page-template-default">

ここにあるpage-id-123が目印です。HTMLのid属性ではなくclass属性なので、CSSでは先頭に「.」を付けます。固定ページの編集URLにあるpost=123もIDを調べる手掛かりになりますが、最後は表示されたbodyタグを確認しましょう。

.page-id-123 .notice-boxの間の半角スペースは、「page-id-123の内側にあるnotice-box」を指定しています。スペースをなくすと、同じ要素が両方のクラスを持つ場合の指定になってしまいます。

投稿ならpostidを使う

通常の投稿の詳細ページでは、page-id-123ではなくpostid-123が使われます。ハイフンの位置も違うので、思い込みで書かずにbodyタグから確認すると確実です。

/* 投稿IDが456の記事にあるお知らせ枠だけを変更 */
.postid-456 .notice-box {
  border-color: #0f766e;
  background: #ccfbf1;
}

.pageだけでは固定ページ全体が対象になります。また、テンプレート由来のクラスは、同じテンプレートを使う複数ページで共有されることがあります。1ページだけならIDを含むクラスを選びましょう。

body_class()は何をしている？

body_class()は、ページに応じたクラスをbodyタグへ出力するWordPressの関数です。クラシックテーマのPHPテンプレートでは、次のように呼び出します。

<body <?php body_class(); ?>>

つまり、body_class()はクラスを出す側、page-idはCSSでページを絞る目印です。どちらかを選ぶ別々の機能ではありません。すでにbodyへクラスが付いていれば、CSSを追加するだけで使えます。投稿本文にこのPHPを書く必要はありません。

独自テーマなどでクラスが出ていない場合は、テーマ側の実装を確認してください。ブロックテーマのHTMLテンプレートへ、このPHPをそのまま貼る方法ではありません。

CSSはどこに書く？

クラシックテーマで「外観 → カスタマイズ → 追加CSS」が使える場合は、そこへCSSだけを入れます。<style>タグは不要です。

ブロックテーマでは、サイトエディターの「スタイル」にあるサイト全体の「追加CSS」を使う方法があります。入口や利用可否はWordPressのバージョン・テーマ・権限で異なります。ブロック単体用のCSS欄と間違えないようにしましょう。

子テーマを使っている場合は、読み込まれている子テーマのCSSファイルへ追加する方法もあります。style.cssを置くだけで必ず読み込まれるわけではないので、テーマの読み込み方法を確認してください。親テーマのファイルを直接編集すると、更新で変更が消えることがあります。

うまく変わらないとき

  • 実際のbodyに、指定したpage-idまたはpostidがあるか。
  • 変更したい枠にnotice-boxを付けたか。
  • 追加したCSSがそのページで読み込まれているか。
  • 検証ツールで指定が打ち消されていないか。競合するセレクターや読み込み順を確認する。
  • キャッシュに古いCSSが残っていないか。

テーマの見出しなどを変える場合は、notice-boxを実際の要素のクラスへ置き換えます。テーマ変更でHTMLが変わると、同じCSSが使えなくなる場合があります。固定ページを複製・作り直したときもIDを確認し直してください。

変更前のCSSを控え、まずはテスト環境で対象ページと対象外ページの両方を見ておくと安心です。CSSを書く場所の基本は、HTMLにCSSを書く3つの方法も参考にしてください。

まとめ

固定ページならpage-id、投稿ならpostidをbodyタグで確認し、変更したい要素の前に付けます。共通CSSとページ限定のCSSを分けておけば、ほかのページへ影響を広げずに調整しやすくなりますね。

おそまつ！

参考：WordPress公式：body_class()／get_body_class()／スタイルと追加CSS／子テーマ

XfB!LINE

関連記事