WordPress│Code SnippetsでエディタにもCSSを反映させる方法

2024.03.312026.10.13

ブロックエディターと公開画面で同じ見出しCSSを使う例です。

専用ハンドルを登録し、enqueue_block_assetsで本文用のCSSを読み込みます。

対象はブロックの本文で、エディターのツールバーや設定パネルを装飾するコードではありません。

WordPress 6.3以降のブロックエディターを対象にします。

CSSクラスを付ける

対象の見出しブロックをH2にし、「高度な設定→追加CSSクラス」にwaza-heading-demoを入力します。

クラス名の先頭にドットは付けません。

このコードのセレクターはh2を指定しているため、同じクラスを付けたH3や段落には適用されません。

サイト内の全h2を変更せず、クラスを指定した見出しに限定します。

Code Snippetsまたは子テーマへ追加

Code SnippetsではPHPコードとして追加し、管理画面と公開画面の両方で実行される設定を選びます。

子テーマのfunctions.phpでも同じ処理を使えますが、Code Snippetsとの重複登録は避けます。

変更前に対象ファイルやスニペットを保存し、元へ戻せるようにします。

既存PHP内では開始タグを省き、旧motoki_enqueue_stylesは停止してください。

function waza_shared_heading_style() {
    wp_register_style('waza-heading-style', false, array(), null);
    wp_enqueue_style('waza-heading-style');
    wp_add_inline_style('waza-heading-style', 'h2.wp-block-heading.waza-heading-demo{background-color:#b8bdf5;color:#222;padding:.75em;}');
}
add_action('enqueue_block_assets', 'waza_shared_heading_style');

確認と戻し方

指定クラスのあるH2とないH2を、エディターの本文領域と公開画面の両方で確認します。

エディターがiframeの場合も本文用スタイルとして読み込みます。

テーマの強いセレクターやインライン指定に負ける場合は、読み込み順と計算後スタイルを調べます。

2026年10月2日、WordPress 7.1.2・SWELL 2.19.0のコードエディターで、クラス付きと通常の見出しを保存しました。

公開側では指定クラスの背景がrgb(184, 189, 245)になり、通常の見出しはテーマの背景を保持しました。

ビジュアルエディターのiframe内は本文が空白のため、この環境での編集時の描画は確認できていません。

戻すときはスニペットを停止し、追加クラスを外します。

参照：WordPress公式のエディターへのアセット読み込み。

よくある質問：Code SnippetsでエディターにもCSSを反映させるとき

この方法は、何のためのものですか？

記事では、ブロックエディターと公開画面で同じ見出しCSSを使う例です。専用ハンドルを登録し、enqueue_block_assetsで本文用のCSSを読み込みます。対象はブロックの本文で、エディターのツールバーや設定パネルを装飾するコードではありません。

どのバージョンが対象ですか？

記事では、WordPress 6.3以降のブロックエディターを対象にします。

見出しには、どうやってクラスを付けますか？

記事では、対象の見出しブロックをH2にし、「高度な設定→追加CSSクラス」にwaza-heading-demoを入力します。クラス名の先頭にドットは付けません。

同じクラスをH3や段落に付けると、どうなりますか？

適用されません。記事では、このコードのセレクターはh2を指定しているため、同じクラスを付けたH3や段落には適用されないとしています。サイト内の全h2を変更せず、クラスを指定した見出しに限定します。

コードは、どこに追加しますか？

記事では、Code SnippetsではPHPコードとして追加し、管理画面と公開画面の両方で実行される設定を選びます。子テーマのfunctions.phpでも同じ処理を使えますが、Code Snippetsとの重複登録は避けます。既存PHP内では開始タグを省き、旧motoki_enqueue_stylesは停止します。