FoundationPress の作りを整理してみた

FoundationPress   the ultimate WordPress starter theme built on Foundation 5 by Zurb.

先日 Foundation 5 をベースにした WordPress テーマ FoundationPress がバージョン 5.4 にアップデートされたの機に、ぼくのタイムラインに FoundationPress が何度か流れてきました。

ちょうど、_s(というより最早 iemoto)をベースに、Foundation 5 を組み込んだオリジナルテーマを作成していたので、参考がてら FoundationPress の作りを整理してみた俺得シリーズがこちらです。

FoundationPress テーマの外観

テーマを有効化します。

FoundationPress PC

こちらが PC など1024pxより大きなサイズで表示した際のフロントページ。

FoundationPress モバイル

こちらは、スマホなど 640px以下のサイズで表示した際のフロントページ。

FoundationPress のテーマカスタマイザー

テーマカスタマイザーで有効になっているのはウィジェットくらいですね。サイドバーとフッターのウィジェットを用いて2カラムのレイアウトになっています。

Foundation スタイル(CSS)の読み込み

FoundationPress は SASS を、さらにそのコンパイルのために Grunt を使っています。

/scss/app.scss で

3つの設定ファイルをインポートしています(余談ですが、config/settings の _setting.scss はありとあらゆる foundation 関連の設定を寄せ集めているようで、純正の Foundation 5 の _setting.scss 以上の分量となっています。正直読む気がおkn)。

さらに Gruntfile.js で

bower_components をインクルードし、/scss/app.scss で

foundation 関連ファイルを読み込んでいます。

Grunt を実行することで、この app.scss をコンパイルし、得られた app.css を

header.php でこのように読み込んでいます。

Foundation JavaScript(JS)の読み込み

まずは

bower でインストールされた js ファイルを js フォルダにすべてコピー。

続いて modernizr.js を圧縮。

最後に foundation の JS と/js/custom/ の中のすべての JS とを連結して app.js として書き出しています。

これを functions.php で読み込んでいます。

というわけで、参考がてら仕組みを整理してみたのですが、header.php の冒頭から頭を抱える感じで、良いテーマだと思うかと聞かれたら、うーん/(-_-)\ってかんじですね。

FoundationPress | the ultimate WordPress starter-theme built on Foundation 5 by Zurb. 

1 thought on “FoundationPress の作りを整理してみた

  1. ピンバック: Foundation for WordPress

フォームは コメントしてほしそうに こちらを見ている……!

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください