wordpress で Twitter Bootstrap 3 を使う
Twitter Bootstrap 3 はウェブを簡単にカッコイイデザインにするためのフレームワークです。このフレームワークを WordPress でも利用して表やアイコンをかっこよくしてみましょう。
※試していませんが Bootstrap 2 でも同様にできるはずです。
Twitter Bootstrap 3 の洗練された表やアイコン、ボタン類を WordPress の中で使えたらいいなと思って使ってみたら問題なく使えたというお話です。実は前回の記事でもアイコンや表の表示に Bootstrap 3 を使っています。
Bootstrap 2 でも同様の考え方でいけるかと思いますが試していません。
準備
Bootstrap 3 のダウンロード
まずは Twitter Bootstrap 3 のダウンロードサイトから最新版のアーカイブをダウンロードします。
zip ファイルを解凍するとたくさんファイルが展開されますが、この中で実際に必要なファイルは下図のように dist フォルダの下の css フォルダと js フォルダになります。
アイコンリソースのダウンロード
Bootstrap 3 からアイコンはパッケージに含まれず別リポジトリに分離されました。Glyphicons のサイトから Bootstrap 3 用のアイコン集をダウンロードしてくれとありますので、まずは Glyphicon のサイトに行きます。
タイトル下の真ん中あたりにある “Download from GitHub” ボタンをクリックしてダウンロードしましょう。
ダウンロードした zip を解凍するとたくさんファイルが出てきますが、必要な物は fonts フォルダと css フォルダの bootstrap-glyphicons.css だけです。
サーバへのアップロード
これらのファイルを WordPress がインストールされているサーバに配置します。FTP クライアント等を使って普段自分が WordPress をインストールしているフォルダに bootstrap3 というフォルダ（名前はなんでもいいです） を作成し、その中に css と js フォルダをアップロードします。
また、アイコンリソースをダウンロードした場合には、fonts フォルダを bootstrap3 フォルダの下に、bootstrap-glyphicons.css は css フォルダにコピーして統合します。
僕の場合はこんな感じです。
WordPress の投稿で使う
css のロード
投稿の先頭におもむろに次の2行（アイコンを使わない場合には最初の1行だけ）を記入します。
|
1 2 |
<link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap3/css/bootstrap-glyphicons.css" rel="stylesheet"> |
表を使ってみる
Bootstrap 3 のドキュメントにある表のサンプルを試してみます。
基本的な表
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> |
結果
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
アクセントをつけた表
tr タグ、td タグに active, success, warning, danger のクラスを付けると対応する色がつきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>2</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <td>3</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>4</td> <td>Column content</td> <td class="danger">Column content</td> <td>Column content</td> </tr> <tr class="warning"> <td>5</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>6</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <td>7</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> |
結果
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
ボタンを使ってみる
基本ボタン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Standard gray button with gradient --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button> |
結果
アイコン付きボタン
glyphicons のアイコンを使うことでボタンにアイコンを付けることが可能です。
|
1 |
<button class="btn btn-primary" type="button" onclick="location.href='index.html'"><i class="glyphicon glyphicon-home"></i> Home</button> |
結果
アイコンを使ってみる
気をとりなおして本文中などにアイコンを表示する方法。表の中でも使えます。前回の記事でもこの方法でアイコンを紹介しています。アイコンの種類もそちらを参考にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
文章内で表示してみる：つのだ<i class="glyphicon glyphicon-star-empty"></i>ひろ, 音のいい<i class="glyphicon glyphicon-headphones"></i> 表に表示してみる： <table class="table"> <thead> <tr><th>アイコン</th><th>名前</th></tr> </thead> <tbody> <tr><td><i class="glyphicon glyphicon-glass"></i></td><td>glyphicon-glass</td></tr> <tr class="success"><td><i class="glyphicon glyphicon-music"></i></td><td>glyphicon-music</td></tr> <tr><td><i class="glyphicon glyphicon-search"></i></td><td>glyphicon-search</td></tr> <tr><td><i class="glyphicon glyphicon-envelope"></i></td><td>glyphicon-envelope</td></tr> <tr><td><i class="glyphicon glyphicon-heart"></i></td><td>glyphicon-heart</td></tr> <tr class="danger"><td><i class="glyphicon glyphicon-star"></i></td><td>glyphicon-star</td></tr> <tr><td><i class="glyphicon glyphicon-star-empty"></i></td><td>glyphicon-star-empty</td></tr> <tr><td><i class="glyphicon glyphicon-user"></i></td><td>glyphicon-user</td></tr> <tr><td><i class="glyphicon glyphicon-film"></i></td><td>glyphicon-film</td></tr> <tr><td><i class="glyphicon glyphicon-th-large"></i></td><td>glyphicon-th-large</td></tr> </tbody> </table> |
結果
文章内で表示してみる：つのだひろ, 音のいい
表に表示してみる：
| アイコン | 名前 |
|---|---|
| glyphicon-glass | |
| glyphicon-music | |
| glyphicon-search | |
| glyphicon-envelope | |
| glyphicon-heart | |
| glyphicon-star | |
| glyphicon-star-empty | |
| glyphicon-user | |
| glyphicon-film | |
| glyphicon-th-large |
ラベルを使ってみる
|
1 2 3 4 5 6 |
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> |
結果
Default
Primary
Success
Info
Warning
Danger
バッジを使ってみる
|
1 |
Inbox <span class="badge">42</span> |
結果
Inbox 42
バッジは静的に表示してもあまり意味は無いかも。サーバの PHP と組み合わせて動的なコンテンツにするなど工夫するとかっこいいボタンやバッジを使ったページにできそうです。
![[WordPress 高速化計画 Vol.5] W3 Total Cache, Smush.it プラグインで高速化！](https://blog.miyadi.net/wp-content/uploads/2013/11/meter_Icon2-150x150.png)
![[まとめ] WordPress のまるごと引っ越し方法！](https://blog.miyadi.net/wp-content/uploads/2013/11/moving_wp-150x150.png)
参考になりました。ありがとうございます。
どういたしまして。僕も手探りでやっています。