ブロックエディタのスタイル(CSS)カスタマイズ手順 – Snow Monkeyの場合-

  • ブックマーク

WordPressの有料テーマ Snow Monkey を使っている。ブロックエディタのスタイル(CSS)を変更したいとき、管理画面の外観 > カスタマイズ > 追加CSS に、CSSを追記しても反映されない。

ブロックエディタにCSSを追加するには、ちょっぴり工夫が必要になる。

Snow Monkeyの場合、カスタマイズは、プラグイン My SnowMonkey を使うことが推奨されており、このプラグインのディレクトリに、FTPで、editor.css を作成する。

wp-content
 ├ plugins/
    └ my-snow-monkey/
       ├ my-snow-monkey.php
       └ editor.css

この、editor.css に、ブロックエディタ に追加したいスタイルを記入する。

次に、My SnowMonkey ディレクトリにある my-snow-monkey.php に以下のコードを追加する。

これで、ブロックエディタ へ、スタイルシート(CSS)を適応できる。

//=============================================
/* ブロックエディタ CSS 適応 */
add_action( 'enqueue_block_editor_assets', function() {
	$file_css = 'editor.css';
	$date_css = date('YmdGis', filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ),  $date_css );
} );

なお、このコードには、ちょっと仕掛けがしてある。CSSファイルは、ブラウザでキャッシュされるため、変更しても変更が反映されないことが多い。

editor.css の更新日時を取得して、CSSファイルの後ろに、?=ver202002141215 のようにクエリパラメータが自動で追記される。更新すると、このパラメーターが変わるので、キャッシュに悩まなくて済む。

参考にした記事は、こちら。感謝。

  • ブックマーク

この記事を書いた人

ブログコーチ 大東 信仁

情報発信コンサルタント & カウンセラー / 博士課程中退 / ニックネーム : ものくろ / ブロガー / WordPressが得意 / 株式会社 あみだす 代表取締役