前回の記事は準備編として、WordPressのテーマを作るためのフォルダとファイルの用意をしました。今回はBootstrap5のインストールを進めていきます。

Bootstrap5のダウンロード

Bootstrap5をダウンロードします。以下のアドレスを開き、「コンパイルされたCSSとJS」の項目にある「Download」ボタンからダウンロードを行います。

https://getbootstrap.jp/docs/5.0/getting-started/download/

Bootstrap5の導入

bootstrap-5.x.x-dist.zipがダウンロードされますので、解凍します。

解凍したフォルダには、「css」フォルダと「js」フォルダが含まれています。

「CSS」フォルダにある「bootstrap.min.css」を、作成したテーマのフォルダ「original_theme」の「CSS」フォルダにコピーします。

次に、「js」フォルダにある「bootstrap.bundle.min.js」をテーマのフォルダ「original_theme」の「js」フォルダにコピーします。

完了した形が以下です。「css」と「js」のフォルダ内に、上記のファイルがコピーされています。

Foundation6との違い_01
Bootstrap5はcss、jsとも、用途別に分けたものが数多く用意されています。今回選択したものは総合的なものですが、ケースによって必要なものだけ選んで読み込ませることができます。Foundation6では「css」、「js」のファルダともファイルの数は少ないので、選択してコピーするまでもなく、えいやっとそのまま上げられます。導入の手間はありませんが、運用のパフォーマンスはどうなのか、検討が必要かもしれませんね。

まとめ

簡単な操作だけで恐縮ですが、今回はここまでです。次回から、いよいよコーディングに入っていきます。お楽しみに。

Bootstrap5の開発にはこれがおすすめです。（類書は見ていませんが、、、）