WordPressテーマ
Foundation for WordPress
の紹介
2013.7.13
WordBench神戸 上村崇
@uemera
最近のオレ
PHPフレームワーク
(FuelPHP)
サーバーインフラ
(Webサーバ構築など)
WordPress
(プラグイン作成とか
プログラミングサイドの仕事)
JavaScript、jQuery
勉強会準備
(WordBench等)
...
http://fwp.drewsymo.com/
これがFoundation for WordPressのサイト
価格 無料 レスポンシブ対応 ○
デザイン ★★★☆☆ サポート有無 ✕
難易度 ★★★★☆ 対応ブラウザ IE9以上
機能 ★★★★☆ 用途 ビジネス
SEO対策 ★★☆☆☆ WPバージョン 3.4以上
Foundation for Word...
Foundation for WordPressの特徴
・ZURB s Foundation Framework v4. をベースにしている。
・WordPress公式には掲載されていない。
・Foundation short codesが用意...
そもそも
ZURB s Foundation Framework
てなに?
http://foundation.zurb.com/
ZURB Foundation サイト
ZURB s Foundation Framework v4 とは
・CSSフレームワークの一種
・Twitter Bootstrapみたいなもの。
・Twitter BootstrapがWebアプリケーション向けとすると、
 Foundati...
<ul	
  class="button-­‐group	
  round	
  even-­‐3">
	
  	
  <li><a	
  href="#"	
  class="button	
  alert">ボタン1</a></li>
	
...
<table>
	
  	
  <thead>
	
  	
  	
  	
  <tr>
	
  	
  	
  	
  	
  	
  <th	
  width="200">ヘッダ1</th>
	
  	
  	
  	
  	
  	
  ...
マニュアルはこちら(英語)
http://foundation.zurb.com/docs/
WordPress
ZURB s Foundation Frameworkの仕組みを
WordPressテーマとして扱えるようにしたのが
Foundation for Wordpressです。
Foundation for Wordpress
...
テーマファイルはシンプルな作りになっています。
これはindex.phpの例
Foundation for WordPress テーマでは、
記事中にhtmlコードを書くと、Foundationの
レイアウトがそのまま適用されます。
[button]ボタン[/button]
[button	
  type="round	
  alert"]ボタン[/button]
WordPressの記事中でショートコードも
使えます。
[row][column	
  span="large-­‐4"]カラム1[/column][column	
  span="large-­‐4"]カラム
2[/column][column	
  span="large-­‐4"]カラム3[/...
ショートコードリファレンス
http://fwp.drewsymo.com/shortcodes/
まとめ
Foundationのお作法を知っている人にとっては使いやすいと
思いますが、初めての人にはとっつきにくいと思います。
ボタンやフォームのレイアウトも簡単につくれますが、記事
を書くだけの人にとっては、そういったコントロールを使う
こと...
その他気になるテーマ
Pinboard
http://themify.me/themes/pinboard
価格 $39 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ○
難易度 ? 対応ブラウザ ?
機能 ? 用途 写真画像サイト
SEO対策 ? WPバージョン ?
Pinboard
http://themify.me/themes/p...
Gridly
http://www.eleventhemes.com/gridly-theme/
価格 無料 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ✕
難易度 ? 対応ブラウザ ?
機能 ? 用途 写真画像サイト
SEO対策 ? WPバージョン 3.0以上
Gridly
http://www.eleventhemes.c...
SELFLESS
http://themeforest.net/item/selfless-a-one-page-wordpress-
vcard-theme/3835620?ref=showhey0705
価格 $35 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ?
難易度 ? 対応ブラウザ ?
機能 ? 用途 写真、ポートフォリオ
SEO対策 ? WPバージョン 3.0以上
SELFLESS
http://themeforest....
BizVector
http://bizvektor.com/
価格 無料 レスポンシブ対応 ○
デザイン ★★★★★ サポート有無 ?
難易度 ★★☆☆☆ 対応ブラウザ ?
機能 ★★★★★ 用途 ビジネス
SEO対策 ★★★★☆ WPバージョン ?
BizVector
http://bizvektor....
テーマ紹介に関連して
最近ブックマークしたページ
あらゆる業種に対応、企業サイト向けWordPress
テーマ素材まとめPhotoshopVIP
http://photoshopvip.net/archives/50638
ミニマルでレスポンシブデザインに対応した
フリーのWordPressテ...
20 Stunning Responsive WordPress Themes
http://mashable.com/2013/03/08/responsive-
wordpress-themes/?
utm_medium=feed&utm_...
ありがとうございました。
@uemera uemura
Upcoming SlideShare
Loading in...5
×

WordPressテーマ Foundation for WordPress の紹介

3,577

Published on

Foundation for WordPressは、CSSフレームワークであるFoundationをWordPressテーマ化したものです。Foundationのいいところをそのままに、WordPressで簡単にテーマとして扱えるようになっています。

WordPressテーマ Foundation for WordPress の紹介

  1. 1. WordPressテーマ Foundation for WordPress の紹介 2013.7.13 WordBench神戸 上村崇 @uemera
  2. 2. 最近のオレ PHPフレームワーク (FuelPHP) サーバーインフラ (Webサーバ構築など) WordPress (プラグイン作成とか プログラミングサイドの仕事) JavaScript、jQuery 勉強会準備 (WordBench等) ネットショップ支援 (CS-Cartアドオン作成、カスタマイズ) @uemera uemura フリーランスのシステムエンジニアです。西宮在住。 上村 崇
  3. 3. http://fwp.drewsymo.com/ これがFoundation for WordPressのサイト
  4. 4. 価格 無料 レスポンシブ対応 ○ デザイン ★★★☆☆ サポート有無 ✕ 難易度 ★★★★☆ 対応ブラウザ IE9以上 機能 ★★★★☆ 用途 ビジネス SEO対策 ★★☆☆☆ WPバージョン 3.4以上 Foundation for WordPress https://github.com/drewsymo/Foundation CSSフレームワークFoundationを使ったテーマ
  5. 5. Foundation for WordPressの特徴 ・ZURB s Foundation Framework v4. をベースにしている。 ・WordPress公式には掲載されていない。 ・Foundation short codesが用意されている。 ・無料 ・レスポンシブ対応。 ・子テーマ対応。 ・ボタンやフォーム、ブロック表示などは多様な表現が  できるが、ただ単にブログを書くだけのサイトでは使  わない機能が多いので不向きかも。
  6. 6. そもそも ZURB s Foundation Framework てなに?
  7. 7. http://foundation.zurb.com/ ZURB Foundation サイト
  8. 8. ZURB s Foundation Framework v4 とは ・CSSフレームワークの一種 ・Twitter Bootstrapみたいなもの。 ・Twitter BootstrapがWebアプリケーション向けとすると、  FoundationはCSSメインなので、Webアプリよりも記事  主体のページ向け。 ・divやh1など、よく使うタグに対応したCSSのセットが   既に組み込まれているので、使用者がゼロからCSSを書  く必要が無い。 ・jquery.jsではなくzepto.js採用でモバイルにフォーカス
  9. 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. 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. 11. マニュアルはこちら(英語) http://foundation.zurb.com/docs/
  12. 12. WordPress ZURB s Foundation Frameworkの仕組みを WordPressテーマとして扱えるようにしたのが Foundation for Wordpressです。 Foundation for Wordpress ZURB s Foundation Framework
  13. 13. テーマファイルはシンプルな作りになっています。 これはindex.phpの例
  14. 14. Foundation for WordPress テーマでは、 記事中にhtmlコードを書くと、Foundationの レイアウトがそのまま適用されます。
  15. 15. [button]ボタン[/button] [button  type="round  alert"]ボタン[/button] WordPressの記事中でショートコードも 使えます。
  16. 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. 17. ショートコードリファレンス http://fwp.drewsymo.com/shortcodes/
  18. 18. まとめ Foundationのお作法を知っている人にとっては使いやすいと 思いますが、初めての人にはとっつきにくいと思います。 ボタンやフォームのレイアウトも簡単につくれますが、記事 を書くだけの人にとっては、そういったコントロールを使う ことは無いため、オーバースペックなテーマだと思います。 ボタンやフォームを多く使うサイトでは便利に使えると思い ます。
  19. 19. その他気になるテーマ
  20. 20. Pinboard http://themify.me/themes/pinboard
  21. 21. 価格 $39 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ○ 難易度 ? 対応ブラウザ ? 機能 ? 用途 写真画像サイト SEO対策 ? WPバージョン ? Pinboard http://themify.me/themes/pinboard ・Pinterest風のレイアウト ・マルチサイト対応
  22. 22. Gridly http://www.eleventhemes.com/gridly-theme/
  23. 23. 価格 無料 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ✕ 難易度 ? 対応ブラウザ ? 機能 ? 用途 写真画像サイト SEO対策 ? WPバージョン 3.0以上 Gridly http://www.eleventhemes.com/gridly-theme/ ・jQuery Masonry でPinterest風の見た目
  24. 24. SELFLESS http://themeforest.net/item/selfless-a-one-page-wordpress- vcard-theme/3835620?ref=showhey0705
  25. 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. 26. BizVector http://bizvektor.com/
  27. 27. 価格 無料 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ? 難易度 ★★☆☆☆ 対応ブラウザ ? 機能 ★★★★★ 用途 ビジネス SEO対策 ★★★★☆ WPバージョン ? BizVector http://bizvektor.com/ ・9種類の色から選べる ・SNS連携あり ・htmlやcssの知識が無くても管理画面からの設定だけでク オリティの高いサイトが作れる
  28. 28. テーマ紹介に関連して 最近ブックマークしたページ
  29. 29. あらゆる業種に対応、企業サイト向けWordPress テーマ素材まとめPhotoshopVIP http://photoshopvip.net/archives/50638 ミニマルでレスポンシブデザインに対応した フリーのWordPressテーマ - W3Q http://w3q.jp/t/3749 僕が知る限りのWordpressテーマディレクトリサイトの数々を 一挙ご紹介 バンクーバーのうぇぶ屋 http://webya.opdsgn.com/introduceweb/wpthemesdirectory/
  30. 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. 31. ありがとうございました。 @uemera uemura
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×