「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

開発環境の準備|WordPressテーマの作り方

 

昨日はさいたま市大宮駅のコワーキングスペース「7F」で開催されたWordPressもくもく会に参加してきました。

もくもく会というのは初めて参加したんですが、かなり最高です!僕は普段人に聞いて解決できる環境にいないので、人にアドバイスを求めることが出来るというのが本当に幸せ。

そして、やっぱり同じことに対して興味関心を持っている方と同じ空間で作業できることもあって、適度な緊張感を持って数時間作業を進めることが出来るのがいいです。

毎月開催しているみたいなので、次回もぜひ参加したいなと思っています。

しかし、僕は昨日のWordPressもくもく会WordPressを触っていた時間は1/4程度でした・・。なぜなら、環境構築でハマってしまっていたから。

今日はその辺りをおさらいしながら書いていきたいと思います。

開発環境を準備することも技術のひとつ

f:id:pochiweb:20170830083041j:plain

実は今回、テーマを作成する中で並行して身に着けたいスキルがいくつかありまして、それが

  • vagrantを使ったローカル開発環境に慣れること
  • DreamWeaverを上手く使えるようになること
  • Git、GitHubに慣れること 

 なんですが、まあ割と一般的な技術なのだろうと思います。ただ、僕の場合は仕事上で必要に迫られることないし、こういったメジャーな開発環境くらいは自分で用意できるってのも大事な技術の一つだと思うので、個人で導入していこうと思った次第です。

後はタスクランナー入れたり、CSSメタ使う、ってのも外せないところだと思うのですがそこまでやってるとテーマ作成が始まらない気がしたので、ひとまずこれで走り始めちゃいます。

というわけで、だいぶ前置きが長くなりましたがまず環境構築についてメモ。

仮想環境の概要と導入

WordPressの開発環境としては3通りあるのだろうと思います。

  • ネットワークに繋がっているサーバー
  • Xampp、Mampp
  • 仮想環境

今回作るのは最後者の仮想環境。

仮想環境のいいところは本番環境との連携ができることであったり、チームで環境を揃え易いこと。

導入方法

仮想環境を使う準備

仮想環境を作るのにはソフトを二つインストール必要があるので、それぞれを公式サイトからダウンロード&インストールします。インストーラの指示に従っていればOK。


一つ目がvirtualBox、二つ目がVagrant

それぞれの役割は
virtualBox→PCの中にサーバーを構築するための仮想空間とマシンを作る。
vagrantVirtualBoxで作るサーバーの設定をコントロールする。
といったイメージ。

ただし、この二つをインストールしただけでは仮想サーバーを起動することはできなくて、vagrantのboxファイルを用意してあげる必要がある。
ファイルとしてはvagrantfileというものがvagrantのboxファイルにあたる。このvagrantfileがフォルダに設置されると、そのフォルダを含む配下が全て仮想サーバーの中身になる。Gitのinitに考え方は近いかもしれない。

VCCWを使う

vccwはWordPress開発専用のvagrntボックスファイルという感じで、基本的にこれさえあればすぐにWordPressのテーマやプラグインの開発に最適化された環境が得られる。

GIthubに連携する

開発しながらGitに慣れていきたいので、Githubも連携。

employment.en-japan.com

この記事に沿って設定していったら特に躓くことなく出来ました。ありがたい!

gitの操作とか概念はここ↓を見ながら練習中。

github.com

 

DreamWeaverのローカルサーバーとして仮想環境をセット

これは特になんてこともなくて、「サイトの設定」でサーバーをセットするときに、

「使用する接続」をローカル / ネットワークにして、対象のフォルダを設定するだけ。

カンタン!

 

これで開発環境も整いました。さあ次のステップも頑張ります。