WordPressテーマSANGOの質問

ビジュアルエディターのスタイルを実際の表示に合わせたい

うきち

2018/04/06

ビジュアルエディターでも投稿時の見た目と同じにしたいのですが、やり方を教えていただけないでしょうか？

①sango-theme-childの下にlibraryフォルダを作り、更にCSSフォルダを作成。
②親テーマからeditor-style.cssをコピーして配置。

ここまではできるのですが、この先どのようにstyle.cssの中身を移植したら良いのでしょうか？

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

コメントへの回答

サルワカくん

2018/04/07

その方法だとeditor-style.cssが上書きされないので、以下の方法を取って頂くと良いかと思います。
手順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 wpdocs_my_add_editor_styles() { 
add_editor_style( get_stylesheet_directory_uri() . '/editor-style.css' ); 
} 
add_action( 'admin_init', 'wpdocs_my_add_editor_styles' ); 
/*END 子テーマのeditor-sytle*/

以上で準備は完了です。あとは、子テーマのeditor-style.css上にCSSを書きます。ただし、WordPressでビジュアルエディタに対してCSSを指定する場合、少し独特の書き方をしないと効きません。このあたりはやや上級者向けの内容です。ググってみると解説記事がヒットするかと思います。