BootstrapをWordPressサイトに追加する方法

Bootstrapをサイトに追加する方法

BootstrapをWordPressサイトに追加するにはダウンロードするよりCDNの方が楽にできます。

Bootstrapは非常に強力なCSSフレームワークの1つです。

Bootstrapの特徴はHTML(HyperText Markup Language)やCSS(Cascading Style Sheets)のWEB知識が少なくても簡単にレスポンシブなサイトを構築できるフレームワークです。

WordPressのテンプレートでもデフォルトでBootstrapを組み込んでいるテーマも多くありますが、今回はBootstrapを組み込んでいないWordPressテーマにBootstrapを組み込む方法をまとめます。

Bootstrapをサイトに追加する方法

Bootstrapを利用するには本家サイトからダウンロードして読み込むパターンと、本家が用意してくれているCDNから読み込むパターンがあります。

Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to lif...

当サイトでは本家が用意してくれているCDNから読み込むパターンを採用します。

Bootstrapをサイトに追加する方法

BootstrapをCDNでサイトに追加するには以下のコードheader.phpに追加します。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

この4行を追加すれば、WordPressサイトへのBootstrapの読み込みが完了します。
(2行目のJquery.jsはすでに読み込んでいるWordPressテーマが多いので、その場合は不要です。)

あとは記事の中にBootstrapに対応したタグを書けば問題なく表示されるようになります。

以上、「BootstrapをWordPressサイトに追加する方法」でした。

WordPressテーマ 「ACTION(AFFINGER6)」は「稼ぐ」に特化したWordPressテーマです。

WordPressテーマ 「ACTION(AFFINGER6)」は「稼ぐ」に特化したWordPressテーマです。

THE THOR(ザ・トール)は、圧倒的にSEOに強く・抜群に上位表示されやすい「究極のSEO最適化テーマ」です。

THE THOR(ザ・トール)は、圧倒的にSEOに強く・抜群に上位表示されやすい「究極のSEO最適化テーマ」です。

Diverは初心者でも簡単に利用可能な高品質高機能なハイスペックワードプレステーマです。

Diverは初心者でも簡単に利用可能な高品質高機能なハイスペックワードプレステーマです。

料金 11,000円(税込)
複数サイト 使用可能
商用利用 使用可能
ブロックエディタ 対応済み
SEO対策 対応済み
サポート メール
料金 無料
複数サイト 使用可能
商用利用 使用可能
ブロックエディタ 対応済み
SEO対策 対応済み
サポート フォーラム
スポンサーリンク
スポンサーリンク
Boostrap学習におすすめの本
Bootstrap
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました