WordPressのビジュアルエディターに見出しのスタイルを適用する方法（Simplicity）

WordPressのブログで定番のカスタマイズが見出しの装飾ですが、記事の見出しをカスタマイズした場合でも、投稿画面のビジュアルエディターでは、テーマのデフォルトのスタイルが適用されています。

今回は、ビジュアルエディターに、記事と同じ見出しの装飾スタイルを適用する方法を説明します。

Simplicityの場合

僕はWordpressテーマ「Simplicity」を利用しているので、Simplicityの場合を先に説明します。
Simplicityでは、ビジュアルエディターのスタイルは簡単に適用させることができるようになっています。

子テーマの「ビジュアルエディターのスタイルシート (editor-style.css)」に、適用させたいスタイルを記述（style.cssからコピペでOK）するだけです。

FTPクライアントソフトを利用して、editor-style.cssをテーマのディレクトリ（Simplicity2-child）にアップロードしてもOKです。

Wordpress管理画面から「ビジュアルエディターのスタイルシート (editor-style.css)」を編集する方法を説明します。

管理画面左側にある[外観]→[テーマの編集]をクリックします。

テーマファイルの編集画面が表示されます。

右側の一覧からビジュアルエディターのスタイルシート (editor-style.css)を選択します。

ここに見出しタグの記述をします。

#the-content,.articleなどの余計なID名、クラス名がついていると、ビジュアルエディターでは適用されません。

h2,h3などだけ書くようにして下さい。

style.cssからコピペするときは気をつけて下さい。

他のテーマの場合も簡単に説明します。

まずeditor-style.cssを作成し、FTPクライアントソフトを利用してテーマディレクトリに転送します。

次に、以下のコードをfunctions.phpに記述します。

function add_editor_style_cb() {
 add_editor_style();
}
add_action('admin_init', 'add_editor_style_cb');

これで、ビジュアルエディターでeditor-style.cssを適用するようになります。

ビジュアルエディターの表示が実際の記事と同じになると、かなり作業がしやすくなります。
Simplictyを使っている人は簡単にできるようになっているので、是非やってみて下さい。

記事の見出しデザインの他、オリジナルのボックススタイルやリストスタイルなども適用させておくと良いと思います。

このような細かいところがとても親切に設計されているのが、Simplicityの素晴らしいところだと思います。