WordPress でブートストラップを使用する方法 (2026): 4 メソッド, ステップバイステップ - JA

WordPress でのブートストラップのほとんどのチュートリアルでは、スタイルシートのリンクを header.php に貼り付けて、それと一緒に jQuery をロードするように指示されています。. どちらの動きも間違っています 2026. ブートストラップ 5 jQueryを依存関係として削除しました, header.php を直接編集すると、次回テーマが更新されるときに消去されます。. このガイドでは、現在の方法を示します, 更新後も動作するコードを含む.

簡単な回答: ほとんどのサイトの場合, エンキューする ブートストラップ 5.3.8 テーマのfunctions.phpのCDN経由 (10行くらい, jQueryはありません). 完全なカスタム テーマの構築? 代わりに、Understrap などのブートストラップ ベースのスターターから開始してください. ブロックエディター内にBootstrapコンポーネントが必要なだけ? Bootstrap ブロック プラグインをインストールし、コードを完全にスキップします.

最終レビュー済み: 六月 2026. ブートストラップバージョン (5.3.8) 公式ドキュメントと照合して検証されたコードサンプル.

ブートストラップが実際に行うこと (WordPress がすでに処理しているもの)

ブートストラップは無料です, オープンソース フロントエンドCSSフレームワーク. レスポンシブなグリッドを提供します, 既製のコンポーネント (ナビゲーションバー, カード, モーダル, ボタンボタン), スペースとレイアウトのためのユーティリティ クラス. 手作業でCSSをあまり書かなくても、これらすべてを実現できます. デザインとレイアウトです, それ以上何もない.

WordPress はコンテンツ管理システムです: 投稿, ページ, ユーザー, データベース, 管理者ダッシュボード. どのようなコンテンツが存在し、どこに存在するかを決定します. ブートストラップはコンテンツが画面上でどのように見えるかを決定します. 重なりません, それがまさに彼らがよく合う理由です, WordPress が Bootstrap を決してバンドルしない理由も. 自分で持ち込む必要があります.

人々が見逃しているものはここにあります: これは開発者またはデザイナーの決定です, ボタンをクリックする機能ではありません. テーマを手動でコーディングしている場合, ブートストラップで数週間を節約. ブロックをドラッグしたい場合, フレームワークはまったく必要ないかもしれません. 私たちの WordPress と Web サイトビルダーのガイド その場合は、開始点として最適です.

すぐに修正する価値のあるもう 1 つの事実. ブートストラップ 5 jQueryを削除しました. JavaScript がプレーンになりました (バニラ) JS. チュートリアルで、Bootstrap を機能させるために jQuery をロードするように指示されている場合, そのチュートリアルはブートストラップについて説明しています 4 またはそれ以上の. スキップしてください.

方法 1: function.php に CDN 経由でブートストラップを追加します (おすすめされた)

これはほぼすべての人にとって正しいデフォルトです. CDN (コンテンツ配信ネットワーク, 訪問者の近くでファイルをホストする一連のサーバー) ブートストラップを提供する, だから自分では何も保存しない. そしてそれをWordPressの方法でロードします, を通して キューに入れる. つまり、WordPress が適切な場所にファイルを印刷できるようにファイルを登録することになります。, header.php をまったく編集せずに.

これを 子テーマのfunctions.php. 子テーマは重要です: 親を編集すると、次回の更新時に変更が失われます.

関数 htg_enqueue_bootstrap() {
    wp_enqueue_style(
        「ブートストラップ」,
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
        配列(),
        「5.3.8」
    );
    wp_enqueue_script(
        「ブートストラップ」,
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
        配列(),
        「5.3.8」,
        真実
    );
}
add_action( 「wp_enqueue_scripts」, 「htg_enqueue_bootstrap」 );

このスニペットに含まれる 5 つの要素が適切な位置を占めています:

• 配列(), 配列ではありません(「jクエリ」). ブートストラップ 5 jQueryの依存関係はありません. 追加すると不要なコードが読み込まれる.
• The .バンドル.min.js ファイルにはポッパーが含まれています, ドロップダウンを配置する小さなライブラリ, ツールチップ, そしてポップオーバー. これらのコンポーネントをスキップする場合にのみ、非バンドル ファイルを使用してください。.
• 真実 最後にフッターにスクリプトをロードします, ページのレンダリングが妨げられないようにします.
• The 「5.3.8」’ バージョン文字列 後でアップグレードするときに正しくキャッシュを無効にするように WordPress に指示します.
• wp_enqueue_scripts フロントエンドフックです. 管理領域には影響しません.

