Blog スタッフブログ

WEB制作

[WordPress]Gutenbergで独自ファイルを読み込む

編集ページでCSSやJavascriptを読み込ませる方法をご紹介します。
見た目を整えたりする際に活用します。

こちらのコードをテーマフォルダ内のfunction.phpに追加します。

add_action( 'enqueue_block_editor_assets', 'gutenberg_custom_file' );
function gutenberg_custom_file() {

  //cssを読み込む
  wp_enqueue_style( 'theme-gutenberg-style', get_theme_file_uri('/css/gutenberg.css'), array(), 'all');

  //jsを読み込む
  // wp_enqueue_script( 'theme-gutenberg-js', get_theme_file_uri('/js/gutenberg.js'), array( 'jquery' ), false, true );

}