【WordPressブロックテーマ】CSSファイルを取り入れて、もっとカスタマイズ

Memo

【WordPressブロックテーマ】CSSファイルを取り入れて、もっとカスタマイズ

質問

ブロックテーマを使い凝ったデザインを取り入れたいが、CSSファイルを直接編集することができずカスタマイズがしにくい

テーマ	ブロックテーマtwenty twenty four をベースとして作り替え
プラグイン	–

回答

基本的に、ブロックテーマの場合「theme.json」を編集することでスタイルを適用し
WordPressの編集画面でカスタマイズをする。ただ、プラグインを使わないとあまりカスタマイズはできない…。

CSSファイルを適用させるともっと自由にカスタマイズができる！

修正するファイル：function.php　バックアップを取っておいてください！！！
CSS格納場所：function.phpと同じ階層に置く

/**************************************************
CSSファイルの読み込み
**************************************************/
define('THEME_URL', esc_url(get_template_directory_uri()));

function theme_setup(){
    //ブロックエディターへ「editor.css」を読み込み
    add_theme_support( 'editor-styles' );
    add_editor_style('editor.css');
}

add_action( 'after_setup_theme', 'theme_setup');

function setup_css() {
    //フロントへ「editor.css」を読み込み
    wp_enqueue_style( 'editor', THEME_URL . '/editor.css', false, false, '');
}
add_action('wp_enqueue_scripts', 'setup_css');