wp-envを使ってWordPress開発を加速させる方法

と、大きなタイトルを書きましたが、加速するかどうかは利用されるご本人次第ということでご容赦くださいませ。

以前から「wp-env使えるようになりたいなー」と思ってはいたのですが、トライしてみた際にエラーを解決できなくて詰んだこともあり、ちょっと取り組む気持ちが薄れていました。

しかし、界隈の皆さんから「wp-envやばい」という声を多く聞くようになり、使うか使わないかは置いておいて、使い方は知っておく必要があるでしょ、と重い腰を上げて今回トライしてみました。

結果、めっちゃ便利です。

Dockerを用意

まずはDockerを用意しておきましょう。アプリをダウンロード＆インストールです。そして、立ち上げておきましょう。

Home

npm

npmが使えるようにしておきましょう。まだの方は、こちらの記事の他にもわかりやすく説明されている記事がたくさんあるので調べてみてください。

https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea

wp-envを使ってみる

では、実際にwp-envを使って環境を作ってみましょう。

まずは、デスクトップ（でもどこでもいいんですが）にプロジェクトのファイルを用意します。今回はwp-env-testとかにしておきます。

$ mkdir wp-env-test
$ cd wp-env-test

そして、npmを初期化します。

$ npm init

そのあとに、@wordpress/envをインストールします。

$ npm i @wordpress/env --save-dev

そこそこ時間がかかるので、気長に待ちます。

インストールが終わったらpackage.jsonに以下のスクリプトを設定します。既存で入っているものは消しても大丈夫です。

"scripts": {
    "wp-env": "wp-env"
}

では、ここまでうまくいっているか、実際に立ち上げてみましょう。

$ npm run wp-env start

ターミナルでWordPres startedと出たら、http://localhost:8888/にアクセスしてみましょう。WordPressサイトが表示されていれば成功です。

ちなみにWordPressを止めるには、

$ npm run wp-env stop

と入力します。

まとめ

さくっと利用する分には、ここまでの流れで利用できるかと思います。

より便利に使うためには.wp-env.jsonという設定ファイルを活用していくと良いでしょう。

https://ja.wordpress.org/team/handbook/block-editor/packages/packages-env/