WordPressの開発環境といえば、MAMPやDocker、Local by Flywheelなどたくさんありますが最近はもっぱらwp-envを使って開発しているのでこの記事ではwp-envの使い方をご紹介します。
ちなみにwp-envはWordPressのコア開発チームが提供しているツールで、プラグインやテーマ開発をするためのWordPressのローカル環境を簡単にセットアップできます。
この記事ではテーマ開発をする前提で説明していきます。
準備
wp-envはDocker、Node.js、npmを使用しますのでまずそれらをインストールしてください。
@wordpress/env – Japanese Team — WordPress.org
wp-env
の開発には最新の LTS バージョンの Node.js を使用しているため、これを推奨します。
インストール
まずはテーマディレクトリを作成してその中に移動。
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 |