---
title: "wp-envを使ってWordPress開発を加速させる方法"
canonical_url: "https://olein-design.com/blog/try-wp-env"
language: "ja"
date_published: "2020-10-29T11:36:45+09:00"
date_modified: "2024-06-20T14:36:49+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "wp-env"
---

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

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

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

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

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

## Dockerを用意

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

[埋め込みコンテンツ](https://www.docker.com)

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

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

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

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

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

| `"core"` | 使用する WordPress のバージョンなどを指定。<br>`null` が指定されている時には最新のものを使用する。<br>`WordPress/WordPress#6.2.1` といった形でバージョンを指定できる。 |
| --- | --- |
| `"phpVersion"` | PHP のバージョンを指定 |
| `"plugins"` | 環境でインストールし有効化したいプラグインを指定 |
| `"themes"` | 環境でインストールしたいテーマを指定 |
| `"port"` | 優先的に利用したいポート番号を指定 |
| `"testsPort"` | テストサイトのポート番号を指定 |
| `"config"` | `wp-config.php` の定数をマッピングします。以下のような値を設定できます。<br><br>`WP_DEBUG: true,SCRIPT_DEBUG: true,WP_PHP_BINARY: 'php',WP_TESTS_EMAIL: 'admin@example.org',WP_TESTS_TITLE: 'Test Blog',WP_TESTS_DOMAIN: 'localhost',WP_SITEURL: 'http://localhost',WP_HOME: 'http://localhost',` |
| `"mysqlPort"` | 公開する MySQL のポート番号を指定 |

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

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

[埋め込みコンテンツ](https://www.npmjs.com/package/@wordpress/env)