このページの内容は2015年10月３日（土）のゆるゆるカフェで行なう講義のレジュメです。後日追記します。[ 2015年10月４日（土）]
Index
１．Foundation 設定
２．WordPress 設定
３．Underscores 設定
４．Foundation を組み込む
５．CSS 調整
＊[2015年10月９日]訂正します。
＜?php echo get_template_directory_uri(); ?＞
＊「＜」「＞」それぞれ半角にしてご利用下さい。
↑ ↑ ↑
＜?php bloginfo(‘template_url’); ?＞/
１．Foundation 設定
・「Download Everything 」をクリックして、ダウンロードをして下さい。
http://foundation.zurb.com/develop/download.html
・フォルダの中の index.html を開くと、Foundation の動きが確認取られます。
・ブラウザ幅を縮めて見て下さい。レスポンシブになっています。
・Chorome のデベロッパーツールのデバイスにて、スマートフォン・タブレットを指定して閲覧頂けます。
・ビューポイントの働きはご理解頂けていますか？コードを外されたりしてみて、その見え方の違いを確認して下さい。
・「Media Queries」にてFoundation 全体のレイアウト設計を確認します。サンプルの index.html の設定もご確認下さい。
http://foundation.zurb.com/docs/media-queries.html
・今回の講義はこのレスポンシブなレイアウトをWordPress に組み込んでいくことがゴールです。
・ソースコードはイベントのあとに公開をしていきます。
２．WordPress 設定
・「WordPress 4.3.1 をダウンロード」をクリックしてWordPress を設定して下さい。
＊今回の講義ではWordPress のインストールの方法の説明は割愛します。
・ログインをしてダッシュボードを開いて下さい。
・パーマリンク設定を変更します。
ダッシュボード >> 設定 >> パーマリンク設定
ここでは「日付と投稿名」に変更します。
・いったんトップページを表示します。「カスタマイズ」から設定を続けます。
・サイトの基本情報「サイトのタイトル」「キャッチフレーズ」「サイトアイコン」を入力します。
・固定フロントページ「フロントページの表示」にて「固定ページ」をチェックして、「フロントページ」にサンプルページをお選び下さい。
＊トップページ用に固定ページを別途作成されても構いません。
・次のプラグインを有効化して下さい。
「WP Multibyte Patch」
ダッシュボード >> プラグイン >> インストール済のプラグイン
・次のプラグインを新規追加して下さい。
「Show Current Template」
ダッシュボード >> プラグイン >> 新規追加
３．Underscores 設定
Underscores のTheme Name 直下「Advanced Options」をクリックして所定の入力を行ない「GENERATE」をクリックして下さい。
・WordPress のスターターテーマ「Underscores」をWordPress に組み込んで、そのシンプルさをご確認下さい。
・今回の教材は「page.php」を開いて「front-page.php」を新規作成下さい。
トップページを開くと、テンプレートに「front-page.php」が使用されていることがご確認頂けるはずです。
各パートのタグに背景色をつけておくとその後の作業がラクになります。
「#header」
「#main」
「#primary」
「#secondary」
「#footer」
＊あとで消しますので、それぞれ該当のコードに直接スタイルを当てても構いませんが、style.css にまとめて書けるとあとの管理がラクではあります。
・Underscoresの style.css はバックアップをとり、中のスタイルをいったんすべて削除します。
＊INDEXリストだけは残しておいてもいいと思います。後ほど一部を戻す作業が発生することがあります。
４．Foundation を組み込む
Foundation でダウンロードしたフォルダの中の「css」と「js」フォルダを、Underscores のテーマフォルダにコピーします。
＊それぞれ「css-found」「js-found」などとしておくと、WordPress のそれと区別をつけられます。サイトによっては Bootstrap も組み込んでいくことがあります。その時には重宝するネーミングとなります。
WordPress のソースコードにFoundation のタグを入れて生きます。
ヘッダー部のコードの取り扱いには注意が必要です。コードの位置はそのまま相対表示できないので、次のテンプレートタグをURLに入れていきます。
＜?php echo get_template_directory_uri(); ?＞
訂正します。[2015年10月９日]
＊「＜」「＞」それぞれ半角にしてご利用下さい。
↑ ↑ ↑
＜?php bloginfo(‘template_url’); ?＞/
＊見栄えで判断すると、レイアウトの決まっているFoundation のソースコードにWordPress のタグを入れていきたいところです。それでもできないことはありません。（結果は一緒になると思います。）
５．CSS 調整
必要に応じて、Underscores のCSSを一部戻します。
[例]「Skip to content」が表示されています。デフォルトのUnderscores にて、該当のCSSを style.css に戻します。
メニュー（グローバルナビゲーション）部にCSSを当てていきます。オリジナルに制作をしても、別テーマを参考にされるのもいいかと思います。
Underscores から一部復元するファイルは style.css に置き、オリジナルのCSSは style-original.css として、新たにリンクをしておくと、サイトごとにCSSを分けていくなど管理がしやすくなるかも知れません。
以上、講義に向けての覚え書きとさせて頂きます。
