[WP Theme Dev] VCCW + Iemoto で WordPress theme を開発するためのワークフロー

カスタマイズした Iemoto でテーマ開発をまわすための最短手順を確認します。

VCCW でテスト環境を構築する

VCCW を WP-CLI を利用してセットアップします。

iemoto.dev はディレクトリ名なので、プロジェクトに合わせます。

% pwd ~/projects/sandbox-vccw
% wp scaffold vccw iemoto.dev --lang=ja
% cd iemoto.dev

設定ファイルを用意します。

% cp provision/default.yml site.yml

設定ファイルの hostname を書き換えます。
必要に応じてその他の項目を書き換えます。

site.yml
hostname: iemoto.dev
ip: 192.168.33.10
lang: ja

開発サーバ(VCCW)を起動します。

% vagrant up

VCCW にアップデートがあった場合の対応

アップデートコマンドを実行します。

% wp scaffold vccw iemoto.dev --update
Success: Updated. Run `vagrant up`.

リロードとプロビジョニングをやり直します。

% vagrant reload --provision

Iemoto を展開する

fork したリポジトリのうち、カスタマイズしたテンプレートがあるブランチを git clone します(初回のみ)。

% cd ~/.grunt-init
% git clone -b feature/sass-lint git@github.com:DriftwoodJP/iemoto.git iemoto-sass

テストサーバのテーマディレクトリにテンプレートを展開します。

% mkdir wordpress/wp-content/themes/iemoto-sass
% cd  wordpress/wp-content/themes/iemoto-sass
% grunt-init iemoto-sass

パッケージをインストールします。

% npm install

Iemoto にアップデートがあった場合の対応

megumiteam/iemoto の master を git merge して、~/.grunt-init に設置したテンプレートをアップデートします。
megumiteam/iemoto のリモートブランチを追加します(初回のみ)。

% git checkout master
% git remote add upstream git@github.com:megumiteam/iemoto.git

アップデートを取得します。
差分を確認します。

% git fetch upstream
% git diff upstream/master

アップデートを merge します。
fork したリポジトリの master にも push しておきます。

% git merge upstream/master
% git push origin master

カスタマイズしたテンプレートがあるブランチにも merge します。
fork したリポジトリにも push しておきます。

% git checkout feature/sass-lint
% git merge master
% git push origin feature/sass-lint

開発を始める

grunt もしくは grunt watch タスクで開発を始めます。

% grunt