特定の固定ページだけ、公開側とブロックエディタへ同じ見出し色を適用する例です。投稿IDをPHPで判定し、エディタ用CSSを追加します。
対象の固定ページIDを指定する
子テーマのfunctions.phpなどへ次のコードを一度だけ追加します。関数が返す25を対象の固定ページIDに変えてください。既存のPHPタグ内へ貼る場合は開始タグを追加しません。
function waza_page_heading_target_id() {
return 25; // 対象の固定ページIDへ変更。
}
function waza_page_heading_front_style() {
if (!is_page(waza_page_heading_target_id())) { return; }
wp_register_style('waza-page-heading', false, array(), null);
wp_enqueue_style('waza-page-heading');
wp_add_inline_style('waza-page-heading', '.page-id-' . waza_page_heading_target_id() . ' .wp-block-heading { color: #1D5CB4; }');
}
add_action('wp_enqueue_scripts', 'waza_page_heading_front_style');
function waza_page_heading_editor_style($settings, $context) {
$post = $context->post ?? null;
if (!$post instanceof WP_Post || 'page' !== $post->post_type
|| waza_page_heading_target_id() !== (int) $post->ID) {
return $settings;
}
$settings['styles'][] = array('css' => '.wp-block-heading { color: #1D5CB4; }');
return $settings;
}
add_filter('block_editor_settings_all', 'waza_page_heading_editor_style', 10, 2);
公開側とエディタ側の適用範囲
公開側では、対象固定ページのpage-idクラスの内側にある標準見出しブロックへCSSを追加します。エディタ側は対象固定ページの編集コンテキストだけにCSSを渡します。page-idクラスを追加する実装ではありません。本文のブロックや投稿データを書き換える処理もありません。
標準見出しに独自の文字色が設定されている場合や、テーマのCSSの優先度が高い場合、指定色が優先されないことがあります。今回の例は色の追加に限定し、エディタと公開側の余白や幅まで一致するとは限りません。
確認と戻し方
対象の固定ページ、別の固定ページ、通常の投稿をそれぞれ開いて、指定したページだけで変わるか確認してください。エディタを再読み込みし、PC・スマホのプレビューと公開画面を比較します。本記事ではPHPの条件分岐とCSS設定の追加を検証しましたが、実際のエディタ画面との見た目の一致は未検証です。
戻す場合は今回のフック登録2つと関数を外します。ブロック単位の装飾なら、エディタの「追加CSSクラス」に独自クラスを設定し、そのクラスを公開側とエディタ側のスタイルから参照する方法もあります。
仕様：block_editor_settings_all。公開側だけのページ限定読み込みは条件付きCSS読み込みの例を参照してください。
