風吹です。
以前の記事で、WordPressの投稿画面のビジュアルエディタを使いやすくする方法として書いていますが、あれからいろいろ試行錯誤して、こうするのが一番良いというのが定まったので、紹介させていただきます。

 

1.WordPressのテーマディレクトリにeditor-style.cssを追加する。
2.functions.phpにadd_editor_style(“editor-style.css”);を追加する。
3.
投稿画面のビジュアルエディタを拡張するためにTinyMCE Advanced をインストール。
4.TinyMCE Advancedの設定を行う

 

詳しい手順はこちらで紹介しています。

WordPressプラグインTinyMCE Advancedに独自CSSを適用する

 

この方法だとCSSのクラスなどもプルダウンメニューから簡単に選択できるようになり、
見た目も実際のサイトと同じに出来るのでとても便利なのですが、CSSを追加したときなど、
いちいち、メインのCSSと、editor-style.cssの両方に追加しなければいけないので、
ちょっとめんどくさいなと思ったので、functions.phpと、editor-style.cssの記述内容を
少し変えてみました。

 

functions.php

add_editor_style("editor-style.css");
add_editor_style("style.css");

function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'ID';	// id の場合はこれ
	$initArray['body_class'] = 'class';	// class の場合はこれ
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

 

2行目以降が前回からの追加部分です。

今回は、add_editor_style(“style.css”); を追加することによって、ビジュアルエディター上で表示するときにも、テーマのメインCSSを読み込ませていますので、追加のCSSなどをいちいちeditor-style.cssにコピペする必要がなくなります。

そして、editor-style.cssは、スタイルをビジュアルエディター上で簡単に選択して適用できるように必要なクラスだけは記述しておきます。

 

本当は、functions.phpに、

 

if ( ! isset( $content_width ) ) $content_width = 700;

 

とやることで幅も指定しておきたかったのですが、ちゃんと動かなかったので、
代わりにeditor-style.cssに以下を追加しておきます。

 

body {
    width:700px;
}

 

これで文字の折り返しなども実際のサイト上での表示と同じように折り返しさせられますので、
いちいちプレビューしなくても確認しながら記事を書いていくことができます。

因みにこの700pxは、賢威7の2カラムの場合の数値ですので、違うテーマの場合はそのテーマに合う数値に変更してください。

 

wo_same01

 

もちろん、見出しやその他のスタイルも一発で挿入できて、ビジュアルエディター上の見た目も同じように表示出来ます。

結構簡単に出来て、メチャクチャ便利なので一度やってみてください。

最新ネットビジネス速報をいち早くお届け!

有益な情報を最新で配信しています。

メルマガ登録