こんにちは！Webデザイナー兼好きな人の条件はすっと出てこないけど
嫌いな人の条件は延々言える担当のさいさいです。

先日、Wordpressをいじる案件にあたりました。
ここ1ヶ月位コードを書いておらずPhotoshopばっかり触ってたので
(((^-^)))<(まーじーかー)
ってなりました笑

だってWordpressってローカルで確認できないじゃないですか。
アップロードしてみたらめっちゃエラー出てるんですけど！
えー！なんでここまで表示崩れるんかね！
ていうか画面真っ白になってるし！！
みたいなトラウマがあるので正直言って
WordPress嫌いなんです。

しかし調べてみたらちゃんとあるんですよね、ローカルでWordpress開発できる方法が！
しかも意外とすんなりできちゃったりしたのでご紹介したいと思います✌(‘ ω ‘)✌

 

VCCWってなんだ？

http://vccw.cc/
Vagrantという仮想環境をつくるツールをベースにしてつくられたWordpress開発用のツールです。
というわけでそもそもVagrantが入ってないと動かないんですぅ〜。
次項からVagrantのインストールも含めて丁寧にご紹介しますよ✌(‘ ω ‘)✌

 

いろいろインストールするよ

まずは先程のVagrantです！
こちらからダウンロードできます→http://www.vagrantup.com/

そして次にVirtualBoxもインストールします！
こちらからダウンロードできます→https://www.virtualbox.org/

ファイルをダウンロードしたらあとは解凍してポチポチしていけば簡単にインストールできます✌(‘ ω ‘)✌

 

いざVCCWをダウンロード

お待たせしましたここで主役のVCCWさんをダウンロードします！

zipでダウンロードする場合は先程載せておいた公式サイトからダウンロードできます。
右側の「Download .zip」っていう青いボタンですね✌(‘ ω ‘)✌

黒い画面から！って方は、まずVCCW用の任意のディレクトリにgitからクローンしてきます。
(今回はsaisai-vccwとします)
黒い画面で以下のコマンドを打ちます。

git clone https://github.com/vccw-team/vccw.git saisai-vccw

Users/ユーザー名/saisai-vccw といった感じでフォルダが出来ていれば成功です✌(‘ ω ‘)✌

 

設定をいじるよ

設定をいじるためには、まずdefalt.html というファイルをコピーし、saisai-vccw の直下に置いたらsite.yml とリネームします。
再び黒い画面で

cp saisai-vccw/provision/default.yml saisai-vccw/site.yml

と打つと、一発でできます✌(‘ ω ‘)✌

そうしたら、コピー・リネームしたsite.ymlを開いて言語の設定を変更します。

#
# WordPress Settings
#
version: latest
lang: en_US #ここをjaにする
title: Welcome to the VCCW
multisite: false
rewrite_structure: /archives/%post_id%

「lang」を「en_US」から「ja」に変更します。
これで日本語でWordpressを使えるようになりました✌(‘ ω ‘)✌

 

早速起動しちゃおう

設定が終わったら早速起動しちゃいましょう！
まずは黒い画面で

cd saisai-vccw

と打って、VCCW用のディレクトリに移動します。

次に

vagrant up

と打つとVagrantが起動します！

 

ちゃんと動いてるかな、ドキドキ

起動できたらちゃんとWordpressが動いてるか確認します！

http://vccw.dev/
ブラウザで↑ここにアクセスして「Hello, World!」が表示されてたら大成功！✌(‘ ω ‘)✌

http://vccw.dev/wp-admin
管理画面は↑こちら
ID・PWともにadminで入れます✌(‘ ω ‘)✌

 

終わったら停止させるのも忘れずに

作業が終了したら先程起動したVagrantを停止させます。
同じく黒い画面で

vagrant halt

と打つと、Vagrantが停止します✌(‘ ω ‘)✌

 

まとめ

率直な感想としては
こんな簡単ならもっと早くやっときゃよかった！
と思いました (‘-‘)

まあでも今回は既存のWordpressをいじる案件だったので
結局Wordpressの管理画面上で設定するもろもろはちょいちょいミスったわけですが…笑
でもテンプレートいじる時はほんとに便利だと思いました。
長年のトラウマが解消されて今日もおいしいビールが飲めそうです✌(‘ ω ‘)✌

 

もっと詳しく知りたい方はこちらもどうぞ！

【CSS設計】モラルとプライドとCSS -基礎編-

【CSS設計】モラルとプライドとCSS -OOCSS編-

【HTML5】articleとsectionを正しく使い分けよう！

マテリアルデザインについて知ろう！