Twitter BootstrapをWordPressで使ってみる (プラグイン初期設定と表示サンプル)。意外と簡単かも!

  • このエントリーをはてなブックマークに追加
  • LINEで送る

最近、個人的に最も注目のTwitter Bootstrap。
レスポンシブWEBデザイン対応(つまり、スマホサイト対応)、ページレイアウト、ボタンデザイン、UI、ナビーゲーションメニューの制作、特にデザインに関しては決まったスタイルから設定していけばいいので、開発時間の短縮に大いに役立ってくれています。

これまでは、サイトを一から立ち上げるときに、使っていたのですが、どうやら、Wordpressでも使えるようで、対応プラグイン見つけました。


WordPress Twitter Bootstrap CSS

こちらをインストールして、動作確認や使い方を確かめてみました。

インストールと設定

1.Wordpressのプラグイン管理メニューで、「Twitter Bootstrap」で検索すると、「WordPress Twitter Bootstrap CSS」がヒットしますので、インストールして、有効化します。

Wordpress Twitter Bootstrap CSS インストール

2.管理ツールの左メニューに「Twitter Bootstrap」が追加されるので、その中の「Bootstrap CSS」を選択します。

3.一番上の「Desired Bootstrap CSS」を「Twitter Bootstrap CSS」に切り替えます。

4.「Twitter Bootstrap Javascript Library Options」で「All Javascript Libraries」の「Incluce ALL Bootstrap Javascript Libararies」のチェックボックスにチェックを入れます。
※これを入れておかないと、ドロップダウンメニュー付きボタンや、ツールチップ、ポップオーバーの機能がうまくいきませんでした。

5.

[TBS_ALERT class="warning"]注意してくださいね[/TBS_ALERT]

のように、WordPress Twitter Bootstrap CSS独自のショートコードで編集できるようにする場合は、「Extra Twitter Bootstrap Options」の「Bootstrap Shortcodes」の「Enable Twitter Bootstrap Shortcodes」のチェックボックスにチェックを入れます。

6.最後に一番下の「Save all changes」をクリックして、設定の変更を完了します。これで、Wordpress Twitter Bootstrap プラグインを利用できるようになります。

以下、表示サンプルです。実際にこのサイトに組み込んだものです。

ボタン

ボタンの色をCSSのclass設定だけで切り替えられる

OK OK OK OK OK OK

ボタンの大きさもCSSで変更可

大きめのボタン:OK
小さめのボタン:OK

ボタンの大きさと色をCSSで設定:OK

アイコン付きボタン

 

ドロップダウンメニュー付きボタン

アラートメッセージ

[TBS_ALERT class=”warning”]注意してくださいね[/TBS_ALERT]
[TBS_ALERT class=”error”]エラーですよ[/TBS_ALERT]
[TBS_ALERT class=”success”]OK!大成功です。[/TBS_ALERT]
[TBS_ALERT class=”info”]お知らせです[/TBS_ALERT]

プログレスバー

引用

[TBS_BLOCKQUOTE source=”どこかの誰かさん”]誰かが言った素敵な言葉[/TBS_BLOCKQUOTE]

ツールチップ

[TBS_TOOLTIP placement=”above” title=”ちょっとだけ詳しい情報をここに表示するぜ” style=”text-decoration:underline”]この文章にマウスを持ってくると[/TBS_TOOLTIP]

ポップオーバー

[TBS_POPOVER title=”タイトル” content=”内容をここに入れるのだ” style=”text-decoration:underline”]ポップオーバー[/TBS_POPOVER]

こんな感じで、簡単にTwitter Bootstrapの機能をWordpressに組み込むことができます。皆さんもいかがですか?

【関連記事】
Twitter Bootstrapの習得にはドットインストール+公式サイトが最適

次回は、Wordpress Twitter Bootstrapプラグインの書き方についてまとめる予定です。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


This blog is kept spam free by WP-SpamFree.