当ページは別サイトからの移行記事で、本来の投稿日時は2025年4月27日になります。
ブロックエディター対応のテーマをそのまま使ってる分にはテーマ独自の装飾効果でたとえば”囲み装飾”とかがあった場合は、編集画面上でもサイト表示上でも同じ装飾効果を確認することができます。
しかしながらカスタムで追加したオリジナルのスタイル等はサイト表示時にはその効果を確認できても、編集画面上では確認できず素の状態で表示されることになります。
旧エディター時代ならしょうがないですが、せっかくのブロックエディターなんですから編集時にもリアルタイムで効果を確認できた方が編集作業も捗るというものです。
そこでここではサイトに反映されるスタイル（効果）をブロックエディタ―の編集画面にもリアルタイムで反映（確認）させるやり方をご紹介します。
WordPress 7.0のアップデートにて、オリジナルのCSSが編集画面にも反映されるようになったみたいです。
ただし当方で検証した限りでは、『外観→カスタマイズ→追加CSS』や『高度な設定内の追加CSS』内に書いたスタイルのみがその適用範囲のようで、子テーマ内のstyle.cssに書いたスタイルは適用されないようです。
注意点として『外観→カスタマイズ→追加CSS』内に大量のカスタムCSSを素のままで書き込んでる状態だと、ソース上は長いスタイルがずら～と表示されてから本文（body）がやっと表示されることになります。なのでここにスタイルを書き込む場合はSEOの観点からも圧縮（短縮）することをおすすめします。
もう一つの注意点として『高度な設定内の追加CSS』内に「display:none;」を書いてしまうと編集画面上も非表示になってしまいます。
ということで子テーマにスタイルをまとめて書いている方向けに、このページはしばらく残しておきます。
やり方
| 使い勝手 | 設置レベル |
|---|---|
| かなり便利 | オリジナルファィルやコードをいじるので 作業工程・難 |
これ以降の内容に関してはご利用の環境や使い方次第で「サイトが正常に表示されなくなった」などの障害が生じる可能性もありますため、ご利用に際しては自己責任にてお願い申し上げます。
またトラブルが生じても元の状態に戻せるようテーマのオリジナルファイルをカスタマイズする際は事前にバックアップ（コピー等）しておくことをおススメします。
特にfunctions.phpの編集は一文字でも間違えるとサイトが表示されなくなり、ワードプレスの管理画面も正常に表示されなくなります。
その場合はサーバー上のfunctions.phpをトラブル前の状態に戻すことでサイトも管理画面も正常に表示されるようになります。
なおテーマ内包のオリジナルファイルに加えた変更（カスタマイズデータ）はテーマのアップデートで元に戻ってしまいますため、カスタマイズ内容も併せてコピーするなどしておくといいでしょう。
（子テーマであればその心配はありません）
まずは契約しているレンタルサーバーのファイル編集画面を開きます。
そして子テーマが保存されてるディレクトリ（フォルダ）まで開いたら、同じ階層に「editor-style.css」というファイル名でファイルを新規作成します。
親テーマだとアップデートの時に初期化されて（消えて）しまうので、子テーマを推奨します。
ワードプレステーマ《SWELL》には予め子テーマが用意されており、ダウンロードすると子テーマ内に「functions.php」と「style.css」が同梱されてます。
たとえばエックスサーバーを使ってテーマ《SWELL》を利用している『sample.com』というサイトの編集画面用のスタイルシートであれば、
sample.com→public_html→wp-content→themes→swell_child
となります。
「editor-style.css」というファイル名は別のものでも構いませんが、その場合はこのあと説明するfunctions.php内のファイル名も変更する必要があります。
「editor-style.css」と同じ階層にある「functions.php」を開き、最下段に以下のコードをコピー＆ペーストします。
（意味は”編集画面ではeditor-style.cssを読み込んでね”というものです）
//編集画面にオリジナルスタイル反映
function add_block_editor_styles() {
wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/editor-style.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );他のテーマで子テーマを自作する場合は必ず「functions.php」という名称で新規作成します。
上記ファイルを開いたらとりあえず「<?php」と記入しておきます。
実際のコードは「<?php」の後ろでEnterキーを数回押してから記入すれば問題ないかと思います。（※動作未検証）
あとは充てたいスタイルを「editor-style.css」内に書き込むだけです。
一部のスタイルはそのまま書いても編集画面に反映されない場合があります。
たとえば見出しH2にオリジナルのスタイルを追加する場合、通常は
h2 {
color:red;
}のように書きますが、実際には
.post_content h2 {
color:red;
}のように書かないと反映されなかったりします。
この辺は使ってるテーマによっても異なってくるのでご注意ください。
【ワードプレス ver.7.0.2で動作検証済】
コメント