ファイルを保存します, サイトをリロードする, そしてソースを見る. Bootstrap スタイルシートとスクリプトが自動的に印刷されるはずです。. JavaScriptが動作することを確認するには, Bootstrap アコーディオンまたはモーダルをページにドロップしてクリックします. アニメーション化したら, 終わりました.

CDN ルートは、ブートストラップが訪問者の近くのサーバーから到着し、多くの場合、別のサイトからブラウザにすでにキャッシュされていることも意味します。. ページ速度を優先する場合, そのエッジは理解する価値がある, そしてその方法の内訳 CDN ホスティングは読み込み時間に影響します トレードオフを分かりやすく説明します.

方法 2: ブートストラップをローカルでホストする (コントロールとプライバシーのために)

CDNは便利です, しかし、彼らはあなたの訪問者の記録を第三者に渡します’ IPアドレス. EU 内の GDPR に敏感なサイトの場合, または外部からのリクエストをゼロにしたい人, 自分でファイルをホストする方がクリーンです. 他人の稼働時間に依存することもなくなります.

手順:

• ダウンロード コンパイルされたブートストラップ 5.3.8 getbootstrap.com からのパッケージ (the “コンパイルされたCSSとJS” ダウンロード, ソースファイルではありません).
• bootstrap.min.css をテーマにドロップします。 /アセット/css/ そして bootstrap.bundle.min.js を /アセット/js/.
• get_template_directory_uri を使用して、上記のスニペット内の 2 つの CDN URL をローカル パスに変更します。(), たとえば、get_template_directory_uri() . 「/assets/css/bootstrap.min.css」. get_stylesheet_directory_uri を使用する() ファイルが子テーマ内に存在する場合は代わりに.

他はすべて同じままです. 失われるのは共有キャッシュのメリットだけです. あなたが得るものは完全な所有権です: CDN が悪い日でもレイアウトが崩れることはありません, 訪問者のデータをオフサイトに漏らすものは何もありません.

方法 3: Bootstrap スターター テーマから開始する

メソッド 1 と 2 既存のテーマにブートストラップをボルトで固定する. テーマを最初から作成する場合, 何もボルトを締めないでください. Bootstrap を WordPress のテンプレート構造にすでに接続しているベースから開始します.

アンダーストラップ 長期にわたる選択です. 古典的なアンダースコアスターターを溶接します。 (WordPress 開発者が長年使用してきた最低限のテーマ) ブートストラップへ, Sass がすでに構成されているため、カスタム ビルドを再コンパイルできます. WP ブートストラップ スターター 軽いほうです, 最初のカスタムテーマのためのよりフレンドリーなオプション. セージ by ルーツは最先端に位置します: Blade テンプレートと最新のビルド パイプラインを使用します, フレームワークに依存しない, それでブートストラップを実行したり、交換したりできます.

報酬は本物です. スターターテーマにより、実用的なナビゲーションバーが提供されます, コメントテンプレート, ページネーション, Bootstrap のマークアップをすでに話す WooCommerce フック. 面倒な配管作業を省略して、デザインを自分のものにする部分だけを書きます。. コストは学習曲線です: Sass に慣れる必要があります, 端末, アセットの再コンパイル.

正直な注意点が 1 つあります. スターターにコミットする前に, GitHub で最終更新日を確認してください. 2 年間リリースを出荷していないスターターは依然として Bootstrap をターゲットにする可能性があります 4 とその jQuery の習慣. そうなると、あなたはこのガイドがあなたを抜け出そうとしている時代遅れのキャンプに逆戻りしてしまいます。.

方法 4: ブートストラップ ブロック プラグインを使用する (コードなし)

開発者ではありません? 標準の WordPress ブロック エディター内で Bootstrap のグリッドとコンポーネントを入手できます。. などのプラグイン ブロック エディターのブートストラップ ブロック ブートストラップを利用した行を追加する, 列, ボタンボタン, ネイティブブロックとしてのコンテナー. ブロックをドラッグしてレスポンシブ レイアウトを構築します, そしてプラグインは舞台裏でブートストラップをキューに入れます.

これは、Bootstrap の外観は気に入っているが、functions.php を開きたくないコンテンツ編集者や中小企業経営者のためのパスです。. これは、ブロックエディターで自然に動作する唯一の方法でもあります, 他の 3 つはテンプレートを手動でスタイル設定していることを前提としているため、.

