WordPress ビジュアルエディタにオリジナルのスタイルシートを使う

  WordPress

WordPressのビジュアルエディタのスタイル(css)にオリジナルのスタイルを適用してみます。

適用するスタイルは、なるべく投稿の表示と同じになるように指定します。
※実際には【single.php】に対して指定しているセレクタとビジュアルエディタとでは同じように指定できない場合もあり、あまり複雑なスタイルを適用することはできません。

 

editor-style.css の作成

WordPressのテーマフォルダの中にファイル名を【editor-style.css】としてcssファイルを作成して保存します。

【editor-style.css】にビジュアルエディタ内で使用する要素に対してスタイルを指定していきます。

※適用するスタイルは、なるべく投稿の表示と同じになるように指定します。
テーマによっては同じように指定できない場合もあります。
あまり複雑なスタイルを適用することはできません。

body {...}
ul {...}
ol,li {...}
a {...}
a:hover {...}
em {...}
h1,h2,h3,h4,h5,h6 {
	clear: both;
}
h1 {...}
h2 {...}
h3 {...}
h4 {...}
h5 {...}
h6 {...}
pre {...}
img {...}
.alignleft {float: left;}
.alignright {float: right;}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

 

add_editor_style()

【functions.php】に add_editor_style() を追加します。

add_editor_style('editor-style.css');

 

テーマ開発者は自分のスタイルシートファイルを TinyMCE ビジュアルエディターへ関連付けできます。この関数は $stylesheet 引数に指定されたファイルを現在のテーマディレクトリから相対パスで探し、存在すれば関連付けます。$stylesheet 引数が指定されない場合はテーマディレクトリ内でデフォルトのエディター用スタイルシート editor-style.css を探し、存在すれば関連付けます。
子テーマ が使用されている場合、1回の関数呼び出しで、子テーマと親テーマ両方のテーマディレクトリについて同じ相対パスでファイルを探し、存在すれば両方のファイルと関連付けます。

Codex: 関数リファレンス/add editor style

 

WordPressの管理画面の「投稿」>「新規追加」でスタイルが反映されているか確認して完了です。

 

  WordPress     by