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

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

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »