WordPress5, 新エディタ(Gutenberg)にCSSを適用する方法

WordPressはバージョン5から、編集画面とその中身の処理が大幅に変更になりました。新エディタ（Gutenberg）の採用です。

エディタがブロック形式でコンテンツを作成することになったので、CSSの適用方法も変わりました。

GutenbergでのCSSの適用方法を分かりやすく解説します。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

GutenbergでCSSを適用する方法はかんたんです。

まずは追加するコードから。これをfunctions.phpやプラグインのルートの.phpファイルに追加します。

ブロックエディタとフロント（表示するWebページ）の両方にCSSを適用

add_action( 'enqueue_block_assets', function() {
	$file_css = 'editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );

ブロックエディタだけにCSSを適用

add_action( 'enqueue_block_editor_assets', function() {
	$file_css = 'editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );

plugins_url()は、プラグインのホームディレクトリにあるeditor.cssファイルのurlを作ります。テーマの場合は、

get_theme_file_uri( 'editor.css' )

にします。

（テーマのホームディレクトリにeditor.cssがある場合）

追加するコードはこれだけです。

'enqueue_block_assets'は、ブロックエディタ（編集画面）とフロント（公開ページ）の両方に適用します。ほとんどはこのアクションフックに処理を追加するだけでOK。

ブロックエディタだけにCSSを使いたいとき、'enqueue_block_editor_assets' を使います。

ブロックは、エディタのメニューやオプション設定もカスタマイズできるので、エディタだけ表示するコンテンツのCSSを書きます。

これまでのビジュアルエディタでは、add_editor_style(), add_theme_support()を使ってエディタ用のCSSを用意していましたが、Gutenbergでは必要ありません。

クラシックエディタを使うときは

クラシックエディタを使うとき、エディタはブロックエディタではなく、ビジュアルエディタを使うことになるので、さっきのスタイルは適用されません。

WordPress5以前の、ビジュアルエディタのスタイルを適用させます。

追加するphpファイルは、Gutenbergと同じようにfunctions.phpなどです。

WordPress5以前のエディタにスタイルを適用

// テーマのホームディレクトリにeditor-style.cssを配置すること！
add_action( 'admin_init', function() {
	add_editor_style( [ 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', 'editor-style.css' ] );
	add_theme_support( 'editor-style' );
} );

クラシックエディタとブロックエディタを両方使うときは、ふたつともコードを追加しなければなりません。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

前の投稿

WordPress, Jetpackのv11.4は致命的エラーが出るかも。次のバージョンを待とう！

WordPress5, Custom Post Type UI をgutenbergに対応する

次の投稿

WordPressの本

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

WordPressの基本。
Webサイト作成から運用まで全体的に学ぶ。
かんたんなカスタマイズを学ぶ。
何も分からないところから学ぶ。
WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

クラシックエディタを使うときは

WordPressの本

新着記事