WordPress を Bootstrap でカスタマイズする
WordPress に Bootstrap を導入することで、デザインの柔軟性と開発効率を向上させる方法を解説します。
1. WordPress を Bootstrap 化するメリット
Bootstrap は、**レスポンシブデザイン** に優れた CSS & JavaScript フレームワークであり、WordPress のカスタマイズにも最適です。
以下のようなメリットがあります。
- ✅ レスポンシブデザイン: どのデバイスでも最適な表示が可能
- ✅ 開発速度の向上: 豊富な UI コンポーネントが利用可能
- ✅ カスタマイズが容易: シンプルなクラスでデザインを統一
- ✅ 拡張性が高い: JavaScript コンポーネントを追加しやすい
ポイント: Bootstrap を適用することで、CSS を書かずに簡単にスタイルを統一できます。
2. WordPress に Bootstrap を導入する方法
① Bootstrap CSS を WordPress に追加
WordPress の functions.php に以下を追加します。
function add_bootstrap_css() {
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'add_bootstrap_css');
② Bootstrap JavaScript を追加
WordPress の functions.php に以下を追加します。
function add_bootstrap_js() {
wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_bootstrap_js');
注意: jQuery に依存しないバージョン
bootstrap.bundle.min.js を使用しています。
3. WordPress テーマに Bootstrap を適用する
① header.php の編集
ナビゲーションバーを Bootstrap 仕様に変更します。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo home_url(); ?>">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'navbar-nav')); ?>
</div>
</div>
</nav>
② footer.php に Bootstrap を適用
フッター部分を整えます。
<footer class="bg-dark text-white text-center py-3">
© 2025 My Website. All rights reserved.
</footer>
補足: Bootstrap を使用することで、ナビゲーションやボタンのデザインを簡単に統一できます。
まとめ
WordPress を Bootstrap 化することで、以下のメリットが得られます。
- 🔹 レスポンシブデザインの実現 (スマホ・PC両対応)
- 🔹 シンプルなコードで UI を統一 (デザイン崩れを防ぐ)
- 🔹 開発スピードの向上 (カスタマイズが容易)
WordPress のカスタマイズをスムーズに進めたい方は、ぜひ Bootstrap を活用してみてください！