WordPressのGutenbergエディターにCSSを適用させるカスタマイズ方法

Gutenberg

WordPress5.0に向けて、Gutenbergの案内がダッシュボードに出るようになりました。

今日から新しいエディターを試しましょう。

僕も試験的にGutenbergを試してみたのですが、ビジュアルエディターを見やすくするために書いていたCSSが全く適用されない状態に。

Gutenbergにスタイルが適用されない

これを改善すべく、いろいろ調べたら方法が見つかったので紹介です。

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

Gutenbergでは以前のCSSが反映されない

これまでビジュアルエディターでは基本的に、functions.phpに「add_editor_style();」と書いて、テーマフォルダ直下のeditor-style.cssに対して、以下のように書けば

以下のように反映されていました。

editor-style.cssでビジュアルエディターのスタイル変更

詳細はこちら。

Wordpressの記事を作成するとき、投稿画面のビジュアルエディターを用いている方も多いかと思います。 ビジュアルエディター...

けれどGutenbergでは、全くスタイルが反映されなくなってしまいました。

Gutenbergではeditor-style.cssスタイルが適用されない

これを解決する方法を以下に書いておこうと思います。

GutenbergエディターにCSSを適用させる方法

主な手順はこちら。

  • functions.phpのソースコードを書く
  • テーマフォルダ直下にeditor-style.cssを作成しスタイルを書く

functions.phpのソースコードを書く

まずはテーマ(子テーマ)のfunctions.phpに以下のコードを貼り付けます。

get_theme_file_uri関数を利用しているので、親テーマが適用されている場合は親テーマフォルダ内のeditor-style.css、子テーマが適用されている場合は子テーマフォルダ内のeditor-style.cssが読み込まれます。

コメントアウトしてある部分は、JavaScriptファイルを読み込む場合の例です。

Gutenbergになってから、通常ページのようにCSSやJavaScriptを読み込めるようになりました。

なので、リソースファイルの読み込みという点において、カスタマイズの自由度は以前より、上がったように思います。

ただ、まだまだ不便な部分ももちろんあります。

参考 Theme Support – The new Gutenberg editing experience – WordPress

テーマフォルダ直下にeditor-style.cssを作成しスタイルを書く

次に適用しているテーマ(子テーマ)直下にeditor-style.cssファイルを作成します(ある場合はそれを利用)。

そして、editor-style.cssに以下のように書き込みます。

書き込むスタイルは環境に合わせて変更してください。

動作確認

これで、Gutenbergエディターを開くと、以下のようにスタイルが適用されています。

Gutenbergにスタイルを適用

あとは必要なCSSを、動作を見ながら付け加えていけばOKです。

まとめ

最初、Gutenbergエディターは従来のビジュアルエディターと全く動作が変わってしまうものと思っていました。

もちろん、一部動作が変わってしまった部分はあります。

けれど、ソースコードをよく見てみると、結局のところ従来のビジュアルエディターを根本として、見た目をCSSで変更して現在の「Gutenbergスタイル」になっているようです。

ですので、ビジュアルエディター用に設定したカスタムスタイルや、ツールバーのボタンなどはそのまま利用できます。

なので、テーマを制作・公開している側としては、「思っていた以上に以前の設定が使えた」ということで一安心しています。

もちろん、変更点も多々あるので、修正すべき点は修正しなければいけないんですけど。


ところで、「Gutenbergってなんだ?」と思って調べてみたら、活版印刷技術の発明者からきているんですね。

ヨハネス・グーテンベルク