0017

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

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

2019.12.5

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

はじめに

コード

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;
}

普通にCSSを書く

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

.postBody{
    h2{}
    h3{}
    p{}
    ul{
        li{

        }
    }
    dl{
        dt{}
        dd{}
    }
    //…以下省略
}//postBody

エディタに余白をもたせるCSSコード

自分のスタイルだけの場合、エディタエリアにいっぱいいっぱいに表示されます。そのため中に余白を設けます。

body.mce-content-body.wp-autoresize{
  padding: 20px !important;
}