WordPressの自作テーマでBootstrapを動かす方法
「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。
14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。
（先着限定、5月17日まで）
» 「司令塔」側に回る14日間プランを見る
WordPressのテーマを自作している時にBootstrapを使用したいと思うことはありますね。 一番かんたんなのはCDNで読み込む方法ですが、今回はダウンロードして読み込む方法を紹介したいと思います。
Bootstrapのダウンロード
まずは以下のBootstrapサイトにアクセスしましょう。 https://getbootstrap.com/
ダウンロードをクリックするとダウンロードページに行きますのでDownloadボタンをクリックしてください。
そしてダウンロードしたBootstrapを自作テーマフォルダの中に入れてください。フォルダの名前はbootstrapに変更しましょう。
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講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月17日まで