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

WordPressの開発環境といえば、MAMPやDocker、Local 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

パッケージをインストール。
インストールが完了するとpackage.jsonが作成されます。


npm i -D @wordpress/env

added 136 packages, and audited 137 packages in 7s

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

found 0 vulnerabilities

package.jsonにwp-envコマンドを追加

package.jsonのscriptsにwp-envコマンドを追加


{
    "scripts": {
        "wp-env": "wp-env"
    },
    "devDependencies": {
        "@wordpress/env": "^4.5.0"
    }
}

.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への接続

起動コマンドを実行するとMySQLのポートが表示されるのでそれをコピーします。


npm run wp-env start

> wp-env
> wp-env "start"

WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 55582
MySQL for automated testing is listening on port 55601

もしくは起動後に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

参考