【WordPress】投稿の編集(ビジュアルエディタ)を公開時のデザインに近づける方法


WordPressの「投稿の編集(ビジュアルエディタ)」の画面と、公開サイトのデザインに違いがありませんか。

気になっている人は、多いはず。

ビジュアルエディタにも、スタイルシート(CSS)を適用して、公開時に近い見た目にできますよ。

また、「プレビュー」での確認作業が減る分、編集の時間を短縮できます。

以下で、『投稿の編集(ビジュアルエディタ)を公開時のデザインに近づける方法』をご紹介します。

ビジュアルエディタ

WordPressでは、投稿の編集画面には、2種類あります。

  • ビジュアルエディタ
  • テキストエディタ

公開サイトに近い形で編集できる「ビジュアルエディタ」と、コードを直接記述して編集する「テキストエディタ」。

切り替えは、ラベルをクリックするだけ。

投稿編集が楽なビジュアルエディタですが、実際のところ、公開した投稿ページとは、見た目がかなり異なります。

特に、CSSでデザインの変更箇所が多いほど、実際の表示とは、かけ離れたものになってしまいます。

ただ、投稿ページを作る際には、なるべく公開したページに近い見た目にしたいところです。

スポンサーリンク

ビジュアルエディタ用スタイルシートを有効化する

ビジュアルエディタ用のスタイルシートは、作成するだけでは適用されません。functions.phpに関数を書き込む必要もあります。

有効化の手順
  1. ビジュアルエディタ用のスタイルシートを作成
  2. functions.phpに記述

①ビジュアルエディタ用のスタイルシートを作成

まず、テーマのファイルに、「editor-style.css」という名前のファイルを作ります。格納は、style.cssと同じ階層場所。

すると、テーマの編集画面にも、作成した「editor-style.css」が追加されます。当然、編集もWordPress管理ページで行えます。

そして、公開サイト用のスタイルシートから、見出しやリスト、フォントファミリー(書体)などの必要な部分をコピーして、editor-style.cssに貼り付け(ペースト)ます。

editor-style.cssには、直接CSSだけを記述しても問題無いとは思いますが、一応、次の一文を書き込んでください。

@charset "UTF-8";

これは、「文字コード」といいます。一般的に、「UTF-8」を利用している人がほとんどだと思いますが、もしそれ以外を利用している場合は、作成サイトに応じて、変更してください。

上の画像の場合、「h2の見出し」を赤に変更しています。

投稿の編集画面と公開サイトが近いデザインになるようにします。100%を求めない方がいいですよ。結局のところ、「プレビュー」で公開時の状態を確認するわけですから。

僕は、editor-style.cssに「見出しと書体(font-family)」を設定しています。

スポンサーリンク

②functions.phpに記述

ビジュアルエディタ用スタイルシートのファイルを作ったら、次に「add_editor_style関数」という関数と使って、作成した「editor-style.css」を使えるようにします。

// ビジュアルエディタ用スタイルシートを設定
function add_editorstyle(){
  add_editor_style();
}
add_action('admin_init','add_editorstyle');

add_editor_style関数の処理を「add_editorstyle」という関数でまとめます。※「add_editorstyle」の関数名は、任意に変更可能。その場合、上記の2行目だけでなく、5行目も変更してください。

そして、作成したadd_editorstyle関数を、add_action関数を使って、「admin_init」というアクションフックのタイミングで実行できるようにします。

アクションフックとは?

アクションフックとは、プログラムが実行される「きっかけ」のこと。

上記のadmin_initの場合、ユーザーがWordPress管理画面にアクセスする際に、他のフックより先に実行されます。

スポンサーリンク
ページ先頭へ