ビジュアルエディタにスタイルを適用する方法 [WordPress/TinyMCE]

使い方

テーマフォルダ (子テーマのフォルダ) に 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]

ブロックエディタ／クラシックブロック

参考：

グーテンベルクのブロックエディタにスタイルを追加 | SMART

エディタにもサイトと同じ CSS を適用させる | WEB の技