WordPress で Foundation


![FoundationPress](http://ja.katzueno.com/files/2014/06/foundationppress-640x460.jpg)

この度、[自分のブログサイト](http://katzueno.com)のデザインを一新。この機会を利用して、 [Foundation](http://foundation.zurb.com/) というCSSフレームワークを勉強するために、[FoundationPress](http://foundationpress.olefredrik.com/) という無料の WordPress テーマをダウンロードし、計5時間ぐらいで実装することが出来ました。今回はその内容を紹介します。

# おことわり

**注意：ここの記事の内容は、[ブログ記事](http://ja.katzueno.com/2014/06/3155/)のコピーです。修正などがあればブログ記事の更新を行います。ここの記事は情報が古くなっている可能性があることをご了承ください。**

サイトを作るのは WordPress よりも [concrete5](http://concrete5-japan.org) の方が断然速くできますが、ブログのように、フォーマットが決まっている時は WordPress が一番。


# 準備

*ここの文章は [FoundationPress の GitHub上 Readme.md](https://github.com/olefredrik/foundationpress) の内容の翻訳に解説を加えたものです。*

今回は Mac を使い、Git や Grunt を使用してインストールを行いました。また FoundationPress では、Sass を使用しています。


- Git のインストール
- [Node.js](http://nodejs.org/) のインストール
    - [Node.js](http://nodejs.org/)上のインストーラーをDL
- [Grunt](http://gruntjs.com/) のインストール
    - Mac のターミナルで `sudo npm install -g grunt-cli`
- [Bower](http://bower.io/) のインストール
    - Mac のターミナルで `sudo npm install -g bower`


# インストール方法

Mac のターミナルでの解説をします。

1. Git からクローン
    - `cd [WordPress テーマフォルダ]`
    - `git clone git@github.com:olefredrik/FoundationPress.git`
    - `mv FoundationPress [任意の名前に変更]`

2. Grunt等をインストール
    - `cd [さきほど決めたフォルダ名]` 
    - `npm install && bower install`

3. サーバー等にUP

# 修正する場合

CSSファイルを修正したい場合は、grunt を走らせながら修正を行う必要があります。

1. ターミナルを起動
2. 'cd [WordPressのテーマフォルダ]'
3. 'grunt'
4. Grunt が起動、待機状態に。修正作業中はそのターミナル画面を閉じずに作業します
5. 作業が終了したら`ctrl+c`を押して終了
6. 変更し、コンパイルされた CSS や JSをサーバーにUP

となります。

翻訳以上

# 子テーマとして変更させる

私の場合は、[自分のブログ](http://katzueno.com/)で WordPress の子テーマ機能を使っています。元々の FoundationPress のフォルダを `foundation`として使い、英語を `foundation-en`として、日本語を `foundation-ja`として使用しています。

* 子テーマを使う場合でも親テーマにて、Grunt までのインストール作業は必要です。 *

1. 元々の FoundationPress テーマを`foundation`として WordPress にアップロード
2. 子テーマ用のフォルダー 例`foundation-ja`を作る
3. 子テーマの中に `style.css`を作成する

下記のように作成します。

```CSS:style.css
/*
Theme Name:         FoundationPress JA
Theme URI:          https://github.com/olefredrik/foundationpress.git
Description:        FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb
Version:            1.0.0
Author:             Ole Fredrik Lie
Author URI:         http://olefredrik.com/
Template:           foundation

License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/
```


上記CSSファイルをコピーして、`Template:` のところに、親テーマのフォルダ名 `foundation`をいれます。それ以外は好きに修正してもいいですが、`Theme Name:`のところは、管理画面にでてくるので、わかりやすいように名前を変更しましょう。

## 子テーマでCSSを変更する時の注意

既に FoundationPress に[プルリクエスト](https://github.com/olefredrik/FoundationPress/pull/63)を送ったのですが・・・。

現在 FoundationPress では、子テーマでの CSS を読み込まないようになっています。もしくは敢えて読み込ませないようにしているかもしれません。

子テーマで CSS を変えたい場合。また favicon を子テーマのものに使いたい場合に、下記のような修正が必要です。

1. '/css/'フォルダを子テーマにも複製
2. '/assets/'フォルダを子テーマフォルダーにも複製
3. `header.php` を親テーマから子テーマへ複製
4. `header.php` 中の `get_template_directory_uri()` を `get_stylesheet_directory_uri()`に変更

例

```PHP:変更前header.php元
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/app.css" />
```

を

```PHP:変更後header.php
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/app.css" />
```

この下に、favicon や apple-touch-icon のURLも親テーマURLを読みに行くように設定されているので、必要に応じて変えてください。

尚、favicon や css の変更をする予定がない人はこの修正は必要ありません。

# 日本語フォントへの変更

海外のテーマは、やはり英語ベースで作られているので、ちょっと読みにくいです。そのために、日本語の、Sass ファイルをちょっと改造してみましょう。

## Grunt の操作 (復習)

さきほどの復習ですが、Sass の変更を行う時は Grunt を走らせることが必要です。

1. ターミナルを起動
2. 'cd [WordPressのテーマフォルダ]'
3. 'grunt'
4. Grunt が起動、待機状態に。修正作業中はそのターミナル画面を閉じずに作業します
5. 作業が終了したら`ctrl+c`を押して終了
6. 変更し、コンパイルされた CSS や JSをサーバーにUP

## 日本語フォントに変更する方法

子テーマを使わないで、直接親テーマを変更する方法です。

1. `/sass/config/_settings.scss` を開く
    - 24行目:`// ` を取り除いて `$base-line-height: 160%;` に。日本語は行間をより広く開けるほうが好ましいです
    - 44行目: `// ` を取り除いて `$body-font-family: Meiryo,'メイリオ','Lucida Grande','Hiragino Kaku Gothic ProN',sans-serif;` に。日本語フォントを指定します。
2. Sass ファイルを保存
3. ターミナルで、`/css/app.css` が自動更新されたかを確認
4. `/css/app.css` をサーバーにUP

わかりづらい方には、'_setting.scss' の[ファイルを Gist にそのままアップしましたので、こちら](https://gist.github.com/katzueno/829383c296abb852f9ae)も参考に


## 日本語フォント (子テーマを使っている場合)

子テーマを使っている場合、下記の手順を追加で行う必要があります

1. ファイルやテーマを子テーマにコピー
    - `bower_components` フォルダと中のファイル
    - `bower.json`
    - `css` フォルダと中のファイル
    - `Gruntfile.js`
    - `js`
    - `node_modules`
    - `package.json`
    - `scss`
2. Grunt等をインストール
    - `cd [さきほど決めたフォルダ名]` 
    - `npm install && bower install`
3. `/sass/config/_settings.scss` を開く
    - 24行目:`// ` を取り除いて `$base-line-height: 160%;` に。日本語は行間をより広く開けるほうが好ましいです
    - 44行目: `// ` を取り除いて `$body-font-family: Meiryo,'メイリオ','Lucida Grande','Hiragino Kaku Gothic ProN',sans-serif;` に。日本語フォントを指定します。
4. Sass ファイルを保存
5. ターミナルで、`/css/app.css` が自動更新されたかを確認
6. `/css/app.css` をサーバーにUP



# 最後に

いやー。本当にカンタンに、レスポンシブなサイトを作って、しかもカスタマイズもできるようになるなんて、いいですね〜。

それでは、みなさん、快適な Foundation を！

ちなみに、 [concrete5](http://concrete5-japan.org) の仲間と執筆した、「[concrete5 公式活用ガイドブック](http://www.amazon.co.jp/gp/product/4839943842/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4839943842&linkCode=as2&tag=katz515-22)」のサンプルテーマは Foundation を使っています！サンプルデータは[無料でダウンロード可能](http://book.concrete5-japan.org/)です！(￣ー￣)ﾆﾔﾘ