WordPress で Foundation を使う

FoundationPress

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

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

準備

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

FoundationPress は Grunt パッケージで運用しているために、Grunt が必須となります。(FoundationPress では、Sass を使用しています)。また、Git を使うと、テーマを常に最新バージョンに保つことができます。そのために、関連するソフトを、お使いの Mac などにインストールする必要があります。

  • 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 [email protected]: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として使用しています。

  • 元々の FoundationPress テーマをfoundationとして WordPress にアップロード
  • 子テーマ用のフォルダー 例foundation-jaを作る
  • 子テーマの中に style.cssを作成する
  • 注意：子テーマを使う場合でも、親テーマにて、Grunt パッケージのインストール作業は必要です。

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

/*
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()に変更

例

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: 'Hiragino Kaku Gothic ProN',Meiryo,'メイリオ','Lucida Grande',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: 'Hiragino Kaku Gothic ProN',Meiryo,'メイリオ','Lucida Grande',sans-serif; に。日本語フォントを指定します。
  4. Sass ファイルを保存
  5. ターミナルで、/css/app.css が自動更新されたかを確認
  6. /css/app.css をサーバーにUP

最後に

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

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

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