最短で旧ビジュアルエディタの見た目を実際と合わせるコード

2019.12.5

クライアントへ納品する際、ビジュアルエディアも見た目に合わせていく必要があります。editer-style.cssを作って～という流れは知っているのですが、なにかスマートではないので、自分なりに単純作業化させたので、コードを載せておきます。

はじめに

• Gutenberg（グーテンベルグ）は使いません。旧エディタです。プラグイン「Classic Editor」を入れます

コード

functions.phpに以下のコードをコピペします。

//旧ビジュアルエディタ用CSSファイル読み込み
function wpdocs_theme_add_editor_styles() {
  add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
//旧ビジュアルエディタのクラス名に任意のclassを追加する

add_filter( 'tiny_mce_before_init', 'tiny_mce_before_init_custom_demo' );

function tiny_mce_before_init_custom_demo( $mceInit ) {

//追加するクラス名を付け加える

$mceInit['body_class'] .= ' postBody'; //エディタの基軸となるクラス名を入力

return $mceInit;

}

• editer-style.cssといった別ファイルは読み込みません。通常読み込むstyle.cssを想定しています。
• [postBody]の箇所には、エディタの基軸となるクラス名を入力してください。

普通にCSSを書く

普通にCSSファイルを書いてください。上記例で行くと、postBodyクラスを基軸によく使うタグのスタイルを記載します。

.postBody{
    h2{}
    h3{}
    p{}
    ul{
        li{
    }
}
dl{
    dt{}
    dd{}
}
//…以下省略
}//postBody


エディタに余白をもたせるCSSコード
自分のスタイルだけの場合、エディタエリアにいっぱいいっぱいに表示されます。そのため中に余白を設けます。
body.mce-content-body.wp-autoresize{
  padding: 20px !important;
}