WordPressテーマSANGOの質問

ビジュアルエディターのスタイル（画像のスタイル）に独自のclassを追加したい

まさひろ

2019/03/01

こんばんは。ビジュアルエディターのスタイルに任意のclassを追加させることは可能でしょうか？

先日は、タグページについて丁寧にご説明いただき、ありがとうございました。

SANGOテーマの設計図（各ファイルの役割）

コメントへの回答

サルワカくん

2019/03/02

カスタマイズが必要です。

手順1：子テーマ内にeditor-style.cssを追加
子テーマ（sango-theme-child）ディレクトリの直下に、editor-style.cssという名前のファイルを追加します。
このファイル上に書かれたCSSは、親テーマのeditor-style.cssと合わせてビジュアルエディタに対して指定されます。つまり、「親テーマのeditor-style.css」＋「子テーマのeditor-style.css」両方がビジュアルエディタに対して反映されます。
もし、全く同じCSSを書いた場合、子テーマのCSSが優先されます。

手順2：子テーマのfunctions.phpに読み込みコードを追加

/*子テーマのeditor-sytleを読み込み*/
function my_custom_editor_styles() {
  add_editor_style( get_stylesheet_directory_uri() . '/editor-style.css' );
}
add_action( 'admin_init', 'my_custom_editor_styles' );
/*END 子テーマのeditor-sytle*/

あとはeditor-sytle.cssにCSSを書いていきます（CSSの追加後はブラウザのキャッシュの削除が必要です）。
なお、TinyMCEのエディターにスタイルを適用させるためには少し独特のCSSの書き方をしなければ効かない場合があります（詳しくは寝ログさんの記事が参考になると思います）。

このあたりは全テーマ共通の仕様なので、分からない部分があればGoogle検索してみると参考になる記事がたくさん見つかると思います。