ビジュアルエディタにもCSSを適用させるには? – akiragoto
クリエイティブ

執筆者:akira

ビジュアルエディタにもCSSを適用させるには?

WordPress の入力方法について

WordPressの投稿に関しまして、入力方法は

  • ビジュアルモード
  • テキストモード

の2つがあります。
簡単に言うと、ビジュアルモードはフリーブログで適用されているような、
直感的な入力が行えるのに対し、テキストモードはHTML等を用い装飾を行っていく
全く異なった入力方法になります。
 
HTMLやCSSを熟知している方ならまだしも、ライトな方や、
ワタシのような物ぐさにはビジュアルモードは無くてはならないものです。
ですが、このビジュアルモードには、プレーンの状態だと1点嫌な点があるのです。
 

ビジュアルモードの難点

ビジュアルモードの難点は、
ビジュアルモードで見ている画面とHPでの表示の相違です。
 
なぜこのような事が起きてしまうかと言いますと、
(少しHTMLやCSSのお話になりますが)
ビジュアルモードで読み込まれているCSSと、
実際にHPで適用されているCSSが違うと言うことです。
WordPressを利用するとテンプレートを選ぶと思いますが、
左メニューの外観にある“テーマ編集”の中に「style.css」というものがあります。
この「style.css」がHPのメインで使用されるCSSになります。
こちらを普段は編集しているわけですが、管理画面は編集していませんよね?
(実際、ワタシもどこをいじれば編集できるのかわかりませんが…)
 
っと!いうことで、
この相違を少しでも無くそう!というのが今回の目的となります。

ビジュアルモードにもCSSを適用させる方法

とっても簡単で、適用後は快適になるのでお勧めです!
手順としましては、

  • ビジュアルエディタ用のCSS作成する
  • 「function.php」へのコード追加する

この2つをすることで、可能になります。
 

◆ビジュアルエディタ用のCSS作成

まずは、ビジュアルエディタ用のCSSを作成します。
基本的には現在自分が使用しているテーマのCSSから、
ビジュアルエディタで適用したいスタイルをコピペすればOKです。
「visual-editor.css」など、わかりやすい名前でCSSファイルを作成します。
出来ましたら、「visual-editor.css」を使用しているテーマのフォルダ直下に
アップロードします。
 

◆function.phpへのコード追加

次に、「function.php」に、以下のコードを追加します。
 
add_editor_style(‘editor-style.css’);
function custom_editor_settings( $initArray ) {
$initArray[‘body_class’] = ‘editor-area’;
return $initArray;
}
add_filter( ‘tiny_mce_before_init’, ‘custom_editor_settings’ );
 
今回に限らずなのですが、「function.php」は、WordPressの核とも言えるべき
大事なソースになります。
「function.php」を書き換える際は、必ずバックアップを取っておきましょう。
 
これで、ビジュアルエディタにも実際のスタイルが適用されます。
 

適用させる時の注意点

先ほども述べましたが、「function.php」を書き換える際はバックアップを取ること。
「function.php」だけではないのですが、WordPressをのテンプレートを一から
組み立てている方は良いのですが、他テンプレートを使用している場合、
どこに何があるのかよくわからないことがあります。
バグってしまうと、それこそどこを直せば良いかわからなくなってしまうので、
こまめにバックアップを取っておきましょう。
 
今回、ビジュアルエディター用の「visual-editor.css」を作成したわかですが、
「style.css」と同様の箇所を変更した場合、「visual-editor.css」にも適用させる
必要があるのでお忘れなく。
“だったら初めから「style.css」をビジュアルエディターに読み込ませれば?”
となりそうですが、「style.css」はたくさんのソースを書き込んであるので、
こちらを読み込むと、時間がかかってしまいます。
なので、普段変更がないであろう、

  • bodyタグ
  • hタグ
  • aタグ
  • pタグ
  • hlタグ

など、必要最低限の箇所のみのコピーにしておくと良いでしょう。
 

最後に

ワタシもWEB関係の仕事をしていますが、そこまで達者なわけではありません。
本業でもなく趣味レベルに近く、このブログも自分の勉強のアウトプットとして
やっているので、間違った点や改良点は多々あると思いますが、
生暖かい目で見守って頂けると幸いです。
もし、もっと良い方法があるぜ!という意見がございましたら、
是非、ご教授お願いいたします。

スポンサーリンク

スポンサーリンク

スポンサーリンク

   

この記事を書いた人

お勧め記事