WP TwentySeventeenでeditor-style.cssを使う〜ビジュアルエディタTinyMCE Advanced設定時の注意

ほとんどのWPユーザーにとって、投稿・固定ページで表示される状況と編集管理画面のビジュアルエディタの状況が一致していることが望ましいわけですが、ほとんどの場合はそうはなっておらず、昔からユーザーがテーマのStyle.cssに合わせてビジュアルエディタのCSS(editor-style.css)を調整付加して実現していたりします。

このサイトはWP TwentySeventeenテーマをベースに、使い慣れたビジュアルエディタTinyMCE Advancedをページ編集時に使っておりますが、昔ながらのやり方でeditor-style.cssを調整付加してfunction.phpにおまじないを入れての作業では旨くいきません。

何故だろうかちょっと悩みましたら、WP TwentySeventeenテーマ(バージョン 2.2)自体にeditor-style.cssが初めから収納されているのを見逃しておりました。

editor-style.cssの中身を見るとご丁寧に「TinyMCEエディタをスタイルするために使用されます」とあります。初めから収納されているとは気づきませんでした。

TinyMCE Advanced(バージョン 4.5.6)を使う前提であれば、設定管理画面の”高度なオプション”欄にある”CSS クラスメニューの作成”にチェックを入れるだけで、そのままテーマに用意してあるeditor-style.cssを編集すればOKです。(function.phpにおまじないも必要ないです)

実際には子テーマに assets>css>editor-style.cssをディレクトリ・ファイルごとコピーして、現在のテーマカスタマイズに合わせて中身を編集して使っています。

ちなみに WP5に対応する新規Twenty Nineteenテーマの場合は、新しい作法のブロックエディタ”Gutenberg”となっており、一応 TinyMCE Advancedも対応して使えるようになっていますが、ただ”Gutenberg”に慣れないヒトは、Classic Editorプラグインで昔ながらのビジュアルエディタを使うことも出来ます。