Aug 18 2013

wordpress で Twitter Bootstrap 3 を使う

Version : Twitter Bootstrap 3.0.0, WordPress 3.6
Bootstrap

Twitter Bootstrap 3 はウェブを簡単にカッコイイデザインにするためのフレームワークです。このフレームワークを WordPress でも利用して表やアイコンをかっこよくしてみましょう。
※試していませんが Bootstrap 2 でも同様にできるはずです。


Pocket

Twitter Bootstrap 3 の洗練された表やアイコン、ボタン類を WordPress の中で使えたらいいなと思って使ってみたら問題なく使えたというお話です。実は前回の記事でもアイコンや表の表示に Bootstrap 3 を使っています。

Bootstrap 2 でも同様の考え方でいけるかと思いますが試していません。

 

まずは Twitter Bootstrap 3 のダウンロードサイトから最新版のアーカイブをダウンロードします。
http://getbootstrap.com/
zip ファイルを解凍するとたくさんファイルが展開されますが、この中で実際に必要なファイルは下図のように dist フォルダの下の css フォルダと js フォルダになります。

dist

 

アイコンを使う必要がない場合にはスキップしてください。

Bootstrap 3 からアイコンはパッケージに含まれず別リポジトリに分離されました。Glyphicons のサイトから Bootstrap 3 用のアイコン集をダウンロードしてくれとありますので、まずは Glyphicon のサイトに行きます。

http://glyphicons.getbootstrap.com/

タイトル下の真ん中あたりにある “Download from GitHub” ボタンをクリックしてダウンロードしましょう。
ダウンロードした zip を解凍するとたくさんファイルが出てきますが、必要な物は fonts フォルダと css フォルダの bootstrap-glyphicons.css だけです。
 

これらのファイルを WordPress がインストールされているサーバに配置します。FTP クライアント等を使って普段自分が WordPress をインストールしているフォルダに bootstrap3 というフォルダ(名前はなんでもいいです) を作成し、その中に cssjs フォルダをアップロードします。
また、アイコンリソースをダウンロードした場合には、fonts フォルダを bootstrap3 フォルダの下に、bootstrap-glyphicons.csscss フォルダにコピーして統合します。

僕の場合はこんな感じです。
MIYADi.net__ロリポップ!__-_miyadi.net
 

ビジュアルエディタを使うと Bootstrap 用のタグが消去されてしまう場合があります
タグによってはビジュアルエディタが勝手にタグを消去してしまう場合があります。若干面倒ですが、テキストモードで執筆するようにしましょう。コツとしては、まず文章全体をビジュアルエディタで作成した後、Bootstrap を使う部分だけテキストエディタで追記するのがよいのではないでしょうか。この場合もビジュアルとテキストを切り替えるとタグが消えてしまうので注意デス!

投稿の先頭におもむろに次の2行(アイコンを使わない場合には最初の1行だけ)を記入します。

 

Bootstrap 3 のドキュメントにある表のサンプルを試してみます。

結果

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

 

tr タグ、td タグに active, success, warning, danger のクラスを付けると対応する色がつきます。

結果

# 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

 

結果

 

glyphicons のアイコンを使うことでボタンにアイコンを付けることが可能です。

結果

ありゃ、ボタン押してもリンクに飛ばないや、、、

 

気をとりなおして本文中などにアイコンを表示する方法。表の中でも使えます。前回の記事でもこの方法でアイコンを紹介しています。アイコンの種類もそちらを参考にしてください。

結果
文章内で表示してみる:つのだひろ, 音のいい
表に表示してみる:

アイコン 名前
glyphicon-glass
glyphicon-music
glyphicon-search
glyphicon-envelope
glyphicon-heart
glyphicon-star
glyphicon-star-empty
glyphicon-user
glyphicon-film
glyphicon-th-large

 

結果
Default
Primary
Success
Info
Warning
Danger

 

結果
Inbox 42

 
バッジは静的に表示してもあまり意味は無いかも。サーバの PHP と組み合わせて動的なコンテンツにするなど工夫するとかっこいいボタンやバッジを使ったページにできそうです。

Pocket

Comments
  1. 4年 ago
    • 4年 ago

コメントを残す