WordPressテーマFoundation for WordPress

の紹介

2013.7.13WordBench神戸 上村崇 @uemera

最近のオレ

PHPフレームワーク(FuelPHP)

サーバーインフラ(Webサーバ構築など)

WordPress(プラグイン作成とか

プログラミングサイドの仕事)

JavaScript、jQuery

勉強会準備(WordBench等)

ネットショップ支援(CS-Cartアドオン作成、カスタマイズ)

@uemera

uemura

フリーランスのシステムエンジニアです。西宮在住。

上村 崇

http://fwp.drewsymo.com/

これがFoundation for WordPressのサイト

価格 無料 レスポンシブ対応 ○デザイン ★★★☆☆ サポート有無 ✕

難易度 ★★★★☆ 対応ブラウザ IE9以上

機能 ★★★★☆ 用途 ビジネス

SEO対策 ★★☆☆☆ WPバージョン 3.4以上

Foundation for WordPresshttps://github.com/drewsymo/Foundation

CSSフレームワークFoundationを使ったテーマ

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アプリケーション向けとすると、　FoundationはCSSメインなので、Webアプリよりも記事　主体のページ向け。・divやh1など、よく使うタグに対応したCSSのセットが　　既に組み込まれているので、使用者がゼロからCSSを書　く必要が無い。・jquery.jsではなくzepto.js採用でモバイルにフォーカス

<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:  注意をうながす赤色

クラス名の解説

<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>

テーブルの例特別な設定をしなくても、それなりなデザインになります。

表示例

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

WordPress

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

Foundation for Wordpress

ZURB’s Foundation Framework

テーマファイルはシンプルな作りになっています。これは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[/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>

ショートコードを使わないで組む場合

ショートコードで組む場合

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

まとめ

Foundationのお作法を知っている人にとっては使いやすいと思いますが、初めての人にはとっつきにくいと思います。

ボタンやフォームのレイアウトも簡単につくれますが、記事を書くだけの人にとっては、そういったコントロールを使うことは無いため、オーバースペックなテーマだと思います。

ボタンやフォームを多く使うサイトでは便利に使えると思います。

その他気になるテーマ

Pinboardhttp://themify.me/themes/pinboard

価格 $39 レスポンシブ対応 ○デザイン ★★★★★ サポート有無 ○難易度 ? 対応ブラウザ ?

機能 ? 用途 写真画像サイト

SEO対策 ? WPバージョン ?

Pinboardhttp://themify.me/themes/pinboard

・Pinterest風のレイアウト・マルチサイト対応

Gridlyhttp://www.eleventhemes.com/gridly-theme/

価格 無料 レスポンシブ対応 ○デザイン ★★★★★ サポート有無 ✕

難易度 ? 対応ブラウザ ?

機能 ? 用途 写真画像サイト

SEO対策 ? WPバージョン 3.0以上

Gridlyhttp://www.eleventhemes.com/gridly-theme/

・jQuery Masonry でPinterest風の見た目

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

価格 $35 レスポンシブ対応 ○デザイン ★★★★★ サポート有無 ?

難易度 ? 対応ブラウザ ?

機能 ? 用途 写真、ポートフォリオ

SEO対策 ? WPバージョン 3.0以上

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

・ポートフォリオに向いたサイト・PSDファイル付き・Ajax Contact Form

BizVectorhttp://bizvektor.com/

価格 無料 レスポンシブ対応 ○デザイン ★★★★★ サポート有無 ?

難易度 ★★☆☆☆ 対応ブラウザ ?

機能 ★★★★★ 用途 ビジネス

SEO対策 ★★★★☆ WPバージョン ?

BizVectorhttp://bizvektor.com/

・9種類の色から選べる・SNS連携あり・htmlやcssの知識が無くても管理画面からの設定だけでクオリティの高いサイトが作れる

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

あらゆる業種に対応、企業サイト向けWordPressテーマ素材まとめPhotoshopVIPhttp://photoshopvip.net/archives/50638

ミニマルでレスポンシブデザインに対応したフリーのWordPressテーマ - W3Qhttp://w3q.jp/t/3749

僕が知る限りのWordpressテーマディレクトリサイトの数々を一挙ご紹介 バンクーバーのうぇぶ屋http://webya.opdsgn.com/introduceweb/wpthemesdirectory/

20 Stunning Responsive WordPress Themeshttp://mashable.com/2013/03/08/responsive-wordpress-themes/?utm_medium=feed&utm_source=feedburner&utm_campaign=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

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