これまで紹介してきたTwenty ElevenをTwitter Bootstrapでカスタマイズする方法をまとめてみます。それぞれ導入すれば、Twenty Elevenテーマに個性をプラスできるんじゃないでしょうか。もちろん、他のテーマであっても同様の方法で導入できると思います。その際は、CSSやPluginの競合に注意してください。
このカスタマイズでは、プラグイン
を使っています。その他はテーマファイルにコードを追加することで実現しています。
まずは、Bootstrap自体の導入からです。
Twitter Bootstrapを使えるようにする
» 最新Twitter Bootstrapを一発で導入しちゃうWordPressプラグイン
テーマにTwitter Bootstrapを導入します。CSSファイルをそのまま追加する方法もありますが、バージョンが変わる毎に変更する必要があるので、プラグインを使ってしまいます。
そうすれば、バージョンが変わっても、プラグインが更新される限り大丈夫です。
パンくずリストを追加
» パンくずリストをTwenty Elevenテーマにプラグインなしで導入する方法
はじめは、サイトを見ている人が「今、どこにいるか」をお知らせするパンくずリストです。
すべてのページで表示するようにしてもいいですが、ここでは投稿記事ページと固定ページに導入しています。
前へ・次へボタンを追加
» 前へ・次へボタンをTwenty Elevenテーマにプラグインなしで導入する方法
次は、投稿記事ページに表示する前へ・次へボタンです。
投稿記事ページの真ん中下部に表示する方法を説明しています。
ページ切り替えメニューを追加
» ページ切り替えメニューをTwenty Elevenテーマにプラグインなしで導入する方法
続いては、ページ切り替えメニューです。
プラグインで導入する方法もありますが、テーマファイルを変更することで導入しています。最初のページ・最後のページへのボタンも追加しています。
タグクラウドを変更
» タグクラウドをTwitter Bootstrapでシンプルな色でわかるものにする方法
さいごは、タグクラウドです。
以前、紹介したテーマ「WPBS」を参考にして、Twenty Elevenに導入しています。トピック数に応じて、JavaScriptでLabelの色が変わるようになっています。
タグクラウドの変更では、jQueryを使えるようにしているので、プラグインWordpress Twitter Bootstrap CSSと組み合わせてTwitter Bootstrapのツールチップやポップオーバーが使えるようになります（プラグインのショートコードで！）。
ショートコードを使った投稿記事内容
[html highlight_lines="1,6"]
[TBS_TOOLTIP placement="top" title="top tooltip" style="text-decoration:underline"]top ツールチップ[/TBS_TOOLTIP]
[TBS_TOOLTIP placement="bottom" title="bottom tooltip" style="text-decoration:underline"]bottom ツールチップ[/TBS_TOOLTIP]
[TBS_TOOLTIP placement="left" title="left tooltip" style="text-decoration:underline"]left ツールチップ[/TBS_TOOLTIP]
[TBS_TOOLTIP placement="right" title="right tooltip" style="text-decoration:underline"]right ツールチップ[/TBS_TOOLTIP]
[TBS_POPOVER title="Popover title" content="content 内容文章" style="text-decoration:underline"]ポップオーバー[/TBS_POPOVER]
[/html]
今日のひとこと 『こんなもの作りました』
記事以外の書く部分がなかったので、こんなもの作りました。記事とはあまり関係ないことになると思いますが、ちょっとしたことを書いていこうと思います。
久しぶりの更新になりました。サイトの見た目をかなり変えたので、どんどん記事で紹介していきたいと思います。
