Wordpressのブランクテーマ「Sage」を使って見た
WEBサイトの制作に Wordpressのブランクテーマ「Sage」を導入してみたので流れまとめておく。
ちなみにターミナルとかなにそれレベルなので結構苦労した。これまではブランクテーマのBones＋preprosで開発していた。
Prepros :: Compile Less, Sass, CoffeeScript and much more with live browser refreshing.
なにぶんターミナルが良く分からないのでSassのコンパイルにはpreprosを使っていた。しきりに有料にしろと言ってくるので、これまでありがとうと思って購入したらエラーが出やすくなってだるいなって思っていた。
Sageを導入した理由は４点
- Bootstrapで開発したかった
- Sassが使いたかった
- 開発が継続的
- 何となくBonesに飽きた
一番参考にしたサイトは以下のサイト。というか他に日本語サイトではほとんど解説がない。
上記では、サーバーに導入するのを前提にしているみたいだったが、自分はmac上でコンパイルして、サーバーに上げてブラウザで確認なので、node.js導入部分が違うなーと思い、別に参考にしたサイト。
Bowerって何って思い調べたサイト。例えがマジで分からない。分からなかったが必要らしいので導入。
yosuke-furukawa.hatenablog.com
ちなみにgulpは何となくコンパイルしてくれるんだなと言うことで調べなかったので、ググってトップに来た記事。ちなみにSageにはコンパイルエラーが出た際に、wtchが止まってしまう対策のgulp-plumberがパッケージングされてるのでわざわざ準備しなくていいです。
そもそもターミナルコマンドが分からねえよってことで
nodebrew、node.js、gulp、bowerの準備
まずnode.jsが入っているか調べる。macなのでターミナルを開いて以下を打ち込む。
$ node
動いたので入っていた。多分以前、Bonesを導入した時のものが残っていたんだと思う。よくわからなかったので、preprosを使うことにしたんだけど。そこでまずは削除を心見るがHomebrewで入れていたのを忘れており、直接削除を試みてなぜ消えないんだと小１時間悩む。以下で簡単に消えてくれた。
brew uninstall nodeさまよっている間によく分からないけどnodebrewで管理したほうがいいよってあったのでnodebrewを入れる。
参考：初心者向け：nodebrewでNode.jsをバージョン管理し、環境を整える（MacOSX） | tipsBear
解説のままの通りにコピペしていく。上記サイト参照。
$ curl -L git.io/nodebrew | perl - setup
$ vi ~/.bash_profile$ export PATH=$HOME/.nodebrew/current/bin:$PATH$ source ~/.bash_profile$ nodebrew install-binary stableこれでnode.jsの安定版（v5.11.1）が入ったわけだがこれが間違っていた。この後gulpやbower入れてコンパイルするんだが、エラーを吐き続けてくれる。きちんと要件に入っているバージョンを確認して入れましょう。
バージョンは以下で確認
sage/README.md at master · roots/sage · GitHub
Requirements
| Prerequisite | How to check | How to install |
|---|---|---|
| PHP >= 5.4.x | php -v |
php.net |
| Node.js 0.12.x | node -v |
nodejs.org |
| gulp >= 3.8.10 | gulp -v |
npm install -g gulp |
| Bower >= 1.3.12 | bower -v |
npm install -g bower |
確認するとv0.12.xだとv0.12.14が最も新しいようなので、それを指定して入れ、そのバージョンを使うよって指定する。
$ nodebrew install-binary v0.12.14
$ nodebrew use v0.12.14
最新のnpmをグローバルにインストール
$ npm install -g npm@latest
gulpとbowerをグローバルにインストール
$ npm install -g gulp bower準備してあったSageを導入するワードプレスのテーマフォルダのパスを取得して、移動。
情報を見る > 一般情報の場所を選択してコピー
$ cd コピペ（〜/themes/になる）テーマフォルダを作る。以下のsageの部分に好きなテーマ名をどうぞ
$ mkdir -p sagegitからsageのテーマファイルをクローンしてもらう。
$ git clone https://github.com/roots/sage.git sagesageフォルダに移動してnpmとbowerをインストール。
$ cd sage
$ npm install
$ bower instalこの状態でテーマデータをアップロードしても、プリコンパイルされてなくて色々ファイルが無いのでテーマが壊れていると言われるので、まずはプリコンパイルしましょう。
$ gulpCSS変更したりした際に手動でコンパイルするのは面倒なので以下を動かせば自動でやってくれます。
$ gulp watchnode.jsのバージョンが間違ってた際に、$ gulpは問題無いのに、watchがエラー吐いてできずに２、３時間ネットをさまよい試行錯誤でした。みんな同じとこではまっているようなので、以下を参照。
ちなみに、異なるバージョンのnpmでwatchしても同様のエラーが出ました。複数のPCからテーマをコンパイルする際には各プログラムのバージョン確認をしましょう。
テーマファイルをアップロードする際には、以下のファイルだけでいいと思う。多分。node_modulesとかクソ重い。
多分ここまでで一通り準備は完了。
次回は開発メモ
