WordPressで記事の新規投稿や編集を行うときに使用する編集画面。
記事本文を入力する部分はビジュアルモードとテキストモードの切り替えが可能で便利です。
ただビジュアルモードのデフォルトスタイルは、実際にホームページ上で表示される見た目と異なったりしますよね。
うーん、いまいちサイト表示と違うんだよなぁ…
今回はWordPressの記事編集時の画面をサイト表示と同じように変更するカスタマイズ方法をご紹介します。
ビジュアルエディタ用のスタイルシートを用意しよう
まずはビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。
テーマフォルダ直下にeditor-style.cssというファイルを用意して、投稿するコンテンツに反映されるCSSをコピーします。
この時の注意点として、余計なclassなどはそのままコピーしてこないようにしましょう。
例えば、サイトで記事を表示するエリアに.contentsとか.mainなどのclassを設定している場合、それらのclassは編集画面側には存在しません。
なのでそのままCSSをコピーしてくると、そのCSSは編集画面にうまく適用されないのです。
次の例を参考にして必要なCSSのみeditor-style.cssにコピーするようにしましょう。
1 2 3 4 5 6 7 8 | /* うまく反映されない書き方（編集画面に含まれないclassが使われている） */ .main h2 { font-size: 24px; } /* うまく反映される書き方（編集画面でh2を使ったときに反映される） */ h2 { font-size: 24px; } |
functions.phpでeditor-style.cssを読みこませるようにする
editor-style.cssをテーマ内に作成したら次はfunctions.phpにそのスタイルシートを有効にする記述を加えます。
次のコードをfunctions.phpに追記してください。
1 2 3 4 | function add_editor_style_cb() { add_editor_style(); } add_action('admin_init', 'add_editor_style_cb'); |
これで編集画面のビジュアルエディタ表示が、訪問したユーザーが目にするサイト表示に近くなっているはずです。
実際に見比べてみましょう。次の画像が今回のカスタマイズを行うまえの編集画面表示です。
デフォルトのWordPress編集画面表示ですね。
これが今回の方法でeditor-style.cssを読み込むことで、次のようにオリジナルのスタイルが適用されます。
表示が変化しましたね！わざわざプレビューボタンで確認しなくても、実際のサイト表示が把握しやすいので記事作成の効率が上がりそうです。
ぜひ試してみてください。
「ホームページ制作のことは良くわからない…。」シンス株式会社はそんな中小企業の強い味方です。
