賢威にBootstrapを導入する方法

WordPressのカスタマイズを請負うようになってからというもの、とある学校法人の先生と生徒しか見ることができないサイトや居酒屋、有名かどうかもわからないブロガーのサイト、不動産屋、風俗店などさまざまな業種のサイトを見る機会がありました。

賢威やTCDのような超有名なテーマを使用しているサイトもあれば、「こんなテーマ見たことも聞いたこともない…」といったようなテーマを使用されているサイトもありかなり楽しませてもらっています。

そんなこんなで、いろいろなテーマをカスタマイズしていて思ったのが、Bootstrapってめちゃくちゃ便利ってことです。

今さら感は半端ないですが…

で、先ほど少し触れた賢威ですが、残念ながらこの賢威にはBootstrapは導入されていません。

わたしが運営しているいくつかのサイトは、ほぼ賢威で作成していることもあり、実際に賢威にBootstrapを導入してみました。

一応、これから紹介する方法で問題なく表示されているのですが、cssなんかを変更したり追記していたりすると、以下の方法にプラスして何らかの調整が必要になるかもしれません。

この点については、あらかじめご了承ください。

Bootstrapを読み込むための準備と方法

まずは、Bootstrapを読み込むための準備を行います。

Bootstrapの公式サイトに行くと、Bootstrapを導入するために必要となるcssやｊQueryファイルがダウンロードできるのですが、今回はCDNサービスで配信されているものを利用して導入する方法を紹介します。

functions.phpの一番最後に以下を書き込んでください。

WordPressを使っていれば、ほぼ間違いなくｊQueryファイルを読み込んでいるので、それ以外のファイルだけを読み込むように設定しています。

本来ならば、ここでBootstrapのcssファイルを読み込むようにすればいいのですが、wp_enqueue_styleで読み込むようにすると、どのように設定しても上手くいかなかったので、cssファイルだけは別の方法で読み込むようにしています。

Bootstrapのcssファイルを読み込ませる

わたしのサイトでは、以下の方法でcssファイルを読み込ませています。

これを、base.cssの頭の方（@charset “UTF-8”;と書かれているすぐ下のあたり）に書いています。

@importは表示速度が遅くなるなどのデメリットもあるため、本当は使いたくなかったのですが、今回は自身の力不足もあり、やむなくこの方法を使っています。

cssファイルへ追記をする

ここまでの作業でBootstrapは使える状態になっています。

ただ、若干レイアウトが崩れますので、そこをbase.cssへの追記を行なって調整をしていきます。

わたしが運営してるサイト（賢威を使用しているサイト）は、かなりカスタマイズをしていますが、上記のcssを追記するだけでレイアウトが崩れることなく表示されるようになりました。

最初の方で少し触れましたが、ひょっとするとここで調整が必要になる場合もあるかもしれませんので、各ページをチェックするようにしてください。

以上が賢威にBootstrapを導入する手順となります。

賢威は言うまでもなく有名なWordPressのテーマですので、いろいろな方が利用されています。ですので、「賢威を使っている人と差をつけたい」と思っているなら、Bootstrapの導入はぜひオススメです。

レイアウトの自由度がビビるくらい上がるので、コンテンツの見せ方も簡単に変えることができます。それに刺激されて、今まで思いもつかなかったコンテンツができるかもしれませんよ。