どうも7noteです。
WordPressで「この固定ページだけ色を変えたい」ときは、bodyタグに付いているクラスを使うと便利です。今回は、同じお知らせ枠を使いながら、1ページだけ背景と枠線を変えてみます。
このページだけ色を変える
固定ページのIDが123なら、.page-id-123 .notice-boxと書きます。123のページは緑系、別のページはグレーのままになる例です。
まず、固定ページ本文の「カスタム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／子テーマ
