先生と生徒の会話形式で理解しよう

生徒

「WordPressで自作テーマを作っているのですが、Bootstrapを使ってデザインを整えたいです。」

先生

「BootstrapはWebデザインを簡単にきれいに整えるための便利な道具ですよ。WordPressテーマでも使えます。」

生徒

「どうやってWordPressテーマにBootstrapを組み込むんですか？安全に使う方法を知りたいです！」

先生

「それでは、初心者でも分かるように、WordPressでのBootstrapの安全な組み込み方法を一緒に見ていきましょう。」

1. WordPressテーマにBootstrapを入れるってどういうこと？

WordPress（ワードプレス）はホームページを作るための人気のソフトで、「テーマ」はその見た目を決めるテンプレートのようなものです。

Bootstrap（ブートストラップ）は、デザインを簡単に整えるためのツールセットです。

これをWordPressのテーマに「組み込む」とは、テーマにBootstrapのCSSやJavaScriptを正しく読み込んで、使えるようにするということです。

2. Bootstrapの読み込み方法にはCDNとローカルの2つがある

Bootstrapを読み込む方法は2種類あります。

CDN（シーディーエヌ）を使う：インターネット上のBootstrapのファイルを使う方法です。
ローカルに置く：自分のパソコンやサーバーにBootstrapのファイルを保存して読み込む方法です。

今回は、CDNを使う方法で初心者向けに説明します。

3. WordPressで安全にCSSやJSを読み込むにはfunctions.phpに書く

WordPressには、ファイルを安全に読み込むための「決まり」があります。header.phpに直接 link や script を書いてはいけません。

正しくは、「functions.php」というテーマファイルに、専用のコードを書くのがルールです。

4. functions.phpにBootstrapの読み込みコードを追加する

次のようなコードをfunctions.phpに追加します。


function mytheme_enqueue_scripts() {
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

このコードで、BootstrapのCSSとJS（動きを担当するファイル）が安全に読み込まれます。

5. 読み込みの順番や依存関係ってなに？

依存関係（いぞんかんけい）とは、「これが必要だから先に読み込んでね」という順番のルールです。

たとえば、BootstrapのJSファイルは、JavaScriptのライブラリ「jQuery（ジェイクエリ）」が必要な場合もあります。そういうときに、array('jquery')と書いて先に読み込ませます。

6. テーマのHTMLでBootstrapのクラスを使ってみよう

Bootstrapを読み込んだら、テーマ内のHTMLでクラスを使うだけでデザインが整います。以下はボタンの例です。


<button class="btn btn-primary">クリックしてね</button>

ブラウザ表示

btnはボタンの基本スタイル、btn-primaryは青いボタンにするためのクラスです。

7. CSSファイルが効かないときの確認ポイント

たまにBootstrapのデザインが表示されないことがあります。そんなときは次のポイントをチェックしましょう。

functions.phpのコードが正しいか
ブラウザのキャッシュをクリアしてみる（Shift + 更新ボタン）
別のテーマを使っていて、上書きされていないか
読み込みURLが正しいCDNか

読み込みが正しくできていれば、ボタンや見出しがBootstrapのスタイルに変わっているはずです。

8. 自作テーマでも簡単にBootstrapを使える

WordPressで自作テーマを作っている方でも、上記のようにfunctions.phpにコードを追加すれば、Bootstrapがすぐに使えます。

デザインの自由度が一気に上がりますし、モバイル対応もBootstrapが自動でやってくれます。

9. Bootstrap 5の主な特徴をおさらいしよう

ここでBootstrap 5のポイントをおさらいしましょう。

レスポンシブ（スマホでもきれいに見える）
たくさんのクラスを使って簡単にデザインできる
jQueryが不要になった（必要な場合もあり）
公式のCDNを使えばすぐに使える

10. 実際にページにBootstrapのクラスを使ってみる例

最後に、実際にテーマファイルの中で使える見本を紹介します。


<div class="container mt-4">
    <h1 class="text-center text-primary">ようこそ！</h1>
    <p class="lead">これはBootstrapを使ったWordPressテーマのページです。</p>
</div>