ぎいちワン|元気をカタチにします|Web 制作・運用 WordPress 教室

WordPress + Underscores + Foundation によるテンプレート制作

このページの内容は2015年10月3日(土)のゆるゆるカフェで行なう講義のレジュメです。後日追記します。[ 2015年10月4日(土)]

Index


1.Foundation 設定
2.WordPress 設定
3.Underscores 設定
4.Foundation を組み込む
5.CSS 調整


*[2015年10月9日]訂正します。

<?php echo get_template_directory_uri(); ?>
*「<」「>」それぞれ半角にしてご利用下さい。

↑ ↑ ↑

<?php bloginfo(‘template_url’); ?>/

1.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 に組み込んでいくことがゴールです。

・ソースコードはイベントのあとに公開をしていきます。

2.WordPress 設定
・「WordPress 4.3.1 をダウンロード」をクリックしてWordPress を設定して下さい。
https://ja.wordpress.org/

*今回の講義ではWordPress のインストールの方法の説明は割愛します。

・ログインをしてダッシュボードを開いて下さい。

・パーマリンク設定を変更します。
ダッシュボード >> 設定 >> パーマリンク設定
ここでは「日付と投稿名」に変更します。

・いったんトップページを表示します。「カスタマイズ」から設定を続けます。

・サイトの基本情報「サイトのタイトル」「キャッチフレーズ」「サイトアイコン」を入力します。

・固定フロントページ「フロントページの表示」にて「固定ページ」をチェックして、「フロントページ」にサンプルページをお選び下さい。

*トップページ用に固定ページを別途作成されても構いません。

・次のプラグインを有効化して下さい。
「WP Multibyte Patch」
ダッシュボード >> プラグイン >> インストール済のプラグイン

・次のプラグインを新規追加して下さい。
「Show Current Template」
ダッシュボード >> プラグイン >> 新規追加

3.Underscores 設定
Underscores のTheme Name 直下「Advanced Options」をクリックして所定の入力を行ない「GENERATE」をクリックして下さい。
http://underscores.me/

・WordPress のスターターテーマ「Underscores」をWordPress に組み込んで、そのシンプルさをご確認下さい。

・今回の教材は「page.php」を開いて「front-page.php」を新規作成下さい。

トップページを開くと、テンプレートに「front-page.php」が使用されていることがご確認頂けるはずです。

各パートのタグに背景色をつけておくとその後の作業がラクになります。

「#header」
「#main」
「#primary」
「#secondary」
「#footer」

*あとで消しますので、それぞれ該当のコードに直接スタイルを当てても構いませんが、style.css にまとめて書けるとあとの管理がラクではあります。

・Underscoresの style.css はバックアップをとり、中のスタイルをいったんすべて削除します。

*INDEXリストだけは残しておいてもいいと思います。後ほど一部を戻す作業が発生することがあります。

4.Foundation を組み込む

Foundation でダウンロードしたフォルダの中の「css」と「js」フォルダを、Underscores のテーマフォルダにコピーします。

*それぞれ「css-found」「js-found」などとしておくと、WordPress のそれと区別をつけられます。サイトによっては Bootstrap も組み込んでいくことがあります。その時には重宝するネーミングとなります。

WordPress のソースコードにFoundation のタグを入れて生きます。

ヘッダー部のコードの取り扱いには注意が必要です。コードの位置はそのまま相対表示できないので、次のテンプレートタグをURLに入れていきます。

<?php echo get_template_directory_uri(); ?>
訂正します。[2015年10月9日]
*「<」「>」それぞれ半角にしてご利用下さい。

↑ ↑ ↑

<?php bloginfo(‘template_url’); ?>/

*見栄えで判断すると、レイアウトの決まっているFoundation のソースコードにWordPress のタグを入れていきたいところです。それでもできないことはありません。(結果は一緒になると思います。)

5.CSS 調整

必要に応じて、Underscores のCSSを一部戻します。
[例]「Skip to content」が表示されています。デフォルトのUnderscores にて、該当のCSSを style.css に戻します。

メニュー(グローバルナビゲーション)部にCSSを当てていきます。オリジナルに制作をしても、別テーマを参考にされるのもいいかと思います。

Underscores から一部復元するファイルは style.css に置き、オリジナルのCSSは style-original.css として、新たにリンクをしておくと、サイトごとにCSSを分けていくなど管理がしやすくなるかも知れません。

以上、講義に向けての覚え書きとさせて頂きます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です