Content Bootstrap

Twitter Bootstrapを使用するとそれなりにかっこいいサイトをちゃちゃって作ることができて便利なんですが、お気に入りのテーマとあわせて使うとCSSが衝突して残念なことになったりしますよね。

そんなわけで、WordPressのコンテンツエリアの部分だけにBootstrapのCSSが適用されるプラグインを作りました。

http://wordpress.org/extend/plugins/content-bootstrap/

このプラグインを使用すると、現在使ってるテーマのままで、以下のようなBootstrapの多様なスタイルをコンテンツに適用できます。

span4
span8
span6
span6
span12

ちなみにエディターの中でもこんな感じ!

5f9e38b38858a66edb18f7dc70a1591e-1

ダウンロード&インストール方法

公式ディレクトリからプラグインをインストールしてください。

設定等はありませんので、インストールして有効化すればすぐに使用可能になります。

http://wordpress.org/extend/plugins/content-bootstrap/

ちなみにソースはGitHub上でメンテしています。

https://github.com/miya0001/content-bootstrap

使い方

プラグインをインストール後、投稿画面を開くと以下のようにスタイルを選択するプルダウンメニューが表示されているはずです。

このプラグインではJavaScriptを除く全てのCSSが適用されますが、よく使いそうなスタイルのみ、プルダウンメニューから選択できるようにしてあります。

スクリーンショット_2013_01_19_22_51

このプルダウンメニューにないスタイルについては、以下のページを参考にしてclass属性を記述すればスタイルを適用できます。

以下では使用可能な主なスタイルについてサンプルを紹介します。

Labels and Badges

Label や Badge は、<span class="label label-important">Important</span>の様に記述すればスタイルが適用されますが、WordPressによってspanタグが削除されてしまうことがあるようなので、以下の様にショートコードでも記述できるようになっています。

Labels

Labels Markup
Default [label]Default[/label]
Success [label name="success"]Success[/label]
Warning [label name="warning"]Warning[/label]
Important [label name="important"]Important[/label]
Info [label name="info"]Info[/label]
Inverse [label name="inverse"]Inverse[/label]

Badges

Badges Markup
Default [badge]Default[/badge]
Success [badge name="success"]Success[/badge]
Warning [badge name="warning"]Warning[/badge]
Important [badge name="important"]Important[/badge]
Info [badge name="info"]Info[/badge]
Inverse [badge name="inverse"]Inverse[/badge]

Alerts

Alerts は全部で4種類用意されており、スタイルのプルダウンメニューから選択できます。

Alert

Success

Info

Error

Wells

well というのが、どういう意味合いなのかはよく分かりませんが(笑)、これもスタイルのプルダウンメニューから選択可能になっています。

Well Box

Fluid Grid

Bootstrapのグリッドシステムも利用可能です。

これは、さすがにHTMLを手打ちする必要がありますが、エディターのモードを切り替えてもtinymceに悪さされることはないようです。

span4
span8
span6
span6
span12

ソースは以下のような感じです。

<div class="row-fluid">
  <div class="span4 alert alert-success">span4</div>
  <div class="span8 alert alert-error">span8</div>
</div>
<div class="row-fluid">
  <div class="span6 alert alert-info">span6</div>
  <div class="span6 alert alert-default">span6</div>
</div>
<div class="row-fluid">
 <div class="span12 well well-small">span12</div>
</div>

ボタン

ボタンに限らずフォームのスタイルも充実しています。

Contact Form 7と組み合わせればかっこいいフォームがつくれますよ!

(サンプルを丸パクリしました。すいませんすいません。)

Button class=”” Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

画像

画像には以下の3種類のスタイルが定義されています。

224877_541804889181980_1503065426_n
224877_541804889181980_1503065426_n
224877_541804889181980_1503065426_n

マークアップは左から順に以下のような感じです。

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

ちなみに、一番右側の、.img-polaroid を使用する場合には、テーマで以下のスタイルを記述しておかないとボックスからはみ出すようなのでご注意を。

.img-polaroid
{
    box-sizing: border-box;
}

アイコンについて

バージョン 0.3.0よりGlyphiconsも利用可能にしました。

アイコンを利用するには以下のようにショートコードを使用することをご推奨します。

Twitter Bootstrapのマニュアルのように <i class="icon-search"></i> と記述すると、保存時にWordPressによって削除されてしまいます。

[icon glass]
[icon music]
[icon search]
[icon envelope]
[icon heart]

白抜きのアイコンを使用する場合は以下のように white という引数を追加してください。
(以下の例ではわかりやすくするために、[label name="inverse"]...[/label] で囲っています。)

[icon glass white]
[icon music white]
[icon search white]
[icon envelope white]
[icon heart white]

Glyphionsのライセンスについて

Glyphiconsは、Creative Commons Attribution 3.0 Unported (CC BY 3.0) で配布されていますが、Twitter Bootstrapで使用されている Glyphicons Halflings に関しては、Twitter Bootstrap と同じライセンス(GPL)で配布しますということなので(Twitter Bootstrap内での使用に限る?)、今回プラグインに含めることにしました。

Glyphicons Halflings are also a part of Bootstrap by Twitter, and are released under the same license as Bootstrap. While you are not required to include attribution on your Bootstrap-based projects, I’d certainly appreciate a visibile link back to glyphicons.com in any place you find appropriate (footer, docs, etc).

引用: License | GLYPHICONS

JavaScriptについて

JavaScriptについてもこのプラグインでは提供していません。

個別に有効化/無効化できるようにするUIとセットで提供しようかとも思いましたが、テーマや他のプラグインとのコンフリクトがいろいろあったので、JavaScriptについては個別に対応していただくのがよいと思います。

更新情報

[get_posts disabled_category=1 posts_per_page=5 category_name=”Content Bootstrap”]