Vagrant, chef, Underscoresを使ったWordPress爆速開発について
僕がはじめて WordPress を触ったのは2年前…
当時は MAMP を使ったローカル開発環境で開発して、FTP で本番にアップ、、なんてやり方で作業をしていました。 MAMP が起動しなくなって気が狂いそうになったり、適当に作られた独自テーマがカオスすぎて発狂したり、正直僕は WordPress に良い思い出がありませんでした w
で、最近久しぶりに WordPress を使って簡単な Web サイトを作る機会があり、改めて触ってみると今は便利なものがいっぱいありますねー驚くほど開発がスムーズにできたので、今回はその時のことを備忘録がてら書いておきたいと思います。
イントロダクション
今回、使わせていただいたのはこちら
これらを使うことでめちゃめちゃ簡単に、そして爆速で WordPress の開発を進めることができました。
それではこれらを導入していく過程を順に書いていきますー。
導入
まずは Vagrant, Virtual Box, Grunt を導入し、次に vagrant-chef-centos-wordpress、iemoto を導入していきます！
ちなみに僕が今回使用したバージョンは ↓ です。
Vagrant 1.3.5
Virtual Box 4.3.6
Grunt 0.1.11
Vagrant
こちら からインストールしてください。
gem install vagrantでもできるらしいのですが、なんか古いバージョンが入ってしまうなど問題があって非推奨ってどこかに書いてました。なので無難に dmg を入れます。
Virtual Box
こちら からインストールしてください。
Grunt
以前書いた記事 Grunt で CSS、JS の圧縮をしてみたを参考にしていただければと思います。
vagrant-chef-centos-wordpress
こちらの READMEに詳しく書いてくださっていますが、一応書いていきますー。
まずは vagrant-hostsupdater をインストール。
vagrant plugin install vagrant-hostsupdater
このプラグインを使用すれば起動時に /etc/hosts にレコードを追加し、停止時に自動的に削除してくれるみたいです。hosts がカオスになる心配もなく、楽に URL のカスタマイズができますね。
次に任意のフォルダ（今回は test ってことにします）を作って移動。そこで git clone します。
mkdir test（適当に名前つけてください）
cd test
git clone https://github.com/miya0001/vagrant-chef-centos-wordpress.git vagrant-wp
これで vagrant-up フォルダが作られました。
vagrant-up に移動して sample をもとに Vagrantfile を作成、編集します。
cd vagrant-up
cp Vagrantfile.sample Vagrantfile
vim Vagrantfile
// 必要に応じて編集してください。
vagrant up
自分はここでWP_HOSTNAMEを修正したり、WP_LANG='ja'にしたりといった調整をしました。
ここでもし編集を忘れたり、後で修正したくなったとしても、vagrant provisionでプロビジョニングをやり直せば問題ないですよ！
（vagrant upは２回目以降、自動でプロビジョニングが走らないので注意。vagrant provisionをしないと Vagrantfile の変更は反映されないです。）
で、vagrant upしたら自動で chef が走って環境構築ができました！
ちなみに chef の実行に必要な cookbooks とかも git clone した時にすでに入っているので、仮想環境でknife solo cookとかわざわざやる必要もないのですね。
とりあえずこれで WordPress の環境が構築されたので、WP_HOSTNAMEで設定した URL にアクセスしてみます。
WordPress のデフォルトテーマの画面が表示されれば成功です！
うまく表示されなかったら
vagrant status
でちゃんと running になっているか確認してみてください。
ちなみにここで作った仮想環境では wp-cli (コマンドで WordPress をごにょごにょいじれるやつ）が入っています。
こちらのコマンド一覧を参考にぜひ使ってみてくださいー。僕はwp dbでエクスポートとかをちょろっとしただけなので、正直あんまり使ってないですが。。
iemoto
WordPress が導入できたので、いよいよテーマ開発をしていきます。
WordPress にはデフォルトテーマ(twentyfourteen とか twentythirteen とか)がすでに入ってますが、これは一からサイトを作る際に利用するには若干不便です。例えばデフォルトの CSS が効いてるせいで、スタイルの変更が効かずハマったり。。
そこで今回はカスタマイズされる前提でつくられたスターターテーマUnderscoresなるものを使いたいと考えました！そしてどうせなら Sass とか Grunt 使ってサクっと開発したいと思いました！
そこで発見したのが iemoto という grunt-init テンプレートです。まさに僕の願望にドンピシャでした！！神！
では早速、こちらの READMEを参考に、導入していきます。
前提としてローカルの www フォルダが仮想環境の/var/www とリンクしているので、ローカルの www 以下で修正したものは自動で仮想環境に反映されていきます。作業は基本ローカルでやってます。
//grunt-initを事前に-gでインストールしておく
sudo npm install -g grunt-init
mkdir ~/.grunt-init
git clone https://github.com/megumiteam/iemoto.git ~/.grunt-init/iemoto
//themesに移動して新しいテーマフォルダを作成
cd test/vagrant-up/www/wordpress/wp-content/themes/
mkdir my-theme(適当に名前つけてください）
cd my-theme
grunt-init iemoto
テーマ名などを聞かれるのですべて答えて、問題なければ最後にnを押して完了
grunt-init で質問された内容は style.css に反映され、PHP prefix は実際に関数に適用されます。 prefix は慎重に答えたほうがいいかも。。
これで my-theme が出来上がり、中に package.json があるので、
npm install
で依存ファイルをインストール。
あとは Gruntfile.js がすでに用意されているので、
grunt
でタスク実行できます。
CSS は最終的には style.css を使用することになっているので、スタイル修正は以下のような流れになります。
楽すぎる！ そして、Underscores は最低限ほしい動きは実装されつつも、CSS はほとんど Reset 関係だけだったりしてほんと良い感じに開発スタートできます。便利なのでぜひ使ってみてください！
あとはgit initしてバージョン管理したり、wp-content 内に backup-db フォルダ作ってそこに対してwp db export db.sqlして DB のバックアップとったり、状況に応じて柔軟に開発を進めていけると思います。
.gitignore もあらかじめ wordpress フォルダや grunt-init したテーマフォルダ内に用意されています。
まとめ
- Vagrant, chef, wp-cli を使用して楽に WordPress の環境構築ができた。
- Underscores ＋ Grunt で爆速で独自テーマを開発できる体制が整った。
- とりあえず MAMP はもう要らん w
昔の苦労が嘘のように楽しく開発できました。こんな便利なものを作ってくれた方々に本当感謝します！！！
小さなことからコツコツと。
参考記事
こちら参考にさせていただきました。ありがとうございました。
