15分で最強のWordPressテーマ開発環境が手に入る『WP THEME BUILDER』を作った。

## はじめに
**VCCW**というツールをご存知ですか？
MAMP、XAMPPを使わず、コマンド一発でローカルのWordPress環境が手に入るスゴイやつです。
しかも、本番とローカルでWordPressファイルを同期でき、本番へのアップロードや本番からのダウンロードもコマンド一発でできる優れものです。

ただ、WordPressのテーマファイルってチームで共有したりバージョン管理したりがとてもやりづらい印象。ここを解消するものとしてテーマ開発を快適にできればと思い『**WP THEME BUILDER**』を作りました。

## WP THEME BUILDER?
VCCWをベースにしたWordPressテーマ開発用ツールです。

*WP THEME BUILDER*
https://github.com/masatojpn/wpthemebuilder/

#### できること
- コマンド一発でローカルにWordPress環境を構築（VCCW）
- 本番とローカル環境を簡単に同期
- テーマファイル編集 → 保存でブラウザの自動リロード
- テーマファイルのバージョン管理
- WordMoveによるアップロード（テーマ・データベース・プラグイン選べる）
- WordMoveで本番環境とステージング振り分け

パッケージをインストールするので `Node.js` は必須です。
**MAMP**や**XAMPP**は使いません。

## 準備
必要なものを準備していきます。インストールは１度きりで大丈夫です。

### VirtualBox（最新版）をインストール
**[VirtualBox](https://www.virtualbox.org/)**

### VAGRANT（最新版）をインストール
**[VAGRANT](https://www.vagrantup.com/)**

### vagrant-hostupdaterをインストール
```
$ vagrant plugin install vagrant-hostsupdater
```

### vagrant boxをインストール
```
$ vagrant box add vccw-team/xenial64
```

##### vagrant boxでエラーが出たら
『既にインストールされてるよ』みたいな事言われたら以下コマンドで対処してください。

```
$ vagrant box add vccw-team/xenial64 --force
```


ここまでで準備完了。

## 『WP THEME BUILDER』を使う

WP THEME BUILDERをローカルに落としてください。`git clone`じゃなくzipをダウンロードしても構いません。

```
$ git clone http://github.com/masatojpn/wpthemebuilder/ sample-project
```

今回はsample-projectというプロジェクトフォルダに入れます。

### ローカルでWordPress起動
プロジェクトフォルダに移動して、`vagrant up`コマンドでローカルのWordPressを起動します。

```
$ cd sample-project
$ vagrant up
```
初回起動は時間がかかります。(５分弱）
が２回目以降はすぐ起動できます。

無事起動したら http://wpthemebuilder.local/ にアクセスしてみます。
WordPressのトップページが表示されればOKです。

### vagrantコマンド一覧
* 起動
`vagrant up`

* シャットダウン
`vagrant halt`

* ステータスを確認
`vagrant status` 

* 仮想マシンを削除
`vagrant destroy`

* 再起動
`vagrant reload`

* 起動済みの仮想マシンへ設定ファイルを適用
`vagrant provision` ※起動時のみ有効


### タスクランナーでテーマファイルを生成
次にテーマを生成する為のgulpを使えるようにします。
必要なパッケージをインストールするだけですので以下コマンドを実行。

```
$ npm install
```

### タスクの実行＆監視
パッケージがインストールできたら以下コマンドでテーマファイル生成タスクを実行します。

```
$ npx gulp
```

### テーマの有効化
最後にテーマの有効化をします。
ブラウザで `http://wpthemebuilder.local/wp-admin/` で管理画面へアクセスします。

ログインIDとPASSはデフォルトだと
ID : admin
PASS : admin
となっています。

ログインできたら
**外観** > **テーマ**をクリック
blankthemeというテーマが表示されているはずなので、有効化します。
有効化したら、サイトトップページを開いて『Hello World.』と表示されていればOK。


## テーマファイルの編集

### ディレクトリ構造
簡易ですがファイル構像はこんな感じ。

```
sample-project(root)
　　 |- _themes/ * テーマ編集用ディレクトリ
　　 |      |- blanktheme/ * テーマ
　　 |
　　 |- wordpress/ * WordPress一式
   　　     |- wp-content/ * テーマ / プラグインなどを格納
      　　          |- themes/ * テーマファイルを格納
         　　       |      |- blanktheme/ *gulpタスクで生成されたテーマファイル
      　　          |
      　　          |- plugin/ * プラグイン
         　　             
```

`_themes/`以下が編集用のディレクトリとなっていて、あらかじめ、`blanktheme`というテーマを用意しています。

`npx gulp`コマンドでタスクを実行することによって`wordpress/wp-content/themes/`以下にテーマファイルとして生成されるようになっています。
生成されたテーマファイルをWordPressが読み取るようになっています。

### 実際にCSSを書き換えてみる
では、実際に`/_themes/blanktheme/assets/main.scss`を開き、h1要素の文字色を変更して保存してみます。

![wpthemebuilder_demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347440/9e649442-f6f4-544f-0b96-56b3d8ed12c9.gif)

こんな感じでテーマファイルを編集して保存するとbrowser-syncが走ります。
scss以外にもjsや、phpファイルを変更しても自動リロードします。

追記 タスクランナーをnpm-script → gulpに変更。pugファイルを作ると自動でphpとして生成できるようにしました。

## データベースの共有
その他にもデータベースに関わる部分もバージョン管理できるようにしています。
例えばですが、ローカルのWordPress環境で誰かが管理画面のカスタマイズを行った場合はデータベースのエクスポート / インポートを行い、いつでも同じ状態にすることが可能となっています。

### データベースのエクスポート
以下コマンドで`wordpress.sql`ファイルを生成します。

```
vagrant ssh
wp db export /vagrant/wordpress.sql
exit
```

### データベースのインポート
プロジェクトフォルダのルート直下に`wordpress.sql`ファイルがあれば
以下コマンドでインポートします。

```
vagrant ssh
wp db import /vagrant/wordpress.sql
exit
```

## なぜ作ったのか？
WordPressの制作フローというのは『**HTMLで作ってPHPに置き換える**』というものが多いらしいですね。（最近まで知らなかった）
実はWordPressのテーマ開発は、そのままWordPressの構文を書いていくほうが工数も少なくて圧倒的にオススメです。

さらに、VCCWにはWordMoveという機能も備わっていて、ステージングと本番環境を振り分けてアップできるので確認用として静的なサイトを作る必要がありません。

データベースまわりも含めて、本番と全く同じ環境をローカルで用意でき、しかもテストし放題。そっくりそのままデプロイできる。となれば、WordPress制作においてはVCCWを使った環境はベストプラクティスではないかと思います。


## まとめ
簡単にではありますが『**WP THEME BUILDER**』を紹介しました。
わかりにくい部分もあったかもしれませんが、一度試してみていただけたらと思います。

とはいえ、**勢いで作った**ところもあるのでバグなど見つけられた方は教えていただけると助かります。

**WordMove**については次回、詳しく書いてみたいと思います。