WordPressでBootstrapを使う方法【テーマによる違いと注意点】

こんにちは、今回はWordPressサイトでBootstrapを使う方法について解説します。ポイントも含めて、テーマによる違いや注意点もお伝えします。

1. Bootstrapとは？

Bootstrapは人気のあるフロントエンドフレームワークで、レスポンシブ対応のデザインや便利なUIコンポーネントが簡単に使えます。Web制作でよく利用されています。

2. Bootstrapのダウンロードと設置

公式サイト（https://getbootstrap.com/）から必要なバージョンをダウンロードします。ダウンロードするとCSSファイル（例：bootstrap.min.css）やJavaScriptファイル（bootstrap.min.js）が入っています。

これらのファイルを自分のWordPressテーマのフォルダ内（例：wp-content/themes/your-theme/bootstrap/）に配置しましょう。

3. functions.phpに読み込みコードを追加

Bootstrapを使うためには、テーマのfunctions.phpに以下のようなコードを追加します。

function enqueue_bootstrap() {
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/bootstrap/bootstrap.min.css');
    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/bootstrap/bootstrap.min.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');

これでBootstrapのCSSとJSがテーマに読み込まれます。

4. jQueryは必要？

BootstrapのJavaScript部分はjQueryに依存しています。WordPressにはデフォルトでjQueryが同梱されていますが、テーマによっては読み込まれていない場合もあります。

もしjQueryが読み込まれていなければ、functions.phpで明示的に読み込みましょう。

5. テーマによっては読み込み済みの場合もある

「Lightning」テーマは、最初からjQueryやBootstrapを読み込んでくれているため、自分で追加する必要はありません。

ですが、他のテーマや自作テーマの場合は読み込みがされていないことも多いので、その場合は今回の方法で追加してください。

6. CDNでの読み込みもおすすめ

BootstrapはCDN（Content Delivery Network）を使って読み込むこともできます。CDNなら最新版を簡単に利用できて、サーバー負荷も軽減できます。

ただし、インターネット接続が必要なので、オフライン開発や環境によってはローカルにファイルを置く方が良い場合もあります。

7. トラブルシューティング

• Bootstrapのスタイルが反映されない → 読み込みパスや順序を確認
• JavaScriptエラーが出る → jQueryが正しく読み込まれているか確認
• 重複読み込みに注意 → 既にテーマやプラグインで読み込んでいる場合は2重にしない

まとめ

WordPressでBootstrapを使う際は、テーマによってjQueryやBootstrapが最初から入っている場合もあれば、自分で読み込む必要がある場合もあります。

テーマの仕様を理解して、必要に応じてfunctions.phpで読み込みを設定しましょう。