Mac(Yosemite)上でWordPressのテーマを開発するための環境を作る

gulp + BrowserSync + rsyncで、快適にWordPressのテーマを開発 + デプロイする仕組みを作った。便宜上、Mac上での設定手順を書いたが、Mac固有のものはあまり使っていないのでUnix系のシステムなら同じ仕組みが使えると思う。

前提

MySQLがインストールされていて、起動していること。なければHomeBrewとかで入れる。
Apache, PHPが動作する状態になっていること。そしてPHPからMySQLにアクセスできるようになっていること。
BrowserSyncがインストールされていること。なければnpmからグローバルにインストール。(最初からgulp使う場合はグローバルにインストールされていなくてもよいのだけど)

WordPressのインストール

WordPress.orgから最新のWordPressをダウンロードしてきて、~/Sites以下に解凍・設置する。
設置したWordPressのディレクトリはオーナーをApache(_www)にしておいた方が便利。
```
chown -R www wordpress
```
これをすることでブラウザ上でプラグインのインストールやWordPress本体のアップデートなどが可能になるため。
ウィザードに従ってWordPressのインストールを実行する。
必要に応じて、本番のサイトからデータをエクスポートしてきてローカルのWordPressにもインポートする。実際のデータが入っている状態の方がわかりやすいのでやっておいたほうがいい。データが大きくてupload_max_filesize超過のエラーが発生する場合は、/etc/php.iniのupload_max_filesizeの値を適宜変更する。/etc/php.iniがない場合は、/etc/php.ini.defaultなどをコピーして作る。

テーマのベースを作る

テーマ管理用のディレクトリを適当なところに作る。
```
mkdir ~/Documents/my-wp-theme
```
WordPressのテーマディレクトリ直下(~/Sites/wordpress/wp-content/themes/)にフォルダを作るよりも、シンボリックリンクをはって作業する方がオススメ(後述)
Underscoresでテーマのスケルトンを作る。他のテーマを持ってきても良いけど、Underscoresが比較的シンプルで無駄が少ないのでオススメ。ファイル群はテーマ管理用ディレクトリ直下に置くのではなく、フォルダを切って配置する。(~/Documents/my-wp-theme/dst)
WordPressのテーマディレクトリから、スケルトンを配置したディレクトリにシンボリックリンクをはる。
```
ln -s ~/Documents/my-wp-theme/dst my-wp-theme
```
WordPressのテーマ選択画面から当該のテーマを選択する。
必要に応じてgitレポジトリの設定を行う。

なぜシンボリックリンクをはるのか

テーマにグラフィック素材が含まれているような場合、グラフィック素材の元データ(aiとかpsdとか)も同じレポジトリ内で管理できないと不便だ。これらの元データがApache上で参照できてしまったり、本番サーバーにアップロードされてしまうのは微妙なので、デプロイされない位置に置いておきたい。デプロイの際に、元データをデプロイ対象から外すような処理を書いても構わないが、それよりは「実際にWordPressがテーマとして使うファイル用のディレクトリ」と「作業ファイル用のディレクトリ」が分かれていた方がシンプルだ。今回はこの後gulpを導入するので、それを考えてもやはり「出力用ディレクトリ」は分かれていた方が便利。(gulpが生成するファイルがアップロードされることを防ぐためにも)
加えて、ローカルのWordPressのディレクトリはプラグインインストールなどの都合からオーナーをApache(_www)にしているが、作業ファイルはユーザ権限で読み書きできた方が便利なので、適当なディレクトリ(~/Documents/my-wp-theme)にファイル一式をおき、その中の「WordPressがテーマとして使うファイル用のディレクトリ」(~/Documents/my-wp-theme/dst)に対して、WordPressのテーマディレクトリからシンボリックリンクをはり、デプロイ時もそのディレクトリのみを単純にアップロードすればよいという形にするのが、全体的にみたらスマートなのではないかと思う。

自動更新の仕組みを作る

