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

Wordpress

クライアントへ納品する際、ビジュアルエディアも見た目に合わせていく必要があります。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;
}
タイトルとURLをコピーしました