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

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

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

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

Dockerを用意

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

Docker: Accelerated Container Application Development

Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.

www.docker.com

npm

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

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 でカスタマイズする

上記のように環境と立ち上げると、以下のようなメッセージをターミナルで確認することができます。

Warning: could not find a .wp-env.json configuration file

これは .wp-env.json ファイルを見つけれませんでしたと書いてあるのですが、.wp-env.json を使うことで、立ち上げる環境をカスタマイズすることができます。

以下に簡単にまとめてみます。よろしければリンクのドキュメントも一緒に参考にしてください。

例えばですが、テーマ開発をサクッと始めたい場合などは、このような雛形を用意しておき、必要に応じてカスタマイズしていくのも良いでしょう。

{
    "core": null,
    "phpVersion": "8.1",
    "themes": [ "." ],
    "config": {
        "WP_DEBUG": true,
        "WP_DEVELOPMENT_MODE": true
    }
}

@wordpress/env

A zero-config, self contained local WordPress environment for development and testing.. Latest version: 10.1.0, last published: 4 days ago. Start using @wordpr…

www.npmjs.com