天井については現実的に考えてください, けれど. ブロックプラグインはBootstrapのコンポーネントを提供します, 開発者がメソッドから得られる完全なフレームワークの自由ではありません 1 を通して 3. 目標がピクセル単位で正確なカスタム デザインの場合, あなたはそれを超えるでしょう. ただきれいにしたいだけなら, コードのないレスポンシブセクション, それは仕事をします. そしてもし “コードがありません” 本当にあなたが求めているのは, それを天秤にかけます AI WordPress ビルダー. そのルートは、Bootstrap クラスを学習するよりも早く、完成したレイアウトに到達する可能性があります。.

ブートストラップ マークアップを作成します: グリッドの実践

Bootstrap のロードが仕事の半分です. 残りの半分はそのクラスをページに書き込みます, そしてほとんどのチュートリアルは表示される前に停止します. メソッドを使用した場合 1 を通して 3, テーマのテンプレート ファイル内、または任意のページまたは投稿のカスタム HTML ブロック内にマークアップを追加します。. (方法 4 のプラグインがマークアップを構築します, したがって、この部分はスキップできます。)

ブートストラップは 12-柱グリッド. 3 つのネストされたクラスがそれを駆動します: 外側のラッパーの .container, その中の .row, 各列の .col 要素. これはスマートフォンに重ねて分割するレイアウトです。 8 と 4 タブレット以降のコラム:

<div class ="容器">
  <div class ="行">
    <div class ="コル-MD-8">主な内容</div>
    <div class ="コル-MD-4">サイドバー</div>
  </div>
</div>

The コルMD- 接頭辞 応答トリガーです. 中ブレークポイントより下 (768px), 両方の列が全幅になってスタックされます. 768px以上の場合, 彼らは並んで座ります. mdをsmに交換, LG, または xl でスイッチが発生する場所に移動します. クラス名を 1 行入力するだけで、手書きで作成するメディア クエリが置き換えられます。.

コンポーネントは同じように動作します. カードのマークアップをコピーする, ナビゲーションバー, またはBootstrapのドキュメントから直接モーダルを取得します, テンプレートに貼り付けます, キューに追加したスタイルはすぐに適用されます. コンポーネントごとに追加のセットアップは不要.

誰も警告しない紛争

WordPress 内のブートストラップ プロジェクトのほとんどが横道に逸れるのはここです. アクティブなテーマにはすでに独自の CSS があります. Bootstrap が上にロードされるとき, 2 つは同じクラス名と基本スタイルをめぐって争います. ボタンが外れて見える. 間隔をあけて区切る. 昨日は大丈夫だったレイアウトが崩れる.

ほぼすべての原因は 3 回の衝突です:

• .container クラス. 多くのテーマは、異なる最大幅を持つ独自の .container を定義します。. ブートストラップはそれを再定義します, そして最後にロードしたものが勝ちます. 結果としてレイアウトが飛び回る.
• ベースリセット. Bootstrap の Reboot は、ボディなどの生の要素のスタイルを変更します, 見出し, とリスト. テーマのタイポグラフィを静かに上書きする可能性があります.
• ダブルグリッド. テーマですでにグリッドを使用している場合 (フレックスボックスまたはCSSグリッド), Bootstrap のグリッドは上に積み重ねられます, 要素は 2 つの競合するシステムにネストされてしまいます。.

クリーンな修正が 2 つあります. 1つ目は、 スコープブートストラップ: スタイルを設定したいセクションを親クラスでラップします (一般的なパターンでは、bootstrap-iso という名前が付けられます). 次に、ブートストラップをコンパイルして、そのルールがそのラッパー内にのみ適用されるようにします。. テーマの残りの部分に触れなくなります. 2回目の修正, 多くの場合、賢いほうが, することです カスタムブートストラップバンドルを構築する. 使用する部分のみをインポートします, グリッドといくつかのコンポーネント, 再起動は省略します. CSSの削減, 衝突の減少, より速いページ. これがスターターテーマの理由でもあります (方法 3) 最初から問題を回避する: ブートストラップを中心に構築されています, だから何も衝突しない.

どの方法を選択すべきか?

実際に構築しているものにメソッドを一致させる. よくある3つのケース:

