wp-envでWordPress開発環境を構築する

WordPressの開発環境といえば、MAMPDockerLocal by Flywheelなどたくさんありますが最近はもっぱらwp-envを使って開発しているのでこの記事ではwp-envの使い方をご紹介します。

ちなみにwp-envはWordPressのコア開発チームが提供しているツールで、プラグインやテーマ開発をするためのWordPressのローカル環境を簡単にセットアップできます。

この記事ではテーマ開発をする前提で説明していきます。

準備

wp-envはDocker、Node.js、npmを使用しますのでまずそれらをインストールしてください。

wp-env の開発には最新の LTS バージョンの Node.js を使用しているため、これを推奨します。

@wordpress/env – Japanese Team — WordPress.org

インストール

まずはテーマディレクトリを作成してその中に移動。


mkdir my-theme
cd my-theme

パッケージをインストール。


npm i -D @wordpress/env

npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 

added 162 packages, removed 4 packages, and audited 163 packages in 5s

19 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

wp-envコマンドを追加

npm init -yでpackage.jsonを作成


npm init -y

Wrote to /Users/name/Desktop/my-theme/package.json:

{
  "name": "my-theme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

scriptswp-envコマンドを追加


vi package.json


{
  "name": "my-theme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "wp-env": "wp-env"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


.wp-env.jsonの作成

.wp-env.jsonを作成してその中にインストールするWordPressのバージョンやプラグイン、wp-config等の設定を追加していきます。

以下は.wp-env.jsonのサンプルです。


{
	"core": null,
	"themes": ["./"],
	"plugins": [
		"https://downloads.wordpress.org/plugin/query-monitor.3.7.1.zip",
		"https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
		"https://downloads.wordpress.org/plugin/duplicate-post.4.1.2.zip",
	],
	"config": {
		"WP_DEBUG": true,
		"WP_DEBUG_LOG": true,
		"WP_POST_REVISIONS": false,
	}
}


上記以外のオプションは公式ドキュメントを参照

起動


npm run wp-env start

上記コマンドを実行した後にhttp://localhost:8888/にアクセスするとWordPressがインストールされた画面にアクセスできます。

ちなみにログインIDはadmin、パスワードはpasswordです。

停止


npm run wp-env stop

削除

作った環境を全て削除したい場合はwp-env destroyを実行。


npm run wp-env destroy

DBへの接続

起動コマンドを実行した後にdocker psでDBのポートをコピー。
※データベースのポート番号は起動するたびに変わります。


docker ps

CONTAINER ID   IMAGE       COMMAND                  CREATED          STATUS          PORTS                                   NAMES
48e4fac5ab06   wordpress   "docker-entrypoint.s…"   30 seconds ago   Up 26 seconds   0.0.0.0:8889->80/tcp, :::8889->80/tcp   57bbf5cb44e3027697dd6a996ff1f063_tests-wordpress_1
9336a63d0e66   wordpress   "docker-entrypoint.s…"   33 seconds ago   Up 28 seconds   0.0.0.0:8888->80/tcp, :::8888->80/tcp   57bbf5cb44e3027697dd6a996ff1f063_wordpress_1
86480ca74fab   mariadb     "docker-entrypoint.s…"   33 seconds ago   Up 30 seconds   0.0.0.0:55601->3306/tcp                 57bbf5cb44e3027697dd6a996ff1f063_tests-mysql_1
38f82f2add42   mariadb     "docker-entrypoint.s…"   37 seconds ago   Up 33 seconds   0.0.0.0:55582->3306/tcp                 57bbf5cb44e3027697dd6a996ff1f063_mysql_1

上記の場合55582になります。

あとはTablePlusやSequel Aceなどのクライアントソフトに下記情報を入力すればDBに接続することができます。

Host 0.0.0.0
Port さっき確認したポート番号
User root
Password password
Database wordpress

参考