WordPress公式がリリースしている、@wordpress/envパッケージ（wp-env）を使用してWordPressテーマのローカル開発環境をセットアップする方法（※Mac用）です。
前提条件
以下が必要です。
Node.jsはバージョン管理もできると便利です。下記を参考にどうぞ（※Mac用）
インストール
公式サイトを参考にすすめます。
WordPress環境をつくりたいディレクトリ（ここでは wp-env-test とします）に移動し、コマンドでパッケージをインストールします。
# インストールしたいディレクトリに移動
$ cd /your-path/wp-env-test
# インストール
$ npm i @wordpress/env --save-dev環境の開始、そして起動
以下のコマンドで環境を開始します。初回はやや時間がかかります。
$ wp-env start
⚠ Warning: could not find a .wp-env.json configuration file and could not determine if '/your-path/wp-env-test' is a WordPress installation, a plugin, or a theme.
WordPress development site started at http://localhost:8888
WordPress test site started at http://localhost:8889
MySQL is listening on port 51156
MySQL for automated testing is listening on port 51231
✔ Done! (in 73s 129ms)Done! が表示されたら成功です。
.wp-env.json を準備していないため、警告を受けつつも、最低限のWordPressローカル開発環境が出来上がりました。
ブラウザで、http://localhost:8888 を開くとWordPressのサイトが確認できます。
管理画面は、http://localhost:8888/wp-admin/ にアクセスし、以下でログインできます。
Username：admin
Password：password
環境の停止
停止も簡単。
$ wp-env stop
✔ Stopped WordPress. (in 13s 2ms)カスタマイズ
爆速でローカル環境ができあがりました。あとは、開発しやすいように .wp-env.json を用意してカスタマイズしておくと便利です。
私の環境を少しご紹介。
{
"core": "https://ja.wordpress.org/wordpress-6.6.2-ja.zip",
"plugins": [
"https://downloads.wordpress.org/plugin/advanced-custom-fields.6.3.6.zip",
"https://downloads.wordpress.org/plugin/all-in-one-seo-pack.4.7.1.1.zip",
"https://downloads.wordpress.org/plugin/backwpup.4.1.4.zip",
"https://downloads.wordpress.org/plugin/breadcrumb-navxt.7.3.1.zip",
"https://downloads.wordpress.org/plugin/duplicate-page.zip",
"https://downloads.wordpress.org/plugin/siteguard.1.7.8.zip"
"https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
"https://downloads.wordpress.org/plugin/wp-pagenavi.2.94.1.zip"
],
"config": {
"WP_DEBUG": true
},
"themes":["."],
"mappings": {
"wp-content/uploads": "./wordpress/uploads",
"wp-content/themes": "./wordpress/themes",
"wp-content/plugins": "./wordpress/plugins",
"sql": "./sql"
}
}pluginsには、私がいつも使用する定番プラグインを書いています。インストールから有効化までされるので便利です。また、アップロードファイル、テーマ、プラグインをマッピング指定しています。
DBの共有が必要な場合に備えてsqlディレクトリもマッピングの対象にしています。wp-envにwp-cliも入っているので、それを使ってエクスポートし、Gitで共有できるそうなので（私はひとり開発なのであれですが）
# DBエクスポート
$ npm run wp-env run cli wp db export sql/wpenv.sql
# DBurl書き換え
$ npm run wp-env run cli wp search-replace 'http://localhost:8888' 'https://custom-dev-domain'
# DBインポート
npm run wp-env run cli wp db import sql/wpenv.sqlあとがき
実際には、フロントエンドのビルドツール（私はVite推し）を組み合わせて使用しています。テーマ制作の場合、静的でつくってからWordPress化することが多いので、その流れも考慮し、ビルド前の作業ファイルをsrcディレクトリに置き、出力にdistディレクトリ、WordPressテーマ化にwordpressディレクトリを用意して、そのwordpressディレクトリをマッピングするといった具合です。このあたりの詳細は、また別の機会にご紹介しようと思います。