• サードパーティのテーマで完成したサイトを運営しており、いくつかのブートストラップ コンポーネントが必要な場合. 使用方法 1 (CDNエンキュー) 子テーマ内で. スターターテーマに手を伸ばさないでください; サイト全体を再構築してモーダルを追加するのはやりすぎです. 競合が発生した場合, 上記のスコープのブートストラップ.
• あなたはカスタムテーマをゼロから構築する開発者です. 使用方法 3 (アンダーストラップまたはセージ). Bootstrap を空白の _s テーマに手動でエンキューすると、Understrap がすでに提供しているものを再作成するだけです, テスト済みの WooCommerce および navbar テンプレートを除く.
• あなたはコードを使わずにレスポンシブなレイアウトを必要としているコンテンツ編集者またはストアオーナーです. 使用方法 4 (ブロックプラグイン). Functions.php の編集は、ユースケースにとってリスクを負う価値はありません. お店を経営しているなら, ジョブに合わせて調整されたホスティングと組み合わせる. 私たちのメモ WordPress eコマースホスティング Bootstrap フロントエンドが依然として高速バックエンドを必要とする理由を説明する.

プライバシーまたはコンプライアンスの要件は 3 つすべてに優先します. 訪問者データを外部 CDN に送信できない場合, 選択した方法を方法 2 のローカル ホスティングに切り替えます。.

よくある質問

Bootstrap を使用するには jQuery が必要ですか? 5 WordPressで?

いいえ. ブートストラップ 5 jQuery を削除し、バニラ JavaScript で実行します. スクリプトをキューに入れるとき, 依存関係配列を空のままにしておきます (配列()), 配列ではありません(「jクエリ」). jQuery を追加すると、Bootstrap コンポーネントが決して呼び出さない追加のコードが読み込まれます. ブートストラップのみ 4 そして以前にそれが必要でした.

Bootstrap は WordPress に適していますか? 2026?

はい, テーマをコーディングしている場合、または一貫した応答性の高いコンポーネントが必要な場合. Bootstrap のグリッドとユーティリティは開発時間を短縮し、追加の修正を加えることなく最新のすべてのブラウザで動作します. ブロックエディターやページビルダーを使用して構築する場合はあまり役に立ちません, これらのツールはすでにレスポンシブレイアウトを処理しているため、. 実際の働き方に合わせて調整する.

Bootstrap を追加すると WordPress サイトの速度が遅くなりますか?

できる, 2 つのコンポーネントのフレームワーク全体をロードする場合. 完全に縮小された CSS と JS により実際の重みが追加されます. CDN からのロード, スクリプトをフッターまで延期する, 使用するパーツのみを含むカスタム バンドルを構築すると、影響は小さく抑えられます。. 必要な場合にのみ Bootstrap をロードすることもできます: is_page のような条件でエンキューをラップする() したがって、すべての URL に配信されるわけではありません. 完全な Bootstrap の上に積み上げられた肥大化したテーマが実際の速度の問題になります, 単独ではブートストラップではありません.

WordPress ブロックエディターでブートストラップを使用できますか??

はい, Block Editor Bootstrap Blocks などのプラグイン経由, これはブートストラップ行を追加します, 列, ネイティブ ブロックとしてのボタン. 手動によるブートストラップのキューイング (方法 1) エディター内でコンポーネントを公開しません, そのため、カスタム HTML ブロックにクラス名を手動で記述することになります。. エディターファーストのワークフローの場合, プラグインルートが実用的です.

Bootstrap CDN を使用するか、ファイルをローカルでホストする必要がありますか?

利便性と共有ブラウザー キャッシュを試すために CDN を使用します。. GDPR またはプライバシー要件がある場合はローカルでホストする, 外部リクエストをゼロにしたい, または、別のネットワークの稼働時間に依存したくない. コードはほぼ同じです; CDN URL を get_template_directory_uri と交換するだけです() テーマ内のファイルへのパス.

メソッドを正しく理解する, コードだけではない

2018 年時代のチュートリアルに従うのをやめれば、Bootstrap と WordPress はきれいに連携します. エンキューバージョン 5.3.8 子テーマで, jQueryの依存関係を削除する, テーマに反しないようにスタイルの範囲を設定します. これは実際のプロジェクトの大部分をカバーします. スターター テーマは、最初から構築する場合にのみ選択してください, コードから離れている場合にのみプラグインをブロックします.

これが大規模なビルドの一部である場合, いくつかの関連ガイドではさらに詳しく説明されています. 比較 米国でのマネージド WordPress ホスティング カスタムテーマを実行する場所については. そして、Web サイトビルダーと WordPress についての見解で、そもそもコーディングが必要かどうかを再確認してください。. フレームワークは、スタックの残りの部分が機能する場合にのみ効果を発揮します。, ホスティングを含む, それに追いつくことができる.