WordPressの自作テーマでBootstrapを動かす方法

｜ 13745 PV ｜ 2021.08.19

favorite_border

WordPressのテーマを自作している時にBootstrapを使用したいと思うことはありますね。
一番かんたんなのはCDNで読み込む方法ですが、今回はダウンロードして読み込む方法を紹介したいと思います。

Bootstrapのダウンロード

まずは以下のBootstrapサイトにアクセスしましょう。
https://getbootstrap.com/

ダウンロードをクリックするとダウンロードページに行きますのでDownloadボタンをクリックしてください。

そしてダウンロードしたBootstrapを自作テーマフォルダの中に入れてください。フォルダの名前はbootstrapに変更しましょう。

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

PHPファイルの設定

まずこちらのコードが<head>の中にある必要があります。これはfunctions.phpを動作させるのに必要です。phpファイルの設定はこれだけで大丈夫です。

<head>
<?php wp_head(); ?>
</head>

functions.phpの設定

そしてfunctions.phpにこれを書いてみてください。ここでファイル読み込みの設定をします。

<?php 
    function themebs_enqueue_styles() {
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
        wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );
    }

    add_action( 'wp_enqueue_scripts', 'themebs_enqueue_styles');


    function themebs_enqueue_scripts() {
      wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts');
 ?>