Edited at

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 は必須です。

MAMPXAMPPは使いません。


準備

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


VirtualBox(最新版)をインストール

VirtualBox


VAGRANT(最新版)をインストール

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

初回起動は時間がかかります。(5分弱)

が2回目以降はすぐ起動できます。

無事起動したら 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については次回、詳しく書いてみたいと思います。