ビジュアルエディタにCSSを適用する

ビジュアルエディタにCSSを適用する

ビジュアルエディタから記事など更新する際に、実際の見た目と異なるのでお客様からはわかりにくかったりします。
実際のh2やh3のスタイルをビジュアルエディタでも反映してほしいというご要望も少なくないはずです。
そこで、ビジュアルエディタに実際の見た目が合致するように、スタイルを適用させていきましょう!

また、使用しないh1タグなどの見出しを選択できないようにしていきましょう。

手順

①エディタに適用させるCSSを作成する。
②functions.phpにビジュアルエディタに適用させるCSSを読み込ませる。
③不要なタグをエディタから選択できないようにする。

①エディタに適用させるCSSを作成する。

cssはわかりやすいように『editor-style.css』としましょう。(一般的によく使用されています。)
記述する内容は、適用させたいスタイルをstyle.cssからコピペすればOKです。

②functions.phpにビジュアルエディタに適用させるCSSを読み込ませる記述。

// ビジュアルエディタ用CSS
add_editor_style('css/editor-style.css');

と記述するだけでOKです。キャプチャのとおり、反映されています。非常に簡単でした!

 

editor01

 

④ビジュアルエディタから不要なタグを選択できないようにする

TinyMCE Advancedをお使いの方も多いと思います。
TinyMCE Advancedで不要なタグを選択できないようにしていきましょう。

//エディタから段落,見出し,h1,h5,h6選択できないようにする
function custom_editor_settings( $initArray ) {
$initArray['body_class'] = 'editor-area';
$initArray['block_formats'] = "見出し2=h2; 見出し3=h3; 見出し4=h4;";//必要なタグを記述
return $initArray;
}

add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

h1はヘッダーなどで使用している場合が多いですので今回はエディタから選択できないようにします。
上記のように記述すると、段落,h1,h5,h6が選択できないようになります。

 
 
editor02 
 
以上、テキストエディタにスタイルを適用し、不要なタグを削除する方法でした。

 

 

SNSシェア

WP TECH WordPress技術専門 Tips

コーポレートサイトへ

WP TECH WordPress技術専門 Tips

採用サイトへ