2026年6月1日

WordPressでBootstrapを使う方法

テーマ・デザイン

はじめに

Bootstrapは、モバイルファーストのウェブ開発を容易にするフレームワークとして広く使用されています。WordPressと組み合わせることで、レスポンシブなデザインやインタラクティブな要素を簡単に実装することができます。

この記事では、Bootstrapを使用したWordPressテーマのカスタマイズ方法について詳しく紹介します。

症状・背景

このテーマが必要になる主な場面:

サイトがモバイルデバイスで表示されない
ユーザーインターフェースを統一したい
標準のWordPressテーマのデザインに満足していない
アクセシビリティを改善したい

手順・設定方法

ステップ1: Bootstrap CDNを使用する

# WordPressテーマのhead.phpファイルを開く
nano themes/your-theme/header.php

# BootstrapのCSSとJavaScriptをCDNから読み込む
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

# ファイルを保存して閉じる
CTRL+X

ステップ2: WordPressテーマにBootstrapのCSSとJavaScriptを追加する

# Bootstrapをnpmでインストールする
npm install bootstrap

# webpack.config.jsファイルを開き、BootstrapのCSSとJSをビルドプロセスに追加
nano themes/your-theme/webpack.config.js

# BootstrapのCSSとJSをバンドル設定に追加
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    include: path.resolve(__dirname, '../node_modules/bootstrap/dist/css'),
},
{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
    },
},
{
    test: /\.js$/,
    include: path.resolve(__dirname, '../node_modules/bootstrap/js/'),
    use: ['babel-loader'],
},

# ファイルを保存して閉じる
CTRL+X

# BootstrapのCSSとJSをwebpackから読み込む
nano themes/your-theme/index.js

// Bootstrap CSSをインポート
import 'bootstrap/dist/css/bootstrap.min.css';
// Bootstrap JSをインポート
import * as bootstrap from 'bootstrap';

# ファイルを保存して閉じる
CTRL+X

ステップ3: WordPressテーマにBootstrapのクラスを追加する

# HTML要素に対して、必要なBootstrapクラスを指定する
nano themes/your-theme/single.php

<h1 class="display-4">記事タイトル</h1>
<p class="lead">これは説明文です。</p>

<article class="card mb-3">
    <div class="card-body">
        <!-- 記事本文 -->
    </div>
</article>

# ファイルを保存して閉じる
CTRL+X

# WordPressのショートコードにBootstrapクラスを追加する
nano themes/your-theme/functions.php

add_shortcode('bootstrap_button', function($atts) {
    return '<button class="btn btn-primary" type="button">ボタン</button>';
});

# ファイルを保存して閉じる
CTRL+X

ステップ4: Bootstrapの機能をカスタマイズする

# Bootstrapのデフォルト設定をオーバーライドするCSSを作成
nano themes/your-theme/assets/css/custom-bootstrap.css

.card {
    border-color: #ff0000;
}

.btn-primary {
    background-color: #00ff00;
}

# ファイルを保存して閉じる
CTRL+X

注意事項

CDNから読み込む場合、ネットワークの不安定さに影響を受ける可能性がある。
カスタムCSSやJavaScriptを使用する場合は、Bootstrapと競合しないように注意が必要。
BootstrapとWordPressテーマの互換性を確認し、必要であればカスタマイズを行う。

まとめ

1. Bootstrap CDNの使用: WordPressテーマで直接BootstrapのCSSとJSを読み込む方法。

2. npmとwebpackの利用: ローカル環境でBootstrapを使用するためのセットアップ方法。

3. クラスの追加: BootstrapのコンポーネントをWordPressテーマに統合する方法。

4. カスタマイズ: Bootstrapの既存スタイルをオーバーライドして、独自のデザインを作成する方法。

Post Views: 34