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