目次
- 1. はじめに
- 2. 環境
- 3. 作業
- 1. 今回 WordPress をインストールするディレクトリを用意します
- 2. Homestead に Webアプリケーションの設定を追加します
- 3. Windows 側の hosts ファイルに以下を追記します
- 4. 新しい Webアプリケーション をHomestead に反映させます
- 5. 仮想環境に ssh接続します
- 6. WP-CLI を導入します
- 7. wp コマンドの補間が効くようにします
- 8. PHPUnit を導入します。
- 9. WordPress をインストールします
- 10. Windows 上の Webブラウザでアクセスします
- 11. プラグインの雛形を用意します
- 12. PHPUnit を実行します
- 13. コード規約チェックツールの導入
- 14. プラグインの開発を開始する
- 参考
- 関連
- スポンサードリンク
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
としています。
- その Webサイトのドキュメントルートは、仮想環境側の
- 仮想環境側に、
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
となります。最初の状態では、必ず成功するテストが1つだけ記述されていますので、上記のような結果が表示されました。
13. コード規約チェックツールの導入
簡潔で参考になる説明を見付けました。
こちらに書いてある通りに、仮想環境内でパッケージのインストール・設定を行います。
例として、生成されたプラグインの雛形ファイルに対して規約のチェックを実行してみた結果は以下となります。
wpcs
コマンド(phpcs
のエイリアス)を実行したところ14. プラグインの開発を開始する
今回の場合、test-plugin1.php
を中心にプラグインを開発していきます。
また、tests
ディレクトリ以下にテストのファイルを作成していきます。
参考
- PhpStorm + WP-CLI で最強 WordPress 開発環境をつくる – Capital P
- WP-CLI+PHPUnitを使ったWordPressプラグインのユニットテスト(1) | Firegoby
- Plugin Unit Tests – WP-CLI — WordPress