, ,

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

公開日: 2017/05/24
更新日: 2018/10/04

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

[markdown]
## VCCW でテスト環境を構築する

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

> * [WP-CLI で VCCW 3 環境をかんたん構築する | deadwood](https://www.d-wood.com/blog/2017/03/14_8858.html)

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

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

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

“`prettyprinted
% cp provision/default.yml site.yml
“`

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

“`yaml:site.yml
hostname: iemoto.dev
ip: 192.168.33.10
lang: ja
“`

開発サーバ（VCCW）を起動します。

“`prettyprinted
% vagrant up
“`

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

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

“`prettyprinted
% wp scaffold vccw iemoto.dev –update
Success: Updated. Run `vagrant up`.
“`

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

“`prettyprinted
% vagrant reload –provision
“`

## Iemoto を展開する

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

> * [Iemoto で WordPress theme の作成を始めるまでの手順を確認する | deadwood](https://www.d-wood.com/blog/2017/05/16_8938.html)

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

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

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

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

“`prettyprinted
% npm install
“`

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

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

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

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

“`prettyprinted
% git fetch upstream
% git diff upstream/master
“`

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

“`prettyprinted
% git merge upstream/master
% git push origin master
“`

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

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

## 開発を始める

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

“`prettyprinted
% grunt
“`
[/markdown]