Gutenbergエディターで見たまま編集に対応するカスタマイズ

最新のワードプレスにはGutenberg（グーテンベルク）と呼ばれる少し特殊なエディターが採用されています。WordPress4系まではClassic Editor（クラシックエディター）でしたが「WordPress5.0」からはグーテンベルクエディターへ変更になったのが理由です。GutenbergとClassicのエディターを見比べてみましょう。

Gutenbergエディターで見たまま編集に対応するカスタマイズ

見たまま編集の解説を行う前に「Gutenberg」エディターと「Classic」エディターの違いをご紹介いたします。そして画面を比較したあとにGutenbergエディターのカスタマイズ方法をご説明いたします。

バージョン違いによる投稿画面の違い

まずは以下の３つを比較してみましょう。

１. 最新（5系）WordPressの投稿画面
２. 最新（5系）WordPressでClassic Editorプラグインを有効化状態の投稿画面
３. 4系のWordPressの投稿画面

１. Gutenberg（グーテンベルク）エディター

以下はWordPress5.4.1での投稿画面です。

２. Classic Editor（プラグインを有効化）

以下がWordPress5.4.1でClassic Editorプラグインを有効化した際の投稿画面です。

３. Classic（クラシック）エディター

WordPress4系の最終バージョン4.9の投稿画面が以下です。

ちなみにClassicエディターの公式サポートは「2021年まで」とされています。しかし、運営者全員が最新バージョンでサイトを運用しているわけではないので「2022年以降」にクラシックエディターが使えなくなることはありません。もちろん、全員が「最新のWordPressを使える」に越したことはありませんが『導入サーバー側の問題』だったり『アップデートに応える技術者の不足』などあらゆる課題もあるのが現実です。

そのためClassicエディターはずっと維持されるはずです。また有志たちによる「classicpress.net」というプロジェクトもあるのでクラシックエディターがなくなるとは考えづらいです。

Classicエディターは「TinyMCE」と呼ばれる有名なライブラリを使っている歴史のあるエディターなのですぐく使えなくするメリットがWordPress側にもないので継続されるのは間違いありません。最新テクノロジーの世界では「技術の進歩（開発者）と実際の活用方法（利用者）」はいつもイコールではないが現実です。

Gutenbergエディターの投稿画面にCSSを読み込む方法

以下のスクリプトを適用テーマ（functions.php）に記載して、テーマフォルダ内に「editor-style.css」を同梱すればCSSを投稿画面に読み込むことが可能です。もしテーマ内に「Classicエディター用」のeditor-style.cssが存在している場合は「gutenberg-editor-style.css」などに変更して読み込ませればOK。

add_action( 'after_setup_theme', 'gutenberg_editor_css_setup_theme' );
function gutenberg_editor_css_setup_theme() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-style.css' );
}

Gutenbergエディターの投稿画面にCSSを適用する方法

上記の通りcssを読み込ませたらCSSを準備していきましょう。editor-style.css内に記述するCSSは以下のように記述すればOKです。仮にもしadd_editor_style( 'gutenberg-editor-style.css' );と変更する場合は先述した通り「gutenberg-editor-style.css」内にCSSを記述する必要がありますのでお間違いなく。

body {
	font-family: 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif;
}
.sample .test {
	font-size: 32px;
}

まとめ

WordPressの投稿画面にどんなエディターを使うかは意外と重要です。使い慣れたエディターであれば更新速度も上がりますが、操作に慣れないエディターを使っていると更新する気力も失ってしまいます。

僕たちがSEOランディングページに「見たまま編集機能」を導入している理由も『お客様に更新意欲を向上してもらってコンテンツを作りたいと少しでも思ってもらえる工夫』の１つです。現時点ではSEOランディングページの“見たまま編集”は「Classicエディター」にしか対応していませんが、将来的には「Gutenbergエディター」でもClassicエディター同様の見たまま編集機能が使えるように準備を進められればと考えています。

現時点では「Gutenbergエディター」の操作感が好みではないので、使い込む予定はありませんが、操作感により磨きがかかって『クラシックディター以上の使い心地』にまで進化すれば積極的に使っていきたいです。