ワードプレスにワンタッチでBootstrapを導入できる便利プラグイン「WP Quick Bootstrap」

本日は業務メモです。久々にプロ向けでプラグインを開発したのでちょっとしたお知らせです。Webの開発者ならみんな大好き「Bootstrap（ブートストラップ）」。ワードプレスにスピーディにBootstrapを導入するための専用プラグインです。余計なスクリプトは一切読み込まないので軽量で無駄がありません。

ワードプレスにワンタッチでBootstrapを導入できる便利プラグイン「WP Quick Bootstrap」

現段階で「Bootstrapを導入するためのプラグイン」はいくつか開発されていますが、調べてみてもいまいちどれもピンと来なかったので個人的にゼロから作成させていただきました。Bootstrapをよくわかっていない人もいるのでカンタンに解説しておきますね。Bootstrapは「CSSの装飾ライブラリ」です。

Bootstrapを使用したワードプレステーマは多数ある

ワードプレスに限らずあらゆるテンプレートでBootstrapは導入されています。レイアウト変更を行いやすいグリッドレイアウトと呼ばれる構造も人気の秘訣です。通常はhtmlのマークアップとCSSのデザイン作成はゼロから作る必要がありますがBootstrapを使えば大まかなレイアウトがそのまま活用できます。

１行レイアウト、２行レイアウト、３行レイアウトや、スマホ、タブレットで自動的にレスポンシブとして動いてくれる等とても柔軟な仕組みになっているのでベースのレイアウトを組み上げる際に便利です。

必要なファイルを読み込ませるだけで「htmlマークアップをBootstrapに習って記述するだけ」でレイアウトを手軽に組み上げられます。SEOを意識して組み上げるマークアップと、Bootstrapのレイアウトに使うマークアップを各々混在して使うことになりますのである程度の知識がある人向けとなります。

Bootstrapは基本的にCSSを読み込むだけでOK

公式サイトではjQueryの読込みも推奨されていますよね。そのためゼロから作るテンプレートに導入するとしたらjQueryとCSSの両方をロードする必要があります。当サイトで準備したプラグインはCSSのみとなります。理由はワードプレスはテーマやその他のプラグインでjQueryを使用していることが多いからです。

将来的には、条件分岐で「適用しているテーマや他のプラグインでjQueryが読み込まれてでいなければjQueryをロードする」という処理にすればより柔軟になるのでバージョンアップで対応する予定です。

個人的に使いたいという理由で作っただけのプラグインですが、もし必要あればご使用くださいませ。最近はあまり時間がとれていませんがまた手が空いたら無料ダウンロードページに追加しておきます。

まとめ

あらためてBootstrapは便利ですね。ちなみに管理画面系のテンプレートは大半が高確率でBootstrapを導入しています。ゼロからCSSでレスポンシブを組み上げるのはかなりの労力なので効率化できるのが理由です。個人的には必須というよりは「状況に応じて必要なら導入する」という感覚で使用しています。

まだ使ったことがない人はぜひ一度使ってみてください。2011年頃に登場した便利なCSSライブラリです。長く使用されていて多くの人が使っている信頼できるツールです。ちなみにBootstrap自体のライセンスはMIT。当たり前ですが商用利用もできてソースの改変もデータの再配布も再販売もなんでも自由です。

今後ゼロからhtmlでレイアウトを組むときは積極的に活用したいですね。ただ、ランディングページや一般的なホームページならBootstrapのようなライブラリを使わずに構築するとより軽量に作れます。ウェブサイト構築ではライブラリはあってもなくてもページの制作はできるので導入するかどうかはお好みでどうぞ。