WordPressで投稿編集画面をビジュアルエディタにする

ワードプレスのテーマtwentytwentyを基盤に、WordPressの投稿編集画面をビジュアルエディタで編集できるようにする実装を行ったので、備忘録的にこの記事を残す。

環境情報

PHP：version 7.3.12
WordPress：version 5.5.3
WPテーマ：twentytwenty

作業

htmlの知識があまりない人なら、意味不明なコードが書いてあるテキストエディタよりビジュアルエディタの方を使いたいですよね。

ビジュアルエディタで編集すると、WordPressの仕様でpタグやspanタグが自動挿入されますが、静的コーディングの段階でその想定をしていないと大幅に崩れてしまうことがあります。

以下の点に注意してコーディングしましょう。

・記事コンテンツエリア内の要素にはクラスなしでデザインがあたるようにする。
・要素がどんな順番で置かれても余白が不自然にならないようにする。

また、ビジュアルエディタで記事を作成・編集するときに実際のウェブ上のデザインが当たっているようにするととても分かりやすいのでおすすめです。

ビジュアルエディタを実際のサイト上のデザインに近づけるための方法をご紹介いたします。
editor_style.css（エディタ用CSS）に、サイト用のCSSをインポートする方法です。
WP構築時に、サイトのスタイルを記述しているCSSファイルに、ビジュアルエディタ上に適用させるためのクラス「.wp-editor」も追加します。

style.css

.news-block article h2,//実際のサイト用のクラス
.wp-editor h2 {//管理画面用のクラス
  border-bottom: 4px solid #eaaeb1;
  position: relative;
  padding-bottom: 10px;
  font-size: 24px;
  margin: 60px 0 20px;
}
.news-block article h2,//実際のサイト用のクラス
.wp-editor h2:after {//管理画面用のクラス
  position: absolute;
  content: "";
  display: block;
  border-bottom: 4px solid #ca353b;
  bottom: -4px;
  width: 33%;
}

このように管理画面にもCSSが当たるようにクラスを追記したら、そのCSSファイル（以下の例の場合style.css）をeditor_style.cssでインポートします。

editor_style.css

//editor_style.cssに記述
@import url("style.css");

最後にそのeditor_style.cssをfunctions.phpで読み込みます。

functions.php

// editor_style.css読み込み
function add_editor_style_cb() {
  add_editor_style();
}
add_action('admin_init', 'add_editor_style_cb');

これでビジュアルエディタにも共通のスタイルが適用されるようになります。

プレビューを見なくてもビジュアルエディタ上でデザインが確認できるので便利ですね。