BLOG

  • Facebook
  • Twitter

WordPressのビジュアルエディタ表示を実際に公開されるページ表示に近づける方法

WordPressで記事の新規投稿や編集を行うときに使用する編集画面。

記事本文を入力する部分はビジュアルモードとテキストモードの切り替えが可能で便利です。

ただビジュアルモードのデフォルトスタイルは、実際にホームページ上で表示される見た目と異なったりしますよね。

うーん、いまいちサイト表示と違うんだよなぁ…

うーん、いまいちサイト表示と違うんだよなぁ…

今回はWordPressの記事編集時の画面をサイト表示と同じように変更するカスタマイズ方法をご紹介します。

ビジュアルエディタ用のスタイルシートを用意しよう

まずはビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。

テーマフォルダ直下にeditor-style.cssというファイルを用意して、投稿するコンテンツに反映されるCSSをコピーします。

この時の注意点として、余計なclassなどはそのままコピーしてこないようにしましょう。

例えば、サイトで記事を表示するエリアに.contentsとか.mainなどのclassを設定している場合、それらのclassは編集画面側には存在しません。
なのでそのままCSSをコピーしてくると、そのCSSは編集画面にうまく適用されないのです。

次の例を参考にして必要なCSSのみeditor-style.cssにコピーするようにしましょう。

functions.phpでeditor-style.cssを読みこませるようにする

editor-style.cssをテーマ内に作成したら次はfunctions.phpにそのスタイルシートを有効にする記述を加えます。

次のコードをfunctions.phpに追記してください。

これで編集画面のビジュアルエディタ表示が、訪問したユーザーが目にするサイト表示に近くなっているはずです。

実際に見比べてみましょう。次の画像が今回のカスタマイズを行うまえの編集画面表示です。

wp-editor-style01

デフォルトのWordPress編集画面表示ですね。

これが今回の方法でeditor-style.cssを読み込むことで、次のようにオリジナルのスタイルが適用されます。

wp-editor-style02

表示が変化しましたね!わざわざプレビューボタンで確認しなくても、実際のサイト表示が把握しやすいので記事作成の効率が上がりそうです。

ぜひ試してみてください。

「ホームページ制作のことは良くわからない…。」シンス株式会社はそんな中小企業の強い味方です。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!