Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでショートコードを使ってTwitter Bootstrap CSSを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

ツールチップ、カラフルなボタン、ロールオーバー効果などのCSS要素を追加することで、コンテンツを目立たせることができます。問題は、ほとんどの人がCSSを使ってカラフルなボタンやテーブル、ラベルなどを追加する方法を知らないことです。WordPressで カラフルなウィジェットやテーブルを追加する方法を紹介しました。この投稿では、ショートコードを使ってWordPressでTwitter Bootstrap CSSを使う方法を紹介します。

Twitter BootstrapはCSSとJavaScriptのフレームワークで、サイトのデザインと機能性を素早く向上させるのに役立ちます。Twitter Bootstrapは、TwitterのMark OttoとJacob Thorntonによって、社内ツール間の一貫性を保つためのフレームワークとして開発されました。その後、オープンソースツールとしてリリースされた。美しく、シンプルで、すべてのブラウザーで互換性があります。

まず最初にWordPress Twitter Bootstrap CSSプラグインをインストールして有効化します。プラグインを有効化すると、WordPress管理画面にTwitter Bootstrapメニュー項目が追加されます。クリックすると、プラグインのダッシュボードに移動します。

Bootstrap Menu

ダッシュボードには、プラグイン投稿者が追加した広告がたくさん表示されます。それらを通り過ぎて下にスクロールすると、投稿に追加できるショートコードが表示されます。各ショートコードはプラグインのサポートページにリンクされており、ショートコードの使用例を見ることができる。

Bootstrap shortcode usage examples

管理画面のTwitter Bootstrapメニュー項目の下に、Bootstrap CSS設定のリンクがあります。これをクリックすると設定ページに移動し、ニーズに合わせて設定を変更できます。使用するBootstrap CSSのバージョンを選択するオプションがあります。その下には、上級ユーザー向けの設定があります。

さて、設定を見たところで、ブログ投稿にブートストラップCSS要素を追加してみましょう。このようにショートコードを投稿やページのコンテンツに貼り付けるだけです:

[cbk1]

ブログ投稿では、このようにショートコードが表示されます:

Twitter bootstrap css elements added to a post

投稿に追加できるCSS要素は他にもたくさんあります。ツールチップ、アコーディアンメニュー、ポップアップボックス、プログレスバーなど。このプラグインのサイトには、これらの機能の使い方についてのドキュメンテーションがあります。アイコンについて興味がある方は、Twitter Bootstrapの公式サイトで、使えるアイコン一式を見ることができます。

Genesisなどのテーマフレームワークには、独自のオプション設定が用意されています。投稿にCSS要素を使用していますか?下にコメントを残して教えてください。

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

10件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. kezzy says

    Thanks for this post. I have been using theme built on bootstrap framework and the process is straight forward rather than to input shortcodes here and there. Anyway will it not be easier to enqueue bootstrap script and style to a theme header and achieve the same result?

  3. Deprito says

    I’m using genesis, but when i try this plugin.. My css gone crazy..
    How to fix it? little bit confuse..

    • WPBeginner Support says

      Deprito, Genesis is itself a Theme Framework and getting Twitter Bootstrap to work on Genesis would require additional steps. Try Genesis support forums, someone must have already done that.

      管理者

  4. James Matthews says

    Amazing tutorial. Cleared up a lot of confusion that I had about twitter bootstrap. Parts of bootstrap are still difficult for me to understand, but this will definitely be really useful as I start to become more familiar with it.

  5. Steven Blake mba says

    Thanks for what I am sure must be a good article. I find it quite frustrating the amount of articles I could really be interested in that forget or don’t realise that the use of buzz words that you deal with every day might not be understood by anyone who hasn’t come across it before. I try not to do this in my own work as a life coach, which if I advertised as being an NLP practitioner I would put off 90% of people who don’t know what that is.

    So unfortunately until I understand what a twitter boot strap is I really don’t need the detail of how to install it. It may be I am missing out, but I don’t have the time to research any more than I already do and I did arrive here at your article, I just don’t want to have to look up several more before I return!

    Just one line explaining what it does and the benefits of having a twitter boot strap would be the difference between me reading on instead of moving on.

    This is constructive criticism by the way, add the description in this and any subsequent blogs and watch your outcomes improve. Best wishes, Steven

    • Noumaan Yaqoob says

      @Steven Twitter bootstrap is a set of predefined design tools which helps other designers and developers to use those elements in their own projects.

      The purpose of this article and the plugin is to help users like yourself to use twitter bootstrap without learning code or css.

  6. craig grella says

    great post, thanks. I’ve used bootstrap and ported it for thesis and a few other themes, but this will be handy for sites that dont need the framework – just the buttons and icons.

    nice catch!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。