WordPressでは、デフォルトでCanonical Redirectionという機能が有効になっており、これが働くとプロキシー経由でWordPressを開いた場合に正規のURL(プロキシーを通さないURL)に自動的にリダイレクトされてしまう。BrowserSyncのプロキシー経由でのアクセスができなくなってしまうので、このCanonical Redirectionを無効にする必要がある。
functions.phpに下記の一行を追加する。
```
remove_action('template_redirect', 'redirect_canonical');
```
なお、このままだと本番環境でもCanonical Redirectionが無効になってしまうという少し困った問題があるが、残念ながら今の所なかなかスマートに解決する方法が見つかっていない。誰か教えて欲しい。
BrowserSyncを起動する。PHPが必要なので、Proxyモードで起動する必要がある。
```
browser-sync start --proxy="localhost:80" --files="dst/*" --startPath="~username/wordpress"
```
BrowserSyncを使って正しく作業できることを確認する。
1. http://localhost:3000/~username/wordpress をブラウザで開くとWordPressが表示されること。(http://localhost/~username/wordpress にリダイレクトされてしまう場合は、Canonical Redirectionが無効になっていない)
2. dst以下のphpやcssを変更して保存すると、自動的にブラウザでリロードが走ること。(リロードが走らない場合は–filesの指定がまちがっているかも)
3. WordPress内で記事ページに遷移した際にApache(80番ポート)ではなくBrowserSync(3000番ポート)のまま開けること。

デプロイの仕組みを作る

更新のタイミングで一時的に表示が崩れてしまう可能性がゼロではないが、個人サイト/個人サービスレベルであればデプロイはrsyncで十分なんじゃないかと思う。

デプロイ先のサーバーに鍵認証でSSHログインできるようにしておく。
```
ssh user@your.server
```
パスワード入力無しでログインできることを確認しておく。ログインを確認できたらexitしてよい。

rsyncを使ってファイルをアップロードする。

rsync -av dst/* user@your.server:path/to/wordpress/wp-content/themes/my-wp-theme/

転送先ディレクトリを間違えてしまわないように要注意!!
なお、通常はあまりやらないだろうが、テーマディレクトリ内にサーバー上でファイルを出力・書き換えたりするような場合は、rsyncによるデプロイでそれらのファイルを消してしまったりコンフリクトを起こしてしまう可能性があるので注意。

Gulpを導入する

BrowserSyncとデプロイのコマンドを毎回打ち込むのは面倒なので、Gulpを使ってコントロールできるようにする。

プロジェクトにgulpとbrowser-syncをインストール
```
 npm install browser-sync gulp gulp-rsync --save-dev
```
gulpfile.jsを書く。
```
var gulp = require('gulp');
var browserSync = require('browser-sync');
var rsync = require('gulp-rsync');
gulp.task('deploy', function() {
  gulp.src('dst')
  .pipe(rsync({
    root: 'dst',
    hostname: 'your.server',
    destination: 'path/to/wordpress/wp-content/themes/my-wp-theme/',
    user: 'username',
    recursive: true,
    emptyDirectories: true
  }));
});
gulp.task('browser-sync', function() {
  browserSync({
    proxy: "localhost:80",
    startPath: "~username/wordpress/"
  });
});
```
おそらくgulp-rsyncのバグだが、カレントディレクトリ以外のディレクトリをsrcに指定した場合にエラーメッセージも出さずに処理を終了してしまう問題がある。デバッグしてみたところディレクトリのNull判定あたりの不具合のようだが、ひとまずemptyDirectoriesオプションをtrueにするとこの問題は回避できるようだったので、emptyDirectoriesオプションを指定する。

その他

BrowserSyncによる自動更新、gulp + rsyncによる手軽なデプロイができるようになったことで、だいぶ快適にWordPressのテーマ開発+運用ができるようになったと思う。gulpが入っているのでsassやcoffeeなどを使えるようにしたらもっと快適になるだろうが、そこらへんは好みの問題なので割愛。

Pocket

前提