WordPressでサイトを作る際、私はいつも「Roots」というテーマをカスタマイズしている。WordPressのコアにバンドルされているtwenty～系のテーマやWEBで配布されているテーマは、色々な機能やそのまま公開できてしまう程度の初期デザインが施されていて、それは確かにお手軽ではある。
でも、サイトを公開するにあたってはやっぱりオリジナリティが欲しいので、テーマを素のまま使うのは嫌だと思うのは私だけではないはず。そうなると、必然的にテーマのカスタマイズをしなきゃならなくなってくるんだが、カスタマイズするにあたってそれらの既存フューチャーを上書きしたりリファクタリングしていくのが非常に手間がかかるのも事実。だったら、自前でテーマを作れよ…とも思うんだが、テーマのコアとなる骨組み（汎用処理やテンプレート構成など）を考えたり作ったりするのがまた億劫で、およそオリジナルテーマとかは作る気にならない（なかなかやっかいな性分だなオレは…）。そんな時に見つけたのが「Roots」だった。
「Roots」はWordPressの開発者向けのスタートアップテーマを謳っており、とにかく汎用的な機能と骨格しかないまっさらなテーマで、インストール後はもう本当に好きなようにカスタマイズしてくれ～って形のテーマだった。WordPressが良かれと思ってデフォルトで追加している固定要素とかも極力そぎ落とす仕様になっていて、出力されるHTMLがスッキリしてるところが非常に好印象だったのだ。まさにやっかいな性分の私にピッタリなテーマだったわけだ（笑）
ほぼ一目ぼれに近くWordPressのテーマと言えば「Roots」みたいな感じで使い続けて来たんだが、去年あたりからRuby on Railsに浮気していたこともあってだいぶ疎遠になってた次第。そんな中、私が一番最初（およそ3年前）に「Roots」で作ったサイトはつい先日終了してしまったりしつつも、現在久々にWordPressで新しいサイト作ることになり、テーマにはまた「Roots」を使おうかと思ったのだ。そして、公式サイトに最新版を確認しに行ったら、だいぶ様変わりした「Roots」と再会してかなり驚いた。
おそらく私が最後に「Roots」を使ったのが自ブログサイトをリニューアルした時で、今も利用しているその「Roots」のバージョンが6.5.2なので、現在のバージョン8.1.1（2015年4月7日現在）までゆうに2バージョンもメジャーアップしたことになる。その間、1年以上も「Roots」の動向を追っていなかったので、激変は当然と言えば当然か。最新バージョンではテーマ名すら変わっていて、「Sage（Sage Starter Theme）」となっていた。
そんな「Roots」改め「Sage」なのだが、導入敷居も結構上がっていた。CSSやJavaScriptはgulpによるプリコンパイル型でデプロイし、jQueryやBootstrapのコンポーネンツはbowerでパッケージ管理する様になっていた。今どきのフロントエンドの資産管理の流れに沿って進化していたわけだねぇ…。ちゅーわけで、gulpとbowerが使える環境じゃないとテーマの導入もできない。つまりは、node.jsの動作環境が必須になったということだ。さすがに開発者向けのテーマと言ったところか…。
いやぁ、導入が面倒そうだったんで、一瞬萎えそうになったんだけど、GitHubでソースの中身見てみたら慣れ親しんだ中身だったので、気を取り直して導入してみることにした。
では、早速「Sage」を動かすところまでの手順をまとめてみよう。
「Sage」テーマの導入手順
1. node.js のインストール
まずは node.js が動く環境がないと話にならないので、node.jsをインストールしよう。あ、言い忘れるところだったが、構築する環境は CentOS, Apache2.2, php5.4, MySQL5.6 のサーバ上（＝サイトの公開環境）だ。もし、Windows上のXAMPP環境等にインストールする場合はnode.jsの公式サイトからWindows用のパッケージをダウンロードして直接インストーラーで入れることになる。
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ . ~/.nvm/nvm.sh
$ nvm install v0.12.2
$ vi .bashrc
$ cat .bashrc
...
. ~/.nvm/nvm.sh
nvm use v0.12.2
export NODE_PATH=${NVM_PATH}_modules
node.jsのバージョン（上の例では v0.12.2）は適宜公式サイトの安定バージョンを確認してから指定するのが良い。なお、最後の .bashrc の編集は末尾に3行追加するという意味だ。これで、サーバにログインしたら自動でnode.jsが利用できるようになる（この辺の設定はWindowsOSでは不要だね）。
2. gulp と bower のインストール
まずはグローバルにだけインストールしておく。もしWindows環境上にインストールする場合はここからコマンドラインで実行する。
$ npm install -g gulp bower
3. Sage のインストール
いよいよテーマ本体をインストールする。
$ cd /var/www/html/wp-content/themes/
$ mkdir -p sage
$ git clone https://github.com/roots/sage.git sage
$ cd sage
$ npm install
$ bower install
? May bower anonymously report usage statistics to improve the tool over time? Yes
npm install に結構時間がかかるので、気長に待とう。bower install 時に発生する対話は Y でOKだ。
4. Sage の初期設定
次に、WordPress側の設定（wp-config.php）に環境定義を追加する。
define('WP_ENV', 'development');
テーマ開発時は development にしておく。サイトを公開する場合はこの定数値を production に変更するという仕様だ。
この状態でテーマ「Sage」を有効にしてもCSSやJavaScriptがプリコンパイル（デプロイ）されていないので、本来のテーマの挙動を示さない。なので、下記のようにCSSやJavaScriptをプリコンパイルする。
$ gulp
コンパイルログが出力されて、すべてのコンポーネントが Finished したら準備完了だ。サイトの表示を確認してみよう。
これで「Sage」テーマの導入は完了だ。この後にCSSやJavaScriptを修正する場合は、sage/assets/ 内の各種 .less ファイルや main.js を更新する。ファイルを更新したら、また gulp コマンドでプリコンパイルすることでフロントエンドに反映される仕組みだ。
ちなみに、プリコンパイルされたCSSやJavaScriptは sage/dist 内にデプロイされ、WEBフロントエンドで読み込まれることになる。
ブラウザ同期（BrowserSync）について
さて、テーマの開発を進めていくと、CSSやJavaScriptを更新したらいちいち gulp コマンドでプリコンパイルするのが面倒になってくる。そこで使うのが gulp watch コマンドだ。このコマンドを実行してプロセスを立ち上げておくと、.less や .js といったプリコンパイル対象のソースファイルが更新されたことをリアルタイムで検知して、自動でプリコンパイルを実行してくれるのだ。これさえやっておけば、プリコンパイルのオペレーションを忘却できるので、従来の .css ファイルを直接変更してすぐにブラウザでスタイルを確認するという開発手法が取れるようになる。
やり方は、まず sage/assets/ 直下にある manifest.json の devUrl に自分のホスト名を指定する。
"config": {
"devUrl": "http://test.ka2.org"
}
──みたいな感じに自ホストのドメインURLを設定する。ローカルのWindows環境なら http://127.0.0.1 のようにローカルIPを指定しておくと良い（VirtualHost+HOSTSで擬似的にローカルIPをドメイン解決できるようにしてる場合はそのドメインURLでも動くかも…試してないが）。
その後で、
$ gulp watch
──を実行して、watchプロセスを立ち上げておく。watchをやめたい時は ctrl+C でOKだ。
gulpのwatchプロセスが立っている間は各種ソースファイルへの変更が監視されていて、ファイル更新が行われたタイミングでプリコンパイルが自動で走るようになる。一応、更新検知はほぼリアルタイムに行われるんだが、プリコンパイル処理自体は更新内容によっては時間がかかったりするので、フロントエンド側への反映が即時同期しないので注意が必要だ。
この記事と同じような内容は Roots/Sage のGitHubリポジトリのREADMEにも書いてあるので、不明な点があったらそっちを参照のこと。
私的にはJavaScriptをCoffeeScriptで書きたいので、今度それ用の設定をしてみようと思う。
