1. WordPressテーマ
Foundation for WordPress
の紹介
2013.7.13
WordBench神戸 上村崇
@uemera

2. 最近のオレ
PHPフレームワーク
(FuelPHP)
サーバーインフラ
(Webサーバ構築など)
WordPress
(プラグイン作成とか
プログラミングサイドの仕事)
JavaScript、jQuery
勉強会準備
(WordBench等)
ネットショップ支援
(CS-Cartアドオン作成、カスタマイズ)
@uemera
uemura
フリーランスのシステムエンジニアです。西宮在住。
上村 崇

3. http://fwp.drewsymo.com/
これがFoundation for WordPressのサイト

4. 価格 無料 レスポンシブ対応 ○
デザイン ★★★☆☆ サポート有無 ✕
難易度 ★★★★☆ 対応ブラウザ IE9以上
機能 ★★★★☆ 用途 ビジネス
SEO対策 ★★☆☆☆ WPバージョン 3.4以上
Foundation for WordPress
https://github.com/drewsymo/Foundation
CSSフレームワークFoundationを使ったテーマ

5. Foundation for WordPressの特徴
・ZURB s Foundation Framework v4. をベースにしている。
・WordPress公式には掲載されていない。
・Foundation short codesが用意されている。
・無料
・レスポンシブ対応。
・子テーマ対応。
・ボタンやフォーム、ブロック表示などは多様な表現が
できるが、ただ単にブログを書くだけのサイトでは使
わない機能が多いので不向きかも。

6. そもそも
ZURB s Foundation Framework
てなに?

7. http://foundation.zurb.com/
ZURB Foundation サイト

8. ZURB s Foundation Framework v4 とは
・CSSフレームワークの一種
・Twitter Bootstrapみたいなもの。
・Twitter BootstrapがWebアプリケーション向けとすると、
FoundationはCSSメインなので、Webアプリよりも記事
主体のページ向け。
・divやh1など、よく使うタグに対応したCSSのセットが
既に組み込まれているので、使用者がゼロからCSSを書
く必要が無い。
・jquery.jsではなくzepto.js採用でモバイルにフォーカス

9. <ul
class="button-­‐group
round
even-­‐3">
<li><a
href="#"
class="button
alert">ボタン1</a></li>
<li><a
href="#"
class="button
alert">ボタン2</a></li>
<li><a
href="#"
class="button
alert">ボタン3</a></li>
</ul>
例えばこういうボタンがすぐに作れます。
round
:
端っこを丸くする
button:
ボタンを作成
alert:
注意をうながす赤色
クラス名の解説

10. <table>
<thead>
<tr>
<th
width="200">ヘッダ1</th>
<th
width="150">ヘッダ2</th>
</tr>
</thead>
<tbody>
<tr>
<td>コンテンツ11</td>
<td>コンテンツ12</td>
</tr>
<tr>
<td>コンテンツ21</td>
<td>コンテンツ22</td>
</tr>
<tr>
<td>コンテンツ31</td>
<td>コンテンツ32</td>
</tr>
</tbody>
</table>
テーブルの例
特別な設定をしなくても、
それなりなデザインになります。
表示例

11. マニュアルはこちら(英語)
http://foundation.zurb.com/docs/

12. WordPress
ZURB s Foundation Frameworkの仕組みを
WordPressテーマとして扱えるようにしたのが
Foundation for Wordpressです。
Foundation for Wordpress
ZURB s Foundation Framework

13. テーマファイルはシンプルな作りになっています。
これはindex.phpの例

14. Foundation for WordPress テーマでは、
記事中にhtmlコードを書くと、Foundationの
レイアウトがそのまま適用されます。

