WordPressのビジュアルエディタを実際の記事の表示に合わせたい!!

Pocket

WordPressで、ブログを書き始めて半年も経ってやっと気づいたことがある。それは・・・

ビジュアルエディタと、実際の記事の見た目が違う!!

ずっと見出しすら変えなかったので、気が付かなかったのです。

実際にどうなっているかわからない。
直観的に書けない。
ストレスがたまる。

ということで、ビジュアルエディタを実際の記事の表示に合わせる方法を調べてみました。

スポンサーリンク
レクタングル(大)

作業前のビジュアルエディタ

作業前のビジュアルエディタでは、見出しや吹き出しも表示されていません。
次からの作業をすることで、表示できるようになるのでしょうか?
やってみましょう。

function.phpにeditor-style.cssを読み込ませる為のコードを記述しよう

まず親テーマのfunctions.phpの中に、ビジュアルエディタ用のCSSを読み込む宣言を記述します。

 //ビジュアルエディターとテーマ表示のスタイルを合わせる
add_editor_style();
上記のコードを functions.phpの中に記述するとWordPressのビジュアルエディタでCSSが読み込まれるようになります。

※functions.phpを編集する場合は必ずバックアップをとってください。

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

ビジュアルエディタ用のスタイルシート「editor-style.css」を用意します。

子テーマを作る

CSSをカスタマイズする時は子テーマを使いましょう。

子テーマは親テーマをいじることなくテーマのレイアウトを変更できます。

また、子テーマを制作することで親テーマがバージョンアップしても今まで変更した内容を失うことなくアップデートすることができます。

作り方は難しいことはないですが、ここでは割愛。
作っていない方は”WordPress 子テーマ”でググってください。

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

子テーマフォルダの中に実際の見た目に反映されるCSSファイル「style.css」をつくり、
スタイルシートの変更はここで行います。

同じ階層に「editor-style.css」というCSSファイルも作りましょう。

「editor-style.css」の中身を記述する

「editor-style.css」に記述する内容は、

  1. 親テーマのstyle.cssの中身
  2. 子テーマのstyle.cssの中身

この2つを「editor-style.css」にコピペして、編集していきます。

親テーマのstyle.cssのコピペ

冒頭部分は余計なので省き、スタイルについて記述されている部分を全てコピーし、
「editor-style.css」内に、ペーストします。

子テーマのstyle.cssのコピペ

子テーマについても同様に、スタイルについて記述されている部分を全てコピーし、
「editor-style.css」内の先ほどコピペした親テーマのstyle.cssの中身の後に、
ペーストします。

「editor-style.css」を編集する

「.article」という部分を削除します。
管理人はめんどくさいので、テキストエディタの置換機能を使って
「.article」を「スペース」に”すべて置き換え”してしまいました。

作業後のビジュアルエディタ

これで作業は一通り終わりました。
ビジュアルエディタは、実際の記事に近づけたのではないでしょうか。

表示が反映されないときは?

正しく作業されたのに、ビジュアルエディタの表示に反映されないときは、
ブラウザが、過去に見た時のデータを”キャッシュ”という一時ファイルとして
残してしまっているかもしれないので、キャッシュを削除しましょう。
ブラウザによってやり方は異なりますが、Google Chromeの場合は、

  1. 右上のGoogle Chromeの設定から「その他のツール」を選択。
  2. 「閲覧履歴を消去」をクリック。
  3. 表示されたボックスの上部で、期間を選択できるので、「すべて」を選択。
  4. 削除する情報の種類は、「キャッシュされた画像とファイル」にチェックをいれる。
  5. 「閲覧履歴データを消去する」ボタンをクリック。

これで、Google Chromeのキャッシュが削除できます。

今回のポイント

今回、子テーマを使って、ビジュアルエディタを実際の記事の表示に合わせていますが、
注意してほしいのが「editor-style.css」内に、
親テーマのstyle.cssと、子テーマのstyle.cssの2種類を必ずペーストするということです。

ビジュアルエディタを実際の記事の表示に合わせるやり方をググると、
子テーマのstyle.cssだけコピペするやりかたが紹介されているものもありますが、
片方だけでは次の画像のように、うまくいかない場合があります。

吹き出しの部分だけ反映されていません。
style.cssの内容によっては、表示されない部分が出てくるようです。

また、見出しの部分が表示されなくなるので、
articleクラス(.article )を外すのもポイントです。

まとめ

いかがでしたか?

スタイルシート (style.css)を変更したときは、
ビジュアルエディタのスタイルシート (editor-style.css)も同じように変更してやることで、
ビジュアルエディタでの見た目とブラウザでの見た目が同じになり
確認しやすくなると思います。

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

スポンサーリンク
レクタングル(大)
レクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする