などの疑問や悩みを解決してまいります。
前提条件
wp-envを使って、WordPressの開発環境を構築するには以下のインストールが前提条件となります。
前提条件
- Dockerがインストールされていること
- Node.js と npm がインストールされていること
それぞれインストールされているかどうかは以下のコマンドで確認ができます。
// Dockerがインストールされているか確認
docker --version
// Docker version 27.2.0, build 3ab4256
// Node.jsがインストールされているか確認
node -v
// v18.20.0
// npmがインストールされているか確認
npm -v
// 10.9.0wp-envのインストール
wp-envをグローバルにインストールするため以下のコマンドを実行します。
npm install -g @wordpress/envコマンドを実行するとインストールが開始します。
終了したら正常にインストールが完了しているか以下コマンドで確認ができます。
wp-env --version
// 10.9.0
開発ディレクトリの作成と移動
wp-envをグローバルにインストールできたら、次に開発ディレクトリを用意し、移動します。
// 開発ディレクトリの作成
mkdir wp-env-test
// 開発ディレクトリへ移動
cd wp-env-testwp-envの実行
開発ディレクトリに移動したら、以下のコマンドでwp-envを起動します。
wp-env start
警告文について
今回のように構成ファイルが存在しないディレクトリでwp-env startを実行すると以下のように警告文が表示されますが、特に問題はありません。
Warning: could not find a .wp-env.json configuration file and could not determine if 'DIR' is a WordPress installation, a plugin, or a theme.
// 警告：.wp-env.json 設定ファイルが見つからず、'DIR' が WordPress インストールかプラグインかテーマかを判断できませんでした。
.wp-env.jsonは、WordPressのローカル開発環境をカスタマイズするための設定ファイルで、これを使うとwp-envがどのような環境を構築するか細かく指定できます。
構成の詳細については @wordpress/env パッケージを参照してください。
このあと.wp-env.jsonのカスタマイズの解説がありますのでそこでファイルを作成しますが、もちろんwp-env start実行前に作成しても問題ありません。
もし以下のエラーが表示された場合は、Gitのバッファサイズの制限が原因の可能性があります。（自分がそうでした）
エラー文を表示する
✖ Cloning into 'DIR'...
remote: Enumerating objects: 6085, done.
remote: Counting objects: 100% (6085/6085), done.
remote: Compressing objects: 100% (4979/4979), done.
error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)
error: 1206 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output
GitError: Cloning into 'DIR'...
remote: Enumerating objects: 6085, done.
remote: Counting objects: 100% (6085/6085), done.
remote: Compressing objects: 100% (4979/4979), done.
error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)
error: 1206 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output
at Object.action ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1451:25)
at PluginStore.exec ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1500:29)
at 'DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1927:43
at new Promise (<anonymous>)
at GitExecutorChain.handleTaskData ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1925:16)
at GitExecutorChain.<anonymous> ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1909:44)
at Generator.next (<anonymous>)
at fulfilled ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:52:24)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
task: {
commands: [
'clone',
'--depth=1',
'--no-checkout',
'https://github.com/WordPress/wordpress-develop.git',
''DIR'/wp-env/5673407a245a00bd846ad74044862034/tests-WordPress-PHPUnit'
],
format: 'utf-8',
parser: [Function: parser]
}
}もし同じようなエラー内容の場合は以下の記事を参考にしてみてください。
-
-
【WordPress】wp-env startを実行した際にエラーが起きてローカル環境を構築できないときの対処法
続きを見る
以下のようにターミナルに表示されれば起動完了です。
WordPress development site started at http://localhost:8888
WordPress test site started at http://localhost:8889
MySQL is listening on port 64358
MySQL for automated testing is listening on port 64506
✔ Done! (in 471s 361ms)ローカル環境にアクセス
これでhttp://localhost:8888/にアクセスすると、以下のようにWordPressサイトにアクセスができます。
またWordPressの管理画面には http://localhost:8888/wp-admin/ でアクセスできます。
初期アカウントとパスワードは「Admin」と「password」です。
wp-envの終了
wp-envを終了する場合は以下のコマンドを実行します。
wp-env stop以下のように表示されたら正常に終了したことになります。
✔ Stopped WordPress. (in 15s 941ms).wp-env.jsonのカスタマイズ
開発サーバーを立ち上げることができましたが、肝心のテーマもなければプラグインも見えない状態です。
少し話しましたが、wp-envでは.wp-env.jsonという環境ファイルを作成して自作のテーマやプラグインをインストールすることが可能です。
まずは開発ディレクトリ内に.wp-env.jsonを作成します。
// .wp-env.jsonファイル作成
touch .wp-env.json自作テーマファイルをインストールする
それでは自作のテーマファイルを開発環境にインストールしていきます。
次に任意の名前でフォルダを作成します。
// mitsutaの部分は任意のフォルダ名にしてください
mkdir mitsuta作成したフォルダの中には、index.phpとstyle.cssの最小限のファイルを配置します。
index.phpには確認しやすいように以下のように記述しておきます。
<h1>Hello WordPress!!</h1>.wp-env.jsonに作成したテーマファイルをインストールするために以下のように記述します。
// mitsutaの部分は任意のフォルダ名にしてください
{
"themes": ["./mitsuta"]
}
これで完了です。再度wp-envを再起動します。
wp-env start —updatewp-envを再起動したら、管理画面のAppearanceのThemesを確認して作成したテーマが存在していたらインストール成功です。
Activateをクリックし、テーマを変更します。index.phpに記述した内容が表示されたらOKです。
プラグインのインストール
プラグインのインストール方法を解説します。
今回は試しにWP Multibyte Patchプラグインを開発環境にインストールしてみましょう。
.wp-env.jsonを以下のように編集します。
{
"themes": ["./mitsuta"],
"plugins": ["https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"]
}パスは、WP Multibyte Patchのダウンロードボタンのリンク先をコピーしています。
記述したら再度wp-envを再起動してください。
wp-env start —update再起動できましたら今度は管理画面のPluginsを確認してください。WP Multibyte Patchがあればインストールが完了です。
その他.wp-env.jsonのカスタマイズ例
最後に.wp-env.jsonのカスタマイズ例を簡単に解説します。
これまで自作テーマとプラグインのインストールで使用したthemesとpluginsしか紹介していませんでしたが、その他にも指定できるものがあるので紹介します。
{
"core": "WordPress/latest",
"config": {
"WP_DEBUG": true,
"SCRIPT_DEBUG": true
},
"plugins": [
"."
],
"themes": [
"https://github.com/WordPress/twentytwentyone/archive/refs/heads/main.zip"
],
"mappings": {
"wp-content/mu-plugins": "./mu-plugins"
},
"port": 8888,
"phpVersion": "8.0"
}
指定しているキーの解説
core
WordPressのバージョンを指定し、latestは最新バージョンを取得config
WordPressのデバッグオプションなどの設定plugins
プロジェクトに含めたいプラグインthemes
使用したいテーマのリポジトリURLを指定mappings
ローカルのフォルダをWordPress環境の特定のディレクトリにマッピングできるport
開発用のWordPressサイトにアクセスするポート番号（任意で設定）phpVersion
PHPのバージョンを指定
mappingsを使用することで、開発中のプラグインやテーマのファイルがローカルで変更されたとき、それを自動的にDockerコンテナ内に反映させることができます。
{
"mappings": {
"wp-content/themes/mitsuta/": "./mitsuta/"
}
}mappingsを使用せずにコンテナ内にローカルの内容を反映させたい場合は、以下のコマンドを実行してコピーさせることができます。
docker cp <ローカルのファイルパス> <コンテナ名またはID>:<コンテナ内のパス>とはいえ、いちいち手動コピーが面倒な場合はmappingsを利用するのがいいでしょう。
まとめ
wp-envを利用するためには、DockerとNode.js、npmのインストールが必要ですが一度インストールしておけば後は簡単にWordPressの環境を構築することができるので便利な機能です。
今回は説明していませんが、Dockerを使って環境構築を行っているので複数人数でプロジェクトディレクトリを共有するにも向いていますし、ビルドツールのViteを使用してより爆速環境を構築したり、DB接続など、よりwp-envを有効活用する方法もあります。
これらについてはまた別の機会に記事を作成できたらと思っています。
