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から読み込むパターンがあります。
当サイトでは本家が用意してくれている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>
この４行を追加すれば、WordPressサイトへのBootstrapの読み込みが完了します。
（２行目のJquery.jsはすでに読み込んでいるWordPressテーマが多いので、その場合は不要です。）
あとは記事の中にBootstrapに対応したタグを書けば問題なく表示されるようになります。
以上、「BootstrapをWordPressサイトに追加する方法」でした。
WordPressテーマ 「ACTION（AFFINGER6）」は「稼ぐ」に特化したWordPressテーマです。
THE THOR（ザ・トール）は、圧倒的にSEOに強く・抜群に上位表示されやすい「究極のSEO最適化テーマ」です。
Diverは初心者でも簡単に利用可能な高品質高機能なハイスペックワードプレステーマです。
| 料金 | 11,000円(税込) |
|---|---|
| 複数サイト | 使用可能 |
| 商用利用 | 使用可能 |
| ブロックエディタ | 対応済み |
| SEO対策 | 対応済み |
| サポート | メール |
| 料金 | 無料 |
|---|---|
| 複数サイト | 使用可能 |
| 商用利用 | 使用可能 |
| ブロックエディタ | 対応済み |
| SEO対策 | 対応済み |
| サポート | フォーラム |
