JavaScript

wp-envでWordPress環境を簡単に作る方法

WordPressのプラグインやテーマ、Gutenberg用のカスタムブロックなどを開発する場合、動作確認用のWordPress環境がほしくなります。レンタルサーバーなどにWordPress環境を構築したり、Docker Composeを使って独自にWordPress用のコンテナ環境を構築しても良いのですが、wp-envを使うと更に簡単にWordPress環境を用意できます。(2020/4/18時点)

wp-envとは

wp-envは、WordPress環境を簡単に作成するために開発されたパッケージです。wp-envを使うと、コマンドラインからwp-env startと入力するだけでWordPress環境が構築され、プラグインやテーマなども自動でマッピングされます。

また、wp-env startコマンドを実行するディレクトリを変更するだけで、それぞれ別のWordPress環境が作成できるため、複数環境の使い分けも簡単にできます。

デフォルトでは、ローカルに新しいWordPress環境を作成して実行するようになっていますが、ローカルにある既存のWordPressを使うように設定することも可能です。wp-envの動作は.wp-env.jsonファイルで設定できるので、詳細はwp-envのドキュメントを参照してください。

事前準備

wp-envはWindowsやmacOS、Linuxなど複数プラットフォームに対応していますが、今回はWindows 10 Proを対象に説明しています。

必要なソフトウェアのインストール

wp-envはNode.jsとDocker Composeを使うため、事前にNode.jsとDocker Composeをインストールしておく必要があります。現時点(2020/4/18)ではDocker DesktopをインストールするとDocker Composeも合わせて導入されるため、Docker DesktopをインストールすればOKです。

今回は次のバージョンをインストールしています。

wp-envの導入

wp-envは@wordpress/envパッケージとしてnpmに公開されているため、以下のコマンドでwp-envを導入します。

# wp-envの導入(グローバル環境)
npm install @wordpress/env -g

通常であれば、ポータビリティなどの観点から、npmパッケージは-gオプションをつけずにローカル環境(作業フォルダのnode_modulesフォルダ配下)にインストールする方法を推奨しますが、今回は利便性などを優先してグローバル環境にインストールしています。

-gオプションをつけてグローバル環境にインストールした場合は直接wp-envで呼び出せますが、ローカルにインストールした場合はnpx wp-envという形でnpx経由で呼び出しが行えます。

wp-envの使い方

基本的な使い方

WordPressのソースディレクトリ、pluginやthemesの開発ディレクトリでwp-env startとコマンドを実行すればWordPressが起動します。デフォルトではポート番号に8888番が使われるため、http://localhost:8888/で作成したWordPressにアクセスできます。

WordPressへのログインアカウントは、User:admin、Password:passwordになります。

WordPressを終了したい場合は、コマンドラインからwp-env stopと入力すればOKです。

便利な使い方

wp-envを実行するフォルダに.wp-env.jsonファイルが存在すれば、その設定に従ってWordPressが実行されるようになります。利用するWordPressのバージョンや使用するポート番号なども設定できるので、.wp-env.jsonを作成しておくことをおすすめします。

詳細な設定やサンプルなどは本家のドキュメントが参考になりますが、とりあえずプラグインの開発フォルダから、最新のWordPressを使って、利用するポート番号を指定してWordPressを起動するには、次のようになります。

{
  "core": null,
  "plugins": [ "." ],
  "port": 18888,
  "testsPort": 18889
}