ブロックエディタ（Gutenberg）の編集画面にeditor-style.cssを読み込ませる方法【WordPress】
以前にワードプレスの旧エディタ向けのeditor-style.cssの設置・適用方法の記事を書いたことがありました。私も毎回忘れてググっていますので、そろそろブロックエディタ（Gutenberg）向けの方法をまとめて記事にしておこうと思います。
という事で今回は、ワードプレスVer5.0以降の標準エディター、いわゆるブロックエディタを使用した編集画面に専用のCSSを読み込ませる方法です。
Classic Editorプラグインを使用して旧エディターを使用している方や、Ver4系以前のWordPressで運用している方は、以前の記事（WordPressでオリジナルのeditor-style.cssを設置・適用する方法【子テーマ対応】）を参考にしてみてください。
～ 目次 ～
ブロックエディターを使用した編集画面にCSSを読み込ませるサンプルコード
旧エディタ―では、add_editor_style関数を使用しましたが、ブロックエディターの場合は今のところ、add_editor_styleのような専用の関数は無いようです。そこで、”enqueue_block_editor_assets”というアクションフックに、CSSを適用するための関数を登録してやります。
余談ですが、記事のタイトルではeditor-style.cssと書きましたが、add_editor_style関数のデフォルトのCSS名がeditor-style.cssだっただけで、ブロックエディターの場合はファイル名は何でも構いません。
以下がサンプルコードです。特にファイル分けなどを行っていない場合は、無難にfunctions.phpに追記するのが良いでしょう。
|
1 2 3 4 5 |
/* ブロックエディターに適用するCSSを登録 */ add_action( 'enqueue_block_editor_assets', 'wt_add_block_editor_style' ); function wt_add_block_editor_style() { wp_enqueue_style( 'wt-block-editor-style', get_stylesheet_directory_uri() . '/css/editor-style.css', array( 'wp-edit-blocks' ), '1.0.0' ); } |
関数名をwt_add_block_editor_styleとしていますが、”wt”は関数名が他とかぶってしまうのを避けるために、このブログのテーマ名の略をくっつけているだけです。そのうち追加されそうな気もするんですよね。add_block_editor_styleって関数が。。
”wt”はテーマ名などに変えるとテーマ制作者風でカッコいいんじゃないかと思います（笑）wp_enqueue_style関数の第1パラメータも同様です。
特定の投稿タイプや特定のページの編集画面にだけCSSを読み込ませたい場合
ブロックエディター用CSSを追加するための基本的なコードは前節の通りですが、実際には「特定の投稿の編集画面だけ」や「特定の投稿タイプだけ」、「固定ページだけ」なんて場合が多いのではないでしょうか。
そこで次は、編集中のページによってブロックエディターのCSSを変えたり、特定のページの編集画面にだけCSSを読み込ませる場合のサンプルコードです。
一応仕組みを書いておきますと、$postの中にはページの情報が色々入っていますので、これを利用して現在の編集画面を判定します。
投稿タイプによってブロックエディター用CSSを変更する場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* 投稿タイプによって違うブロックエディター用CSSを読み込ませる */ add_action( 'enqueue_block_editor_assets', 'wt_add_block_editor_style' ); function wt_add_block_editor_style() { global $post; $post_type = $post -> post_type; if( $post_type == 'post' ){ // デフォルトの「投稿」の場合 wp_enqueue_style( 'wt-block-editor-style-post', get_stylesheet_directory_uri() . '/css/editor-style-post.css', array( 'wp-edit-blocks' ), '1.0.0' ); }elseif( $post_type == 'page' ){ // 固定ページの場合 wp_enqueue_style( 'wt-block-editor-style-page', get_stylesheet_directory_uri() . '/css/editor-style-page.css', array( 'wp-edit-blocks' ), '1.0.0' ); }elseif( $post_type == 'info' ){ // カスタム投稿タイプ「info」の場合 wp_enqueue_style( 'wt-block-editor-style-info', get_stylesheet_directory_uri() . '/css/editor-style-info.css', array( 'wp-edit-blocks' ), '1.0.0' ); } } |
わかりやすく書くために、しつこく色々なパターンを載せましたが、例えば固定ページの編集画面だけにブロックエディター用CSSを読み込ませたい場合は、以下のように書けばOKです。
固定ページの編集画面にだけCSSを読み込ませる場合
|
1 2 3 4 5 6 7 8 9 |
/* 固定ページにだけブロックエディター用CSSを読み込ませる */ add_action( 'enqueue_block_editor_assets', 'wt_add_block_editor_style' ); function wt_add_block_editor_style() { global $post; $post_type = $post -> post_type; if( $post_type == 'page' ){ wp_enqueue_style( 'wt-block-editor-style-page', get_stylesheet_directory_uri() . '/css/editor-style-page.css', array( 'wp-edit-blocks' ), '1.0.0' ); } } |
同じ要領で、「投稿だけ」や「特定のカスタム投稿タイプだけ」といった事も可能ですね。
特定の投稿／ページの編集画面にだけCSSを読み込ませる場合
あまりないかもしれませんが、次は特定の投稿／ページの編集画面にだけCSSを読み込ませる場合です。
|
1 2 3 4 5 6 7 8 9 10 |
/* 特定の投稿（固定ページ）の編集画面だけCSSを読み込ませる */ add_action( 'enqueue_block_editor_assets', 'wt_add_block_editor_style' ); function wt_add_block_editor_style() { $current_screen = get_current_screen(); $post_id = $post -> ID; if( $post_id == 2697 ){ // IDが2697の投稿（もしくは固定ページ）の編集画面 wp_enqueue_style( 'wt-block-editor-style-post', get_stylesheet_directory_uri() . '/css/editor-style-post.css', array( 'wp-edit-blocks' ), '1.0.0' ); } } |
最後に
ちょっと思ったんですが、昔は管理画面で$postって取得できなかったような気がするんですが、私の勘違いですかね。勘違いなんだろな。。
ま、それはいいとして、ちゃんと思い通りに編集画面用CSSを読み込ませられたでしょうか。ブロックエディター内は、サイト上とHTML構成が違いますので、そのままCSSをコピーしてもうまくいきません。編集画面でブラウザの開発者ツールを開いてHTML構成を確認してみると良いと思います。
以上、ブロックエディターを使用した編集画面にCSSを読み込ませる方法でした～。
[…] ばどうぞ ⇒ ブロックエディタ（Gutenberg）の編集画面にeditor-style.cssを読み込ませる方法【WordPress】 […]