BoostrapをCDNを使って簡単にWordPressに組み込む方法

2019/09/262021/01/09

BootstrapをWordPressに簡単組み込むにはBootstrapのCDNサービスを利用するとファイルをダウンロードし、サーバーにアップすることなく組み込むことができます。

BoostrapをCDNを使って簡単にWordPressに組み込む方法

BoostrapをCDNを使って簡単にWordPressに組み込むには以下の２つのファイルをCNDサービスからリンクする必要があります。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

もしWordPressサイトにjQueryを組み込んでいなければjQueryもリンクする必要があります。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Bootstrapとは

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

ウィキペディア（Bootstrap）より

このソースをWordPressのhead部分に読み込むようにします。

実際に読み込むには以下のソースをfunctions.phpに組み込みます。

add_action('wp_head','my_laod_boostrap');
function my_laod_boostrap(){
    echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"   type="text/css" media="all" >' ;
	echo '<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>' ;
}

※functions.phpを修正する際は必ずバックアップを取ってから行ってください。不具合を埋め込んだ場合、サイトは表示できなくなる可能性があります。