【プレビューを見ながら調整する回数を減らそう】WordPressのビジュアルエディターで入力する内容を本文のデザインと合わせる方法

カスタマイズ情報など

普段、WordPressの「投稿の編集」画面で文章を書くときは「ビジュアルエディター」を使って書いています。

下の画像のように「ビジュアル」というタブがアクティブになっている（選択されている）状態だと「ビジュアルエディター」を使っているよ、ということです。

文章書いて、プレビュー見て、調整して・・・なんだこの作業は？

ところで、調子よく文章を書き終えて「さあ、公開しよう！」という前に・・・投稿の編集画面で入力した文章と、実際に公開される文章のデザインが変わるので、プレビュー画面を見て「公開する前に本文をチェック」する方も多いとは思います。

そして本文をチェックをした結果、

  • ああ、ちょっと改行位置を調整しよう
  • 1文が長くなりすぎちゃったな。文字数を調整しよう

などの「調整」が必要になることってありませんか。

本文のデザインをビジュアルエディターにも適用しよう

本文のフォントサイズや表示幅などが編集画面の入力欄と違うので、上記のような「調整」をしないといけないのは、わりと手間ですね。

そこで、「投稿の編集」画面の入力欄を本文のデザインと合わせる方法があります。

デザインを合わせることでどう変わるのか、下の画像で見てもらえると何となくわかると思います。

今まで

これから

本文と重ねてみる

本文の表示幅、フォントの種類、フォントの大きさ、行間、字間などその他のスタイルもほぼ全く同じスタイルが適用されていますね。

というわけで、これを実装する方法を以下に書きました。機会がありましたらご参考ください。

WordPressのビジュアルエディターで入力する内容を本文のデザインと合わせる方法

「functions.php」ファイル中に以下のコードを書きます。

//ビジュアルエディター用のCSS読み込み
add_action( 'admin_init', 'custom_editor_style' );
function custom_editor_style() {
 add_editor_style(); //テーマフォルダ内にある「editor-style.css」を読み込む
}

テーマフォルダ内に「editor-style.css」ファイルがあれば、投稿の編集画面の入力欄に読み込んで適用されます。

つまり、本文と同じCSSを「editor-style.css」にも書いて適用させればOK、ということですね。

読み込むCSSファイルは変えられるよ

パラメーターにファイル名（またはファイルのURL）を指定すると、読みこむファイル名を変更することができます。（※指定できない形式もあります。詳しくはCodexを参考ください。）

//ビジュアルエディター用のCSS読み込み
add_action( 'admin_init', 'custom_editor_style' );
function custom_editor_style() {
 add_editor_style('editor.css'); //テーマフォルダ内にある「editor.css」を読み込む
}

まとめ

この方法を使えば「プレビュー画面を全く見なくてもいい」というほどではないですが、調整にかける時間は多少削減できるのではないかと思います。

私は実際にこのカスタマイズをお客さんにすることがあるのですが、結構喜ばれるので「わりと欲しい機能なんだな」という認識をしています。

WordPressの操作にあまり慣れていない方が文章を書いたり、文章の校正などの編集を行う方が「本文の調整に時間かかるんだよ・・・」という場合は、ご参考いただけますと嬉しいです。

著者:bouya Imamura