使い方
テーマフォルダ (子テーマのフォルダ) に editor-style.css
を配置し、function.php
に次のコードを追加する。
add_editor_style( 'editor-style.css' );
Code language: PHP (php)
参考:
WordPress のビジュアルエディタをカスタマイズする | webOpixel
WordPress でオリジナルの editor-style.css を設置/適用する方法/子テーマ対応 | WEB TIPS
エディタにもサイトと同じ CSS を適用させる | WEB の技
add_editor_style を使ってビジュアルエディターのフォントを変更する | ファンタスソフト株式会社
WordPress のビジュアルエディタに CSS を適用して見やすくしてみた! | ゆにメモ
WordPress の editor-style.css を編集してビジュアルエディタをカスタマイズしよう | shuu11 code
WordPress のビジュアルエディターにテーマの style.css を割り当てる方法 | 寝ログ
WordPress のビジュアルエディターのスタイルをカスタマイズする方法いろいろ | 寝ログ
WordPress のビジュアルエディタ TinyMCE を少し使いやすくする | 店舗、生産者を応援
TinyMCE の editor-style.css の制限と回避方法 | ホーム NW 研究所
Forcing reload of editor-style.css – WordPress Development Stack Exchange
キャッシュを更新する
スタイルはブラウザにキャッシュされるため、キャッシュをクリアしない限り更新したスタイルは読み込まれない。tiny_mce_before_init
フックで cache_suffix
を指定すると、cache_suffix
のバージョン番号を更新することで強制的に新しいスタイルを読み込めるようになる。
function custom_tiny_mce_init( $mce_init ) {
$mce_init['cache_suffix'] = 'v=0.1.0';
return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_init' );
Code language: PHP (php)
開発中は、cache_suffix
としてバージョンの代わりに time()
を指定すると、キャッシュを無効化して常に最新のスタイルを読み込めるので便利が良い。
$mce_init['cache_suffix'] = 'v=' . time();
Code language: PHP (php)
参考:
投稿エディタのスタイル editor-style.css がキャッシュされて変更が反映しない | CSS note
クラシックエディタ用の CSS を add_editor_style() で追加する時にクエリパラメータを付ける方法 | WEMO
add_editor_style
参考:
add_editor_style | WordPress 私的マニュアル
add_editor_style | WordPress Codex 日本語版
add_editor_style() | WordPress Developer Resources [Official]
ブロックエディタ/クラシックブロック
参考: