Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 の紹介

5,077 views

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

×