ブロックエディタ(Gutenberg/グーテンベルグ)はWordpress5.0から標準のエディタとして使用されているエディタです。文章や画像などブロック単位でコンテンツの作成・変更が簡単に出来るようになっています。
当初はWordpress5.0以前までのエディタ(クラシックエディタ)の方が使いやすい・慣れているという事で避けられていましたが、ここ数年で使用される事もかなり増えてきました。
ブロックエディタはそのまま使用してもいいですが、オリジナルテーマ(デザイン)のサイトの場合は、そのままだとブロックエディタの編集画面の内容と、実際にフロント画面に表示される内容とデザインが違ってしまうため分かり難くなってしまいます。そのため、フロント画面の表示に合わせるためのCSSやJSファイルを読み込ませる必要が出てきます。
今回は、ブロックエディタの編集画面に独自のCSSやJSファイルを読み込ませる方法を解説していきます。
※今回の変更にはfunctions.phpを使用します。functions.phpを変更する場合は、記述を間違ってしまうと画面が白くなり何も表示されなかったり、エラーが出てしまう場合がありますのでバックアップを必ず取るようにしてください。
CSSファイルを読み込ませる方法
ブロックエディタの編集画面に独自のCSSファイルを読み込ませるには、functions.phpに以下のように記述します。
function custom_enqueue_block_editor_assets(){
wp_enqueue_style('editor-styles', get_stylesheet_directory_uri() . '/css/editor_style.css');
}
add_action('enqueue_block_editor_assets','custom_enqueue_block_editor_assets');enqueue_block_editor_assetsというアクションフックに、CSSファイルを読み込ませるための関数wp_enqueue_style()でCSSファイルを指定しています。
get_stylesheet_directory_uri()でテーマファイルのディレクトリを参照し、続いてテーマファイル内でのCSSファイルの場所を記述します。
「custom_enqueue_block_editor_assets」という関数名は変更してかまいませんが、分かりやすい関数名にしておいた方がいいかと思います。
JSファイルを読み込ませる方法
続いて、ブロックエディタの編集画面に独自のJSファイルを読み込ませるには、functions.phpに以下のように記述します。
function custom_enqueue_block_editor_assets(){
wp_enqueue_script('block-custom', get_stylesheet_directory_uri() . '/js/block_script.js',array(), "", true);
}
add_action('enqueue_block_editor_assets','custom_enqueue_block_editor_assets');CSSの場合と同じように、enqueue_block_editor_assetsというアクションフックに、スクリプトファイルを読み込ませるための関数wp_enqueue_script()でJSファイルを指定しています。
get_stylesheet_directory_uri()でテーマファイルのディレクトリを参照し、続いてテーマファイル内でのJSファイルの場所を記述します。
wp_enqueue_script()関数の場合、引数が第5引数まであります。
詳しい解説はここではしませんが、最後の「true」は</body>タグ直前に読み込ませるためのものです。「false」を指定すると<head>タグ内に読み込まれるようになります。
また、先程と同じく「custom_enqueue_block_editor_assets」という関数名は変更してかまいませんが、分かりやすい関数名にしておいた方がいいかと思います。
CSS・JSファイルの両方を読み込ませた例
ブロックエディタの編集画面に独自のCSSファイルとJSファイルを同時に読み込ませるには、functions.phpに先程と同じアクションフック(enqueue_block_editor_assets)でwp_enqueue_style()関数とwp_enqueue_script()関数の両方を読み込ませます。
function custom_enqueue_block_editor_assets(){
wp_enqueue_style('editor-styles', get_stylesheet_directory_uri() . '/css/editor_style.css');
wp_enqueue_script('block-custom', get_stylesheet_directory_uri() . '/js/block_script.js',array(), "", true);
}
add_action('enqueue_block_editor_assets','custom_enqueue_block_editor_assets');さいごに
いかがでしたでしょうか。
今回は、ブロックエディタ(Gutenberg/グーテンベルグ)の編集画面に独自のCSSやJSファイルを読み込ませる方法を解説しました。
オリジナルテーマやデザインのサイトの場合は、必須ともいえる内容ですので、しっかりと覚えておいてください。
