で、これをCSSのフレームワークのBootstrap化したい。単純に呼び込むだけなら、問題ないが、当然レスポンシブになるし、1から作りたいが既に運用しているのでそうもできない(リソース的に)
これは、そんなサイトの改修記録です。
まずはBootstrap呼び込ませる。
まずテーマを確認
Bootstrap本体をダウンロード
現在のバージョン3.3.7
今回、CDNを使わずにファイルを設置する。理由はキャッシュ効かせてるぐらいなので、極力読み込みをおさえたいから(安直に)
本体はWEBルート内のcontents内、テーマ内にCSS,fonts,jsをそれぞれ入れ込む。ちなみにbootstrap.min.css はコメントや改行を削除した圧縮版
header.phpに
<link href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.min.css" rel="stylesheet" type="text/css">
次にfooter.phpに
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap.min.js"></script>
部分的に実装を行う。
まずはsingle.phpに<div class=”container”>で括ってグリッド化する。
このサイトはサイドバーが右にあり全体は
幅1280,メイン800,サイドバーが300,のこりはマージンなっている。
ここでブレイクポイントにあわせて全体のレイアウトを決めることにする。
……つづく