A3 Code Note

11/18/2022

#8 Theme Development | get_template_part

Bootstrapを WordPress Themeに入れる

https://getbootstrap.com/docs/4.5/getting-started/download/
上記アドレス一番上にある「Compiled CSS and JS」の下の download ボタンをクリック
ディレクトリを以下のように作成
テーマディレクトリ/assets/src/library
このlibraryの中にダウンロードしたcss, jsをフォルダごと入れます。

function.php

function note_enqueue_scripts() {

    // Register Styles.
    wp_register_style( 'style-css', get_stylesheet_uri(), [], filemtime( get_template_directory() . '/style.css'), 'all' );
    wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/assets/src/library/css/bootstrap.min.css', [], false, 'all' );

    // Register Scropts.
    wp_register_script( 'main-js', get_template_directory_uri() . '/assets/main.js', [], filemtime( get_template_directory() . '/assets/main.js' ));
    wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/assets/src/library/js/bootstrap.min.js', [ 'jquery' ], false);

    // Enqueue Styles
    wp_enqueue_style( 'style-css' );
    wp_enqueue_style( 'bootstrap-css' );

    // Enqueue Scripts
    wp_enqueue_script( 'main-js' );
    wp_enqueue_script( 'bootstrap-js' );

}

add_action( 'wp_enqueue_scripts', 'note_enqueue_scripts' );

この[]内に書き込んだ内容は、どの内容に依存しているかというとことをかきます。