【WordPress】wp-env+vscodeでWordPressの開発環境を作る方法

作成:2022.05.22 01:00 更新:2022-06-26T03:58:27Z

ここでは、wp-envとVisual Studio Code(VSCode)を使ったWordPress開発環境の作り方を記載します。

wp-envはWordPressのローカル環境です。wp-envは以下のような特徴があり、とても簡単に環境を導入できます。

dockerファイルを書く必要がない
npmコンポーネントとして開発プロジェクトに組み込めるため、プロジェクトをビルドしてすぐに試せる
クリーンな状態にリセットできる

準備

・WSL2
・Docker Desktop for Windows
・Node.js
・Visual Studio Code

手順

任意の場所に作業フォルダを作成し、作成したフォルダに移動する
```
mkdir <作業フォルダ名>
cd <作業フォルダ名>
```
WordPress開発のひな形を作成し、作成されたフォルダに移動する
ブロック開発の場合
```
npx @wordpress/create-block <作成するプラグインの名前>
cd <作成するプラグインの名前>
```
wp-envを開発環境のみにインストールする
```
npm install --save-dev @wordpress/env
```
package.jsonのscriptにwp-envを追加する
以下をscriptの最後に追加することでnpmからwp-envを実行できるようになる。
```
"scripts": {
	"wp-env": "wp-env"
},
```
wp-envを起動する
以下のコマンドを実行すると、dockerでWordPress環境のコンテナが作成される。
```
npm run wp-env start
```
WordPressのページが表示されることを確認する
ブラウザでhttp://localhost:8888にアクセスします。
WordPressの管理画面にアクセスする
ブラウザでhttp://localhost:8888/wp-adminにアクセスします。
ユーザー名：admin、パスワード：passwordでログインできます。
VSCodeを起動しプラグインの開発をする
作業フォルダで以下のコマンドを実行すると、VSCodeが起動します。
```
code.
```
プラグインをビルドする
プラグインに機能を追加して動作を確認したい場合は、以下のコマンドでプラグインをビルドします。ビルドするとすぐにWordPressに反映されます。
```
npm run build
```

よく使うコンポーネント

npm install @wordpress/i18n --save
npm install @wordpress/block-editor --save
npm install @wordpress/components --save
npm install @wordpress/compose --save
npm install @wordpress/element --save