WSL + Homestead で WordPress のプラグイン開発環境を作る

1. はじめに

Windows 10 上で WSL + Homestead を使い、WordPress のプラグイン開発環境を作ってみました。

Homestead というのは、Laravel という PHP のフレームワークに関連するツールの1つです。 PHPでの開発に必要なソフトウェアがインストールされた Linux 仮想環境を簡単に導入することができます。Homestead は Laravel に限らず、PHP による開発環境として汎用的に使うことができます。この仮想環境に新たな Webアプリケーションを追加する操作も非常に簡単ですのでお勧めです。

このページの内容は、Windows 10 に WSL (Windows Subsystem for Linux) と Homestead がインストールされていることを前提としています。

2. 環境

Windows 10 Pro: バージョンは 1709 です。
WSL: 導入方法については、「WSL (Windows Subsystem for Linux) の導入と設定」を参照してください。
Homestead v7.0.1: ~/Homestead にインストールされているとします。; 使用される Linuxディストリビューションは、Ubuntu 16.04 です。

※ 本ページでは、Windows 上で使用するユーザーのユーザー名を foo とします。
※ ~ と書いている部分は、WSL としては /mnt/c/Users/foo、Windows 上では C:\Users\foo を指しています。

3. 作業

1. 今回 WordPress をインストールするディレクトリを用意します

今回は、ユーザーのホームディレクトリ内の work というディレクトリ内に、wordpress という名前のディレクトリとして WordPress をインストールします。/mnt/c/Users/foo/work/wordpress に index.php が入っているイメージです。

このディレクトリはエクスプローラー上で作ってもよいですし、WSL のコマンドラインから mkdir コマンドで作成してもよいです。

2. Homestead に Webアプリケーションの設定を追加します

~/Homestead/Homestead.yml に以下を追記します。

（省略）
folders:
    （省略）
    - map: ~/work/wordpress
      to: /home/vagrant/Code/wordpress

sites:
    （省略）
    - map: wordpress.app
      to: /home/vagrant/Code/wordpress

databases:
    （省略）
    - wordpress

この後、Windows (WSL) 側の ~/work/wordpress に WordPress をインストールします。
- そのパスを、仮想環境側の /home/vagrant/Code/wordpress にマッピングします。
Windows 側の Webブラウザから wordpress.app というホスト名で WordPressのサイトにアクセスできるようにします。
- その Webサイトのドキュメントルートは、仮想環境側の /home/vagrant/Code/wordpress としています。
仮想環境側に、wordpress という名前のデータベース（MySQL）を生成させます。

3. Windows 側の hosts ファイルに以下を追記します

192.168.10.10  wordpress.app

※ このファイルは、c:¥windows¥system32¥drivers¥etc\hosts にあります。管理者権限でメモ帳を起動してこのファイルを編集して下さい。

4. 新しい WebアプリケーションをHomestead に反映させます

$ vagrant reload --provision

仮想環境が起動します。

5. 仮想環境に ssh接続します

$ ssh vagrant@192.168.10.10

※ IPアドレスは、Homestead.yaml に記述されています。

6. WP-CLI を導入します

# wp コマンドを配置するディレクトリを用意します（どこでもよいです）
$ mkdir ~/bin

# そこに移動します
$ cd ~/bin

# コマンドとなるファイルをダウンロードします
$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

# 実行権限を与えます
$ chmod u+x wp-cli.phar

# コマンド名を分かりやすい名前に変更します
$ mv wp-cli.phar wp

7. `wp` コマンドの補間が効くようにします

# 補間スクリプトを置くディレクトリを用意します（どこでもよいです）
$ mkdir ~/script

# そこに移動します
$ cd ~/script

# コマンド補間スクリプトをダウンロードします
$ curl -O https://raw.githubusercontent.com/wp-cli/wp-cli/master/utils/wp-completion.bash

このファイルを自動で読み込むようにします。

$ vim ~/.bashrc

以下を追記します

if [ -f ~/script/wp-completion.bash ]; then
    . ~/script/wp-completion.bash
fi

すぐに反映したい場合は、以下を実行します。

$ . ~/script/wp-completion.bash

8. PHPUnit を導入します。

# phpunit コマンドを配置するディレクトリに移動します
$ cd ~/bin

