2015/10/1

2021/10/5

2933 views

ワードプレスにおいて、デフォルトではビジュアルエディタでは表示用のCSSが適用されません。
そのため、字体（font-family）も見慣れない明朝体になってしまったり、どこか気持ち悪いことになります。
また、表示用のスタイルが把握しにくいため書きづらさもあります。
そんな問題を解決するには実際の表示スタイルを適用させればOKです。
以下でその方法を解説していきます。

1. エディタ用のCSSを作成する

まず、エディタに反映させる用の新しいCSSファイルを作成します。
今回はeditor-style.cssという名前にしていますが決まりはありません。

editor-style.cssの記述サンプル

@charset 'utf-8';
@import 'style.css';

h2 {
    font-size: 2rem!important;
    margin: 60px 0 30px 0!important;
    padding: 10px 10px 10px 14px!important;
    border-bottom: solid #dadada 2px!important;
    border-left: solid 6px #bde859!important;
    background: #f7f7f7!important;
}

“@import ‘style.css’;”で表示用のスタイルシートを読み込んでいます。
これでほぼ表示用と同じように反映されます。

しかし、「見出し」タグなどにおいてはワードプレスデフォルトのスタイルが適用されてしまうので、editor-style.cssに直接記述します。
記述例はh2のスタイルを定義しています。（※!importantは無くてもよいかもです）

2. 作成したエディタ用CSSをサーバーにアップする

では、作成したeditor-style.cssをサーバーにFTPなどでアップします。
アップする場所は、テーマフォルダ直下に配置します。
テーマフォルダ直下とはindex.phpやpage.phpなどテンプレートファイルがある場所です。

3. functions.phpにエディタ用のCSSを読み込むコードを記述する

最後に、functions.phpにエディタ用のCSSとなる「style.css」を読み込むためのコードを記述します。
以下のコードを記述です。
functions.phpの中の場所はどこでも構いません。

add_editor_style('editor-style.css');

以上で、ビジュアルエディタに実際の表示とほぼ同じスタイルを反映させることができます。

反映されない場合

うまく反映されない場合は以下の原因である可能性が高いと考えられます。

1.  ルートパスが間違っている

sunction.phpに記述したeditor-style.cssを読み込むためのルートパス、もしくは@import ‘style.css’;のルートパスが間違っていないか、またファイルがそれどうりにあるか確認してください。

2. キャッシュが残っている

エディタのスタイルはキャッシュを残しやすく、キャッシュがクリアされていない可能性があります。
スーパーリロードを行うか、以下のコードをfuntion.phpへ記述ください。

/*エディタースタイルのキャッシュクリア*/
function extend_tiny_mce_before_init($mce_init){
    $mce_init['cache_suffix']='v='.time();
    return $mce_init;
}
add_filter('tiny_mce_before_init','extend_tiny_mce_before_init');

まとめ

以上、ビジュアルエディタのスタイルを表示用に反映する方法でした。
ワードプレスサイトを納品する際などクライアントの使いやすさを考慮してこのあたりも調整しておくことが望ましいでしょう。
ご質問などあればお気軽にコメントください。