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

2021.07.21

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

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

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

準備

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

{
    "object": "block",
    "id": "b496a290-a57b-43be-af0a-66786dc9ee3e",
    "parent": {
        "type": "page_id",
        "page_id": "2137f91a-70bf-40ad-a97c-e5943debbb04"
    },
    "created_time": "2023-12-27T14:42:00.000Z",
    "last_edited_time": "2023-12-27T14:42:00.000Z",
    "created_by": {
        "object": "user",
        "id": "bfc7eebb-0d83-4600-a1a6-c7f6f9f2eec8"
    },
    "last_edited_by": {
        "object": "user",
        "id": "bfc7eebb-0d83-4600-a1a6-c7f6f9f2eec8"
    },
    "has_children": false,
    "archived": false,
    "in_trash": false,
    "type": "unsupported",
    "unsupported": {}
}

インストール

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

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

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

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

.wp-env.jsonの作成

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

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

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

起動

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

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

停止

削除

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

DBへの接続

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

もしくは起動後にdocker psでDBのポートをコピー。（※データベースのポート番号は起動するたびに変わります。）

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

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

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

参考

@wordpress/env – Japanese Team — WordPress.org