15. [button]ボタン[/button]
[button
type="round
alert"]ボタン[/button]
WordPressの記事中でショートコードも
使えます。

16. [row][column
span="large-­‐4"]カラム1[/column][column
span="large-­‐4"]カラム
2[/column][column
span="large-­‐4"]カラム3[/column][/row]
段組みもショートコードでできます。
ただし、ショートコードは、途中で改行を入れると思ったような表示にならないこと
があるので1行で書かなければなりません。少し使いにくいです。
<div
class="row">
<div
class="large-­‐4
columns">カラム1</div>
<div
class="large-­‐4
columns">カラム2</div>
<div
class="large-­‐4
columns">カラム3</div>
</div>
ショートコードを使わないで組む場合
ショートコードで組む場合

17. ショートコードリファレンス
http://fwp.drewsymo.com/shortcodes/

18. まとめ
Foundationのお作法を知っている人にとっては使いやすいと
思いますが、初めての人にはとっつきにくいと思います。
ボタンやフォームのレイアウトも簡単につくれますが、記事
を書くだけの人にとっては、そういったコントロールを使う
ことは無いため、オーバースペックなテーマだと思います。
ボタンやフォームを多く使うサイトでは便利に使えると思い
ます。

19. その他気になるテーマ

20. Pinboard
http://themify.me/themes/pinboard

21. 価格 $39 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ○
難易度 ? 対応ブラウザ ?
機能 ? 用途 写真画像サイト
SEO対策 ? WPバージョン ?
Pinboard
http://themify.me/themes/pinboard
・Pinterest風のレイアウト
・マルチサイト対応

22. Gridly
http://www.eleventhemes.com/gridly-theme/

23. 価格 無料 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ✕
難易度 ? 対応ブラウザ ?
機能 ? 用途 写真画像サイト
SEO対策 ? WPバージョン 3.0以上
Gridly
http://www.eleventhemes.com/gridly-theme/
・jQuery Masonry でPinterest風の見た目

24. SELFLESS
http://themeforest.net/item/selfless-a-one-page-wordpress-
vcard-theme/3835620?ref=showhey0705

25. 価格 $35 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ?
難易度 ? 対応ブラウザ ?
機能 ? 用途 写真、ポートフォリオ
SEO対策 ? WPバージョン 3.0以上
SELFLESS
http://themeforest.net/item/selfless-a-one-page-wordpress-vcard-theme/3835620?ref=showhey0705
・ポートフォリオに向いたサイト
・PSDファイル付き
・Ajax Contact Form

26. BizVector
http://bizvektor.com/

27. 価格 無料 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ?
難易度 ★★☆☆☆ 対応ブラウザ ?
機能 ★★★★★ 用途 ビジネス
SEO対策 ★★★★☆ WPバージョン ?
BizVector
http://bizvektor.com/
・9種類の色から選べる
・SNS連携あり
・htmlやcssの知識が無くても管理画面からの設定だけでク
オリティの高いサイトが作れる

28. テーマ紹介に関連して
最近ブックマークしたページ

29. あらゆる業種に対応、企業サイト向けWordPress
テーマ素材まとめPhotoshopVIP
http://photoshopvip.net/archives/50638
ミニマルでレスポンシブデザインに対応した
フリーのWordPressテーマ - W3Q
http://w3q.jp/t/3749
僕が知る限りのWordpressテーマディレクトリサイトの数々を
一挙ご紹介 バンクーバーのうぇぶ屋
http://webya.opdsgn.com/introduceweb/wpthemesdirectory/

30. 20 Stunning Responsive WordPress Themes
http://mashable.com/2013/03/08/responsive-
wordpress-themes/?
utm_medium=feed&utm_source=feedburner&utm_cam
paign=Feed%3A+Mashable+%28Mashable%29
【レスポンシブ対応！】基本最低限、カスタマイズするだけ
の無料wordpressテンプレート「bee-responsive1.0」 ¦
バニデザノート
http://vanidesign.blog.fc2.com/blog-entry-75.html
クールデザイン美、WordPressプレミアムテーマ素材30個
まとめ 2013年2月度PhotoshopVIP ¦
http://photoshopvip.net/archives/45002

31. ありがとうございました。
@uemera uemura