ツールチップ、カラフルなボタン、ロールオーバー効果などのCSS要素を追加すると、コンテンツが際立ちます。問題は、ほとんどの人がCSSを使ってカラフルなボタン、テーブル、ラベルなどを追加する方法を知らないことです。ここでは、カラフルなウィジェットやWordPressのテーブルを追加する方法を紹介しました。この記事では、ショートコードを使用してWordPressでTwitter Bootstrap CSSを使用する方法を紹介します。
Twitter Bootstrapは、サイトのデザインと機能を迅速に強化するのに役立つCSSおよびJavaScriptフレームワークです。これは、TwitterのMark OttoとJacob Thorntonによって、内部ツールの整合性を促進するためのフレームワークとして開発されました。後にオープンソースツールとしてリリースされました。美しく、シンプルで、すべてのブラウザで互換性があります。
まず最初に行う必要があるのは、WordPress Twitter Bootstrap CSSプラグインをインストールして有効化することです。有効化すると、プラグインはWordPress管理画面にTwitter Bootstrapメニュー項目を追加します。それをクリックすると、プラグインのダッシュボードに移動します。
ダッシュボードには、プラグイン作成者によって追加された多くの広告が表示されます。それらをスクロールして下に移動すると、投稿に追加できるショートコードが表示されます。各ショートコードは、これらのショートコードのさらに多くの使用例を確認できるプラグインのサポートページにリンクされています。
管理画面のTwitter Bootstrapメニュー項目の中に、Bootstrap CSS設定を構成するためのリンクがあります。それをクリックすると、ニーズに合わせて設定を変更できる構成ページに移動します。使用したいBootstrap CSSのバージョンを選択するオプションがあります。その下には、より高度なユーザー向けのオプションがあります。
設定を確認したので、ブログ投稿にブートストラップCSS要素を追加しましょう。投稿またはページのコンテンツに次のようなショートコードを貼り付けるだけです。
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
ブログ投稿でのこれらのショートコードの外観は次のようになります。
投稿に追加できるCSS要素は他にもたくさんあります。ツールチップ、アコーディオンメニュー、ポップアップボックス、プログレスバーなど。このプラグインのウェブサイトには、これらの機能の使用方法に関するドキュメントがさらにあります。アイコンに興味がある場合は、Twitter Bootstrapの公式ウェブサイトで、使用できるアイコンの全セットを確認できます。
Genesisなどのテーマフレームワークには独自のオプションがあることを私たちは知っています。投稿でCSS要素を使用していますか？以下のコメントで私たちに知らせてください。
ケジー
この投稿に感謝します。Bootstrapフレームワーク上に構築されたテーマを使用しており、あちこちにショートコードを入力するよりもプロセスが簡単です。 anyway、テーマのヘッダーにBootstrapスクリプトとスタイルをエンキューして同じ結果を達成する方が簡単ではありませんか？
チアゴ
本当にありがとうございます！大変助かります。
Deprito
genesisを使っているのですが、このプラグインを試すと…CSSがおかしくなってしまいます。
どうすれば直せますか？少し混乱しています…
WPBeginnerサポート
Deprito、Genesis自体がテーマフレームワークであり、Twitter BootstrapをGenesisで動作させるには追加の手順が必要です。Genesisサポートフォーラムを試してみてください。誰かがすでにそれをやったはずです。
管理者
ジェームズ・マシューズ
素晴らしいチュートリアルです。Twitter Bootstrapに関する多くの混乱を解消してくれました。Bootstrapの一部はまだ理解するのが難しいですが、これに慣れていくにつれて間違いなく非常に役立つでしょう。
Steven Blake mba
おそらく良い記事でしょう。興味のある記事の多くが、あなたが日常的に扱う専門用語が、それに出会ったことのない人には理解されないかもしれないことを忘れているか、気づいていないことに非常にフラストレーションを感じます。私は自分の仕事（ライフコーチ）でもこれをしないようにしています。もしNLPプラクティショナーとして広告を出せば、それが何かわからない人の90％を遠ざけてしまうでしょう。
そのため、残念ながらTwitterブートストラップが何であるかを理解するまで、それをインストールする方法の詳細を本当に必要としません。見逃しているかもしれませんが、すでにしている以上のことを調べる時間がありません。そして、あなたの記事にたどり着きましたが、戻る前にさらにいくつか調べる必要はありません！
Twitterブートストラップが何をするのか、そしてそれを持つことの利点を1行で説明するだけで、私が読み続けるか、次に進むかの違いになるでしょう。
これはちなみに建設的な批判です。このブログおよび今後のブログに説明を追加すれば、結果が改善されるのを見るでしょう。ご多幸をお祈りします、スティーブン
Noumaan Yaqoob
@Steven Twitter Bootstrapは、他のデザイナーや開発者が自身のプロジェクトでこれらの要素を使用するのに役立つ、事前定義されたデザインツールのセットです。
この記事とプラグインの目的は、あなたのようなユーザーがコードやCSSを学習せずにTwitter Bootstrapを使用できるようにすることです。
Richie
素晴らしいチュートリアルです。
クレイグ・グレラ
素晴らしい投稿、ありがとう。ブートストラップを使用し、それをテーマやその他のいくつかのテーマに移植しましたが、これはフレームワークを必要としないサイト、ボタンとアイコンだけが必要なサイトに役立つでしょう。
ナイスキャッチ！