はじめに
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（最新版）をインストール
VAGRANT（最新版）をインストール
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要素の文字色を変更して保存してみます。
こんな感じでテーマファイルを編集して保存すると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については次回、詳しく書いてみたいと思います。