PEC/バックナンバー/セミナー/バックナンバー詳細

ワークショップ

WordPress講座シリーズ
～WordPressのオリジナルテーマをFoundationPressで作成しよう！（導入・環境整備編）～

WordPressでオリジナルサイトを作る場合、みなさんはどのような方法で作られてますか？

ゼロからゴリゴリ書いていくのは大変だし、かといって既存のテーマをカスタマイズしていくのも、テーマ毎にクセがあったりして、意外と面倒だったりします。

そこでオススメしたいのが、FoundationPressによるオリジナルテーマ作成です！

FoundationPressとは、CSSフレームワークであるFoundation5を組み込んだWP用テーマです。

CSSフレームワークとして有名なのはBootStrapですが、海外ではFoundation5も負けず劣らずの人気があります。特にシンプルでクセのないデザインが、スターターキット向きで好まれています。

BootStrapをWPのテーマに読み込んで使っている方も多いと思いますが、FoundationPressはFoundation5を組み込んだWPテーマですので、PHPファイルも全部含まれています。

テーマをセットすれば、後はBootStrapと同じように、HTMLタグに特定のclassを指定してカスタマイズしていきます。

もちろんレスポンシブ対応で、BootStrapにないモジュールやコンポーネントの他、アイコンフォントの代表格FontAwesomeなどもセットされており、イマドキのWeb制作に欠かせないアイテム類が手軽に利用できます。

慣れるとテーマ制作がサクサク進み、グッと効率化されること請け合いです！　私も最近の制作はほとんどFoundationPressばかりです(笑)

このようにとても便利なFoundationPressですが、導入の敷居がちょっと高いのが難点です。zipファイルを解凍するだけでは必要なコンポーネントが揃いません。

快適にFoundationPressを使うなら、git、Node.js、Grunt、Bowerなどが必要となります。

いわゆる「黒い画面」ですが、しかしここで諦めてしまうのはもったいなさすぎ！　一度「黒い画面」を通り抜けてしまえば、sassをcssに自動コンパイルしてブラウザも自動リロード、といった快適な制作環境が手に入ります！

ということで今回は「FoundationPress導入・環境整備編」と称して、ハンズオン形式でみなさんにgit、Node.js、Gruntなどをインストールしていただいて環境を整え、最初の障害を乗り越えていただきます(笑)

そしてさらにローカルPCにインストールしたWPにFoundationPressをセットして、FoundationPressでどんな風にオリジナルテーマを作成していくかの概略を解説・ご紹介していきます。

一度環境を整えれば、その後は驚くほどカンタンです。ぜひこの機に「黒い画面」のハードルを越えて、FoundationPressによる快適な制作環境を手にしてください

WordPress講座シリーズ
～WordPressのオリジナルテーマをFoundationPressで作成しよう！（導入・環境整備編）～

田中俊行（Office T2 代表）

株式会社クリーク・アンド・リバー社プロフェッショナルエデュケーションセンター

2015年5月28日（木）

4,000円（税込）

・WordPressでオリジナルサイトを効率的に制作したい方・WPにCSSフレームワークを導入してみたい方・BootStrapじゃないフレームワークを使ってみたい方・「黒い画面」にためらい、抵抗感のある方・SASS、gruntなどを導入してみたい方

· プロフィール

【たなか・としゆき】
Office T2 代表
フリーのWeb制作者・ライター。
広告代理店のWebディレクターや私立大学のサイト保守・運営などを経てフリーに。サイト制作と平行して、Movable Typeに特化したオンラインWebスクールの主催や、ブログ、SEOなどの講師等も歴任。近年は専らWordPressベースのサイトを多く手がける。またビジネス系のWebライターとしても活動。

WPによるサイト構築の手段として、FoundationPressの利用は絶対に知っておいて損のない選択肢だと自信を持ってオススメします。とはいえ、使うには「黒い画面」が必要と聞くと、尻込みしてしまう方も少なくないかもしれません。

今回は特にそんな方に向けて、「黒い画面」をハンズオンで一緒に学ぶことで、とっとと乗り越えてFoundationPressへの道を切り開きましょう！　という内容にしました。たとえFoundaitonPressを使わなくとも、「黒い画面」はもう昨今のWeb制作では欠かせなくなってきていますので、ぜひこの機会に最新のWeb制作環境への「とっかかり」をつかんでください！

※開催1週間前に最低開催人数に達しない場合は、延期または中止とさせていただくことがございます。予めご了承下さい。

· カリキュラム

・ハンズオンでgit, Node.js, Bowerをインストール
・FoundationPressをインストールし、ローカルのWPにセット
・講師によるFoundationPressカスタマイズの概要説明（一部ハンズオンでカスタマイズも体験していただきます）
・質疑応答

・ご自身のパソコン(Win/Mac)を持ち込んでの参加をお勧めします。

・持参できない方は、教室のWindowsノートパソコンもご利用いただけますが、一部実習が体験できない内容もありえますのでご了承下さい。

・PCをお持ち込みの場合は、ローカルにXAMPPとWordPressをインストールして持参ください。

XAMPP
<A Href="https://www.apachefriends.org/jp/index.html">https://www.apachefriends.org/jp/index.html</A>

WP
<A Href="https://ja.wordpress.org/about-wp-ja/">https://ja.wordpress.org/about-wp-ja/</A>

（WordPress講座シリーズ～WordPress インストールとメンテナンス～にご参加いただくと、XAMPPとWPのローカルへのインストールをハンズオンで学習することができます。インストールがまだの方、インストールに不安がある方は、是非こちらの講座もご受講ください。講座詳細はこちら→<A Href="http://bit.ly/1bpzfPB">http://bit.ly/1bpzfPB</A>）
※今回のツール類とFoudationPressのインストールのために、約400MBの空き容量が必要です。

・ブラウザはWindows, Mac共にGoogle Chromeを推奨します。PC持参の方は拡張機能のLiveReloadもインストールされることをお勧めします。
<A Href="http://bit.ly/1Ga8E3k">http://bit.ly/1Ga8E3k</A>

〒105-0004
東京都港区新橋四丁目1番1号新虎通りCORE
株式会社クリーク・アンド・リバー社
プロフェッショナルエデュケーションセンター

TEL:03-4565-9875 E-mail: pec_info@hq.cri.co.jp