# phpunitをダウンロードします
$ wget https://phar.phpunit.de/phpunit.phar

# 実行権限を与えます
$ chmod u+x phpunit.phar

# コマンド名を分かりやすい名前に変更します
$ mv phpunit.phar phpunit

Homestead では phpunit に alias の設定がされていますが、この設定は使わないので無効にします。

# ~/.bash_aliases の所有者を自分に変更します
$ sudo chown vagrant ~/.bash_aliases

# エイリアスの設定ファイルを編集します
$ vim ~/.bash_aliases

以下をコメントアウトします

alias phpunit='vendor/bin/phpunit'
   ↓
#alias phpunit='vendor/bin/phpunit'

これで次回ログイン時から無効になります。

既に有効になっているエイリアスは以下のコマンドで無効にします。

$ unalias phpunit

9. WordPress をインストールします

$ cd ~/Code/wordpress
$ wp core download --locale=ja

10. Windows 上の Webブラウザでアクセスします

Homestead.yaml や hosts ファイルに記述した wordpress.app を Webブラウザのアドレスバーに入力して Enter を押します。

WordPress の設定ページが開きます。

以下のように、各項目を入力します。

データベース名: Homestead.yaml で設定したデータベース名です。今回の場合は、wordpress となります。
ユーザー名: Homestead によって作成されたユーザー名は、homestead になります。
パスワード: Homestead によって作成されたパスワードは、secret になります。
データベースのホスト名: local と入力します。
テーブル接頭辞: wp_ のままでよいです。

この先では、サイトのタイトルやサイトのユーザー名を設定します。それらはお好きな名前にして下さい。

WordPress のインストールはこれで終了です。

11. プラグインの雛形を用意します

仮想環境内に ssh接続した状態で作業を進めます。

今回は、test-plugin1 という名前のプラグインを作成します。

# svnコマンドが使えるように subversion をインストールします
$ sudo apt-get install subversion

# WordPress のディレクトリに移動します
$ cd ~/Code/wordpress

# プラグインの雛形ファイルを生成します
$ wp scaffold plugin test-plugin1 --activate

以下のようなファイル・ディレクトリが生成されました。

次に、テスト用のWordPress環境を作成します。

# プラグインのディレクトリに移動します
$ cd wp-content/plugins/test-plugin1

# テスト用のWordPress環境を作成します
# /tmp/ 以下に テスト用WordPressやテスト用ファイルが配置されます
# 第一引数： DB名 
# 第二引数： DBユーザー名
# 第三引数： DBパスワード
# 第四引数： DBホスト名
# 第五引数： WPバージョン
$ bash ./bin/install-wp-tests.sh wordpress homestead 'secret' localhost latest

Homestead には Subversion がデフォルトで入っていないため、あらかじめインストールしておく必要があります。これをインストールしないで install-wp-test.sh を実行してしまうと、/tmp/ 以下に中途半端にファイルが生成された状態で処理が止まってしまいます。その場合は、以下のコマンドで /tmp/ 以下のディレクトリを削除してから再度 install-wp-test.sh を実行してください。

$ rm -rf /tmp/wordpress-tests-lib

12. PHPUnit を実行します

プラグインのディレクトリにいる状態で、phpunit コマンドを実行します。

$ phpunit

テストのPHPファイルは tests/test-sample.php となります。最初の状態では、必ず成功するテストが１つだけ記述されていますので、上記のような結果が表示されました。

13. コード規約チェックツールの導入

簡潔で参考になる説明を見付けました。

[WordPress] Composer で PHP_CodeSniffer + WordPress-Coding-Standards をかんたんインストールする | deadwood

こちらに書いてある通りに、仮想環境内でパッケージのインストール・設定を行います。

例として、生成されたプラグインの雛形ファイルに対して規約のチェックを実行してみた結果は以下となります。

14. プラグインの開発を開始する

今回の場合、test-plugin1.php を中心にプラグインを開発していきます。

また、tests ディレクトリ以下にテストのファイルを作成していきます。

参考

PhpStorm + WP-CLI で最強 WordPress 開発環境をつくる – Capital P
WP-CLI+PHPUnitを使ったWordPressプラグインのユニットテスト（１） | Firegoby
Plugin Unit Tests – WP-CLI — WordPress