WordPressの自作テーマでBootstrapを動かす方法 | SkillhubAI(スキルハブエーアイ)

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

無料AIチューター(先生)付きレッスンを体験してみましょう。
AI先生があなたの学習をサポートします。今なら無料のWeb/AI制作7講座が受講できます。 (限定100名、8月24日まで)

» 今すぐ無料講座をチェックする

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

Bootstrapのダウンロード

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

file

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

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

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');
 ?>

まとめ

ポイントはfunctions.phpに書くコードです。 このように書くと簡単にWordPressでBootstrapが動かせるようになります。 お試しあれ。

まずは無料で7講座から始めましょう!

ハイクオリティな7講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
8月24日まで

募集 人数
100名 (残りわずか)

こちらもオススメ