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

bootstrap Bootstrap

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
The most popular HTML, CSS, and JS library in the world.

当サイトでは本家が用意してくれている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サイトに追加する方法」でした。

タイトルとURLをコピーしました