とあるテーマのBootstrap化 その1 まずは読み込ませて部分的にテスト


某サイトで既にカスタマイズされたテーマがある。

で、これを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,のこりはマージンなっている。
ここでブレイクポイントにあわせて全体のレイアウトを決めることにする。

……つづく

 

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG