WordPress│wp-envの環境構築・使い方

2023.06.112026.10.13

Dockerを使うローカル開発環境の手順です。wp-env公式ドキュメントに沿って、Docker、Node.js、npm、Gitを用意します。既存のpackage.jsonを丸ごと置き換えず、必要なscriptsだけを追加してください。

いつもはLocalを使ってWeb制作をしているのですが、

PCをMacBookAirに変えたので、公式が推奨しているwp-envの環境構築をしてみました。

結論を言うとクライアントワークはLocalで十分ですが、

テーマやプラグイン、ブロックエディタ関連の開発はwp-envの方が便利だと思います。

Windowsも対応しています。Dockerの起動とWSL2バックエンドなど、使用する環境の前提を確認してください。

wp-envの環境構築の前提条件

前提として下記の2つがインストールされていることが前提条件です。

wp-envを最短で環境構築する

公式サイトを見ながら@wordpress/envの環境構築していきます。

Windows、macOS、Linuxで利用できます。この記事の画面とバージョン表示は過去のmacOS環境の例です。

Japanese Team

@wordpress/env wp-env を使用してプラグインやテーマのビルド用とテスト用の WordPress ローカル環境を簡単にセッ…

VS Codeを起動して上部メニューからターミナルを起動します。

まずはnpm -vを打ってNode.jsが動くか確かめましょう。

package.jsonの作成

作業するフォルダを作成して、ディレクトリの場所に切り替えます。

例：cd /Users/motoki/Documents/wordpress/develop

次にnpm initコマンドを叩きます。

最初にプロジェクト名を打ちます。

あとはリターンキーを押していき、最後にyesと入力。

フォルダにpackage.jsonの作成が作成されます。

@wordpress/envのインストール

続いて下記のコマンドを打って@wordpress/envのインストールします。

npm i @wordpress/env --save-dev

インストール後、node_modulesフォルダとpackage-lock.jsonというファイルが生成されます。

package.jsonの編集

wp-envというコマンドを使えるようにするためにpackage.jsonを開いて、下記のコードを追記します。

変更箇所は"scripts": {"wp-env": "wp-env"}の所のみです。

{
  "name": "develop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "wp-env": "wp-env",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/env": "^7.0.0"
  }
}

DockerにWordPressをインストール

次のコマンドを打って、DockerにWordPressをインストールします。

npm run wp-env start

ターミナルでDone!と表示されいれば完了です。

ブラウザから下記のURLにアクセスしWordPressが表示されているか確認しましょう。

http://localhost:8888/

管理画面にログインしたい場合は以下の通りです。

http://localhost:8888/wp-login.php

ユーザー名：admin
パスワード：password

wp-envの更新方法

とりあえず WordPressが表示できたものの、どうやってテーマやプラグインを更新するのかローカルフォルダに直接アクセスできるLocalとは違ってわかりづらいと思います。

実際の更新方法を書いておきます。

.wp-env.jsonの作成

同階層に.wp-env.jsonというファイルを作成します。

※先頭にドットがつきます。

例えば下記の内容のコードを記載すると、プラグインがインストールされて有効の状態で表示されます。

{
	"plugins": [
		"https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip"
	]
}

.wp-env.jsonファイルの作成後、ターミナルで以下のコマンドを打つとWordPressの環境がアップデートされます。

npm run wp-env start -- --update

Done!と表示されましたら確認してみましょう。

自作テーマやプラグインをインストールする

ディレクトリは下記の状態だとします。

wordpress
├plugins
│ └my-plugins（フォルダのままでOK。中身はmy-plugin.phpのみ）
└themes
　　└my-theme （フォルダのままでOK。中身はstyle.cssとindex.phpのみ）

.wp-env.jsonの記述は以下の通り。

{
	"themes": [
		"../themes/my-theme"
	],
	"plugins": [
		"https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip",
		"../plugins/my-plugins"
	]
}

更新後、自作テーマや自作プラグインが追加されていることを確認します。

.wp-env.jsonは他にもさまざまな指定ができます。

core: WordPressのバージョンを指定できる
port: ポート番号を指定できる。
config: wp-config.phpの設定を変更できる
mappings: 画像等のディレクトリをローカルに指定できる。

Japanese Team

@wordpress/env wp-env を使用してプラグインやテーマのビルド用とテスト用の WordPress ローカル環境を簡単にセッ…

まとめ

冒頭で書いた通り、このwp-envを使った環境構築は

テーマやプラグイン、ブロックエディタ関連の開発の場合におすすめです。

作業がVSCodeのみで完結しますので、非常にシンプルです。

逆にクライアントワークのコーディング作業にはあまりおすすめしません。

気になった方は是非試してみてください。

停止・更新と切り分け

npm run wp-env stop
npm run wp-env start -- --update

上の2行は停止と更新の別操作です。更新オプションは半角ハイフン2個を使い、npmへ渡す区切りの–も必要です。エラー時はDockerの起動、使用ポート、.wp-env.jsonのJSON構文と相対パスを順に確認します。既定のログイン情報はローカル検証用で、インターネットへ公開する環境には使いません。

stopは環境を停止します。resetやdestroyはデータを失う操作なので、停止の代わりに実行しないでください。変更前の設定と開発データを退避し、設定を戻す場合は退避した.wp-env.jsonへ戻して再起動します。Dockerでの起動自体は利用者の環境で確認が必要です。

よくある質問：wp-envでWordPressのローカル環境を作るとき

wp-envは、何のための環境ですか？

記事では、Dockerを使うローカル開発環境です。wp-env公式ドキュメントに沿って、Docker、Node.js、npm、Gitを用意します。テーマやプラグイン、ブロックエディタ関連の開発の場合におすすめで、作業がVS Codeのみで完結します。逆に、クライアントワークのコーディング作業にはあまりおすすめしません。

Localとは、どう使い分けますか？

記事では、クライアントワークはLocalで十分ですが、テーマやプラグイン、ブロックエディタ関連の開発はwp-envの方が便利だとしています。

事前に必要なものは何ですか？

記事では、前提条件はDockerとNode.jsがインストールされていることです。Windowsも対応していて、Dockerの起動とWSL2バックエンドなど、使用する環境の前提を確認します。この記事の画面とバージョン表示は、過去のmacOS環境の例です。

最短で環境を作る流れは？

記事では、作業するフォルダを作成してpackage.jsonを作成し、@wordpress/envをインストールして起動します。既存のpackage.jsonを丸ごと置き換えず、必要なscriptsだけを追加します。起動後にURLへアクセスして、WordPressが表示されているか確認します。

テーマやプラグインを、追加するにはどうしますか？

記事では、同じ階層に.wp-env.jsonというファイルを作成します。先頭にドットがつきます。プラグインを指定するとインストールされて有効の状態で表示され、自作のテーマやプラグインはフォルダのまま追加できます。ファイル作成後に、ターミナルで更新のコマンドを実行すると環境がアップデートされます。

.wp-env.jsonでは、ほかに何を指定できますか？

記事では、coreでWordPressのバージョン、portでポート番号、configでwp-config.phpの設定、mappingsで画像等のディレクトリをローカルに指定できます。

エラーが出たときは、何を確認しますか？

記事では、エラー時はDockerの起動、使用ポート、.wp-env.jsonのJSON構文と相対パスを順に確認します。更新オプションは半角ハイフン2個を使い、npmへ渡す区切りのハイフン2個も必要です。

停止や初期化のコマンドで、気をつけることは？

記事では、stopは環境を停止します。resetやdestroyはデータを失う操作なので、停止の代わりに実行しないでください。変更前の設定と開発データを退避し、設定を戻す場合は退避した.wp-env.jsonへ戻して再起動します。既定のログイン情報はローカル検証用で、インターネットへ公開する環境には使いません。なお、Dockerでの起動自体は利用者の環境で確認が必要です。