ツールチップ、カラフルなボタン、ロールオーバー効果などの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スクリプトとスタイルをエンキューして同じ結果を達成する方が簡単ではありませんか？
チアゴ
本当にありがとうございます！大変助かります。
デプリト
genesisを使っているのですが、このプラグインを試すと…CSSがおかしくなってしまいます。
どうすれば直せますか？少し混乱しています…
WPBeginnerサポート
Deprito、Genesis自体がテーマフレームワークであり、Twitter BootstrapをGenesisで動作させるには追加の手順が必要です。Genesisサポートフォーラムを試してみてください。誰かがすでにそれをやったはずです。
管理者
ジェームズ・マシューズ
素晴らしいチュートリアルです。Twitter Bootstrapに関する多くの混乱を解消してくれました。Bootstrapの一部はまだ理解するのが難しいですが、これに慣れていくにつれて間違いなく非常に役立つでしょう。
スティーブン・ブレイクMBA
おそらく良い記事でしょう。興味のある記事の多くが、あなたが日常的に扱う専門用語が、それに出会ったことのない人には理解されないかもしれないことを忘れているか、気づいていないことに非常にフラストレーションを感じます。私は自分の仕事（ライフコーチ）でもこれをしないようにしています。もしNLPプラクティショナーとして広告を出せば、それが何かわからない人の90％を遠ざけてしまうでしょう。
そのため、残念ながらTwitterブートストラップが何であるかを理解するまで、それをインストールする方法の詳細を本当に必要としません。見逃しているかもしれませんが、すでにしている以上のことを調べる時間がありません。そして、あなたの記事にたどり着きましたが、戻る前にさらにいくつか調べる必要はありません！
Twitterブートストラップが何をするのか、そしてそれを持つことの利点を1行で説明するだけで、私が読み続けるか、次に進むかの違いになるでしょう。
これはちなみに建設的な批判です。このブログおよび今後のブログに説明を追加すれば、結果が改善されるのを見るでしょう。ご多幸をお祈りします、スティーブン
ヌーマン・ヤクブ
@Steven Twitter Bootstrapは、他のデザイナーや開発者が自身のプロジェクトでこれらの要素を使用するのに役立つ、事前定義されたデザインツールのセットです。
この記事とプラグインの目的は、あなたのようなユーザーがコードやCSSを学習せずにTwitter Bootstrapを使用できるようにすることです。
リッチー
素晴らしいチュートリアルです。
クレイグ・グレラ
素晴らしい投稿、ありがとう。ブートストラップを使用し、それをテーマやその他のいくつかのテーマに移植しましたが、これはフレームワークを必要としないサイト、ボタンとアイコンだけが必要なサイトに役立つでしょう。
ナイスキャッチ！