WordPress で Foundation

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

おことわり

注意：ここの記事の内容は、ブログ記事のコピーです。修正などがあればブログ記事の更新を行います。ここの記事は情報が古くなっている可能性があることをご了承ください。

サイトを作るのは WordPress よりも concrete5 の方が断然速くできますが、ブログのように、フォーマットが決まっている時は WordPress が一番。

準備

ここの文章は FoundationPress の GitHub上 Readme.md の内容の翻訳に解説を加えたものです。

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

• Git のインストール
• Node.js のインストール
  • Node.js上のインストーラーをDL
• Grunt のインストール
  • Mac のターミナルで sudo npm install -g grunt-cli
• Bower のインストール
  • Mac のターミナルで sudo npm install -g bower

インストール方法

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

1. Git からクローン

   • cd [WordPress テーマフォルダ]
   • git clone [e-mail]: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

となります。

翻訳以上

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

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

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

1. 元々の FoundationPress テーマをfoundationとして WordPress にアップロード
2. 子テーマ用のフォルダー 例foundation-jaを作る
3. 子テーマの中に style.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 にプルリクエストを送ったのですが・・・。

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

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

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

例

変更前header.php元

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/app.css" />

を

変更後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 にそのままアップしましたので、こちらも参考に

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

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

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 の仲間と執筆した、「concrete5 公式活用ガイドブック」のサンプルテーマは Foundation を使っています！サンプルデータは無料でダウンロード可能です！(￣ー￣)ﾆﾔﾘ