VCCW+MacBook+SequelProでWordpressの開発環境を作る

Wordpressで自社のサイトを作ろうかと思って、開発環境を作った手順です。

## VCCWの起動と設定

[VCCW \- A WordPress development environment\.](http://vccw.cc/)

Wordpressの環境をVirtualBoxとVagrantで作ってしまいます。  

VirtualBoxとVagrantをインストールして、vccwをダウンロードして解凍します。  
適当なディレクトリを作成して、vccwのディレクトリ名を変更しました。  

そのままvagrant upしても良いですが、ドメイン名やディレクトリ名を適切に変更したかったので、site.ymlを作成して、パラメータを変更します。  

### ディレクトリ構成

複数サイトを作るため、以下のような構成にしました。

```
vccw
├── site1
│   ├── LICENSE
│   ├── README.md
│   ├── Vagrantfile
│   ├── ansible.cfg
│   ├── provision
│   ├── site.yml   ★新規作成
│   └── wordpress   ★vagrant upすると作成される同期フォルダ
└── site2
    ├── LICENSE
    ├── README.md
    ├── Vagrantfile
    ├── ansible.cfg
    ├── provision
    ├── site.yml   ★新規作成
    └── wordpress    ★vagrant upすると作成される同期フォルダ

```


### site.ymlの変更

自分が使いたいドメインに変更します。
アドレスは重複しないようにします

```
#
# Network Settings
#
hostname: firstfournotes.com
ip: 192.168.33.11
```

日本のWordpressを使いたい場合は「jp」

```
#
# WordPress Settings
#
version: latest
lang: ja
title: Welcome to Company
```
wordpressやMySQLのパスワードは適宜変更  

### 起動

```
vagrant up
```

珈琲でも飲んで、待ちます。 
途中Macのパスワードを要求されるので、そこは一度入力が必要です。


### 確認


- 起動終了したら、ステータスを確認します。

```
08:04:36 companyhp/  $ vagrant status
Current machine states:

firstfournotes.com        running (virtualbox)

The VM is running. To stop this VM, you can run `vagrant halt` to
shut it down forcefully, or you can run `vagrant suspend` to simply
suspend the virtual machine. In either case, to restart it again,
simply run `vagrant up`.

```

サイトに接続してみます。
上記の場合だと、「https://firstfournotes.com 」で接続します 
httpsで接続すると、警告が表示されますが、開発環境なので許可してしまいましょう

- vagrantの環境に入ってみましょう

```
vccw
├── site1
```
のディレクトリ、つまり、vagrant upしたディレクトリで実行します。

```
 $ vagrant ssh
Welcome to Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-38-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

87 packages can be updated.
31 updates are security updates.


Last login: Tue May  9 22:46:29 2017 from 10.0.2.2
```



## SequelProの設定をしてMySQLのデータをみましょう


- sshの設定を確認します


```
08:06:04 companyhp/  $ vagrant ssh-config
Host firstfournotes.com
  HostName 127.0.0.1
  User vagrant
  Port 2200
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/bohebohechan/wordpress/companyhp/.vagrant/machines/firstfournotes.com/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  ForwardAgent yes
```

- SequelProで接続します

sshの鍵は、上記の「IdentityFile」で、出てきた設定値を設定します。
ポートも上記の「Port」を設定します。

<img width="525" alt="SequelPro.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/41570f1f-2d5b-7e52-e1f9-07d7ab53b41c.png">



##プラグイン操作

ここから先はvagrant sshした先で行います 

- ステータスの確認と更新

```
vagrant@firstfournotes:~$ wp plugin status
2 installed plugins:
 UI akismet 3.3
  I hello   1.6

Legend: I = Inactive, U = Update Available


vagrant@firstfournotes:~$ wp plugin update --all
Downloading update from https://downloads.wordpress.org/plugin/akismet.3.3.1.zip...
Unpacking the update...
Installing the latest version...
Removing the old version of the plugin...
Plugin updated successfully.
+---------+-------------+-------------+---------+
| name    | old_version | new_version | status  |
+---------+-------------+-------------+---------+
| akismet | 3.3         | 3.3.1       | Updated |
+---------+-------------+-------------+---------+
Success: Updated 1 of 1 plugins.

vagrant@firstfournotes:~$ wp plugin status
2 installed plugins:
  I akismet 3.3.1
  I hello   1.6

Legend: I = Inactive
vagrant@firstfournotes:~$
```

- プラグインインストール

```
vagrant@firstfournotes:~$ wp plugin install contact-form-7
Installing Contact Form 7 (4.7)
Downloading install package from https://downloads.wordpress.org/plugin/contact-form-7.4.7.zip...
Unpacking the package...
Installing the plugin...
Plugin installed successfully.
Success: Installed 1 of 1 plugins.
```

## vccwの環境を削除する

```
vccw
├── site1
```
のディレクトリ、つまり、vagrant upしたディレクトリで実行します。

```
vagrant destroy
```


また開発しているうちに気づいたら追記します。