BoostrapをCDNを使って簡単にWordPressに組み込む方法
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ベースのデザインテンプレートとして用意されている。
このソースを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を修正する際は必ずバックアップを取ってから行ってください。不具合を埋め込んだ場合、サイトは表示できなくなる可能性があります。
まとめ
Boostrapを導入すると難しいCSSは書かなくても簡単にサイトの見た目を統一し変更できるメリットがあります。
今後はBosstrapの使い方に関する記事もアップしていく予定なので、まだ組み込んでない方は是非この機会に組み込んでみてください。
以上、BoostrapをCDNを使って簡単にWordPressに組み込む方法でした。