【WordPress】wp-envを使ってローカル開発環境を構築する方法

WordPress 環境構築

【WordPress】wp-envを使ってローカル開発環境を構築する方法

なやむくん
WordPressで簡単に環境構築をする方法を知りたい…。
なやむさん
wp-envを利用した方法があると聞いたけど、どうしたらいいかわからない…。

などの疑問や悩みを解決してまいります。

前提条件

wp-envを使って、WordPressの開発環境を構築するには以下のインストールが前提条件となります。

前提条件

  • Dockerがインストールされていること
  • Node.js と npm がインストールされていること

それぞれインストールされているかどうかは以下のコマンドで確認ができます。

// Dockerがインストールされているか確認
docker --version
// Docker version 27.2.0, build 3ab4256

// Node.jsがインストールされているか確認
node -v
// v18.20.0

// npmがインストールされているか確認
npm -v
// 10.9.0

wp-envのインストール

wp-envをグローバルにインストールするため以下のコマンドを実行します。

npm install -g @wordpress/env

コマンドを実行するとインストールが開始します。
終了したら正常にインストールが完了しているか以下コマンドで確認ができます。

wp-env --version

// 10.9.0
みつた
バージョンが表示されれば、正常にインストールができているのでOKです!

開発ディレクトリの作成と移動

wp-envをグローバルにインストールできたら、次に開発ディレクトリを用意し、移動します。

// 開発ディレクトリの作成
mkdir wp-env-test

// 開発ディレクトリへ移動
cd wp-env-test

wp-envの実行

開発ディレクトリに移動したら、以下のコマンドでwp-envを起動します。

wp-env start
みつた
最初は起動まで時間がかかるので待ちましょう。

警告文について

今回のように構成ファイルが存在しないディレクトリでwp-env startを実行すると以下のように警告文が表示されますが、特に問題はありません。

Warning: could not find a .wp-env.json configuration file and could not determine if 'DIR' is a WordPress installation, a plugin, or a theme.

// 警告:.wp-env.json 設定ファイルが見つからず、'DIR' が WordPress インストールかプラグインかテーマかを判断できませんでした。

.wp-env.jsonは、WordPressのローカル開発環境をカスタマイズするための設定ファイルで、これを使うとwp-envがどのような環境を構築するか細かく指定できます。
構成の詳細については @wordpress/env パッケージを参照してください。

このあと.wp-env.jsonのカスタマイズの解説がありますのでそこでファイルを作成しますが、もちろんwp-env start実行前に作成しても問題ありません。

もし以下のエラーが表示された場合は、Gitのバッファサイズの制限が原因の可能性があります。(自分がそうでした)

エラー文を表示する
✖ Cloning into 'DIR'...
remote: Enumerating objects: 6085, done.        
remote: Counting objects: 100% (6085/6085), done.        
remote: Compressing objects: 100% (4979/4979), done.        
error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)
error: 1206 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output

GitError: Cloning into 'DIR'...
remote: Enumerating objects: 6085, done.        
remote: Counting objects: 100% (6085/6085), done.        
remote: Compressing objects: 100% (4979/4979), done.        
error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)
error: 1206 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output

    at Object.action ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1451:25)
    at PluginStore.exec ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1500:29)
    at 'DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1927:43
    at new Promise (<anonymous>)
    at GitExecutorChain.handleTaskData ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1925:16)
    at GitExecutorChain.<anonymous> ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:1909:44)
    at Generator.next (<anonymous>)
    at fulfilled ('DIR'/.nvm/versions/node/v18.20.0/lib/node_modules/@wordpress/env/node_modules/simple-git/dist/cjs/index.js:52:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  task: {
    commands: [
      'clone',
      '--depth=1',
      '--no-checkout',
      'https://github.com/WordPress/wordpress-develop.git',
      ''DIR'/wp-env/5673407a245a00bd846ad74044862034/tests-WordPress-PHPUnit'
    ],
    format: 'utf-8',
    parser: [Function: parser]
  }
}

もし同じようなエラー内容の場合は以下の記事を参考にしてみてください。

参考記事
【WordPress】wp-env startを実行した際にエラーが起きてローカル環境を構築できないときの対処法
【WordPress】wp-env startを実行した際にエラーが起きてローカル環境を構築できないときの対処法

続きを見る

以下のようにターミナルに表示されれば起動完了です。

WordPress development site started at http://localhost:8888
WordPress test site started at http://localhost:8889
MySQL is listening on port 64358
MySQL for automated testing is listening on port 64506

 ✔ Done! (in 471s 361ms)

ローカル環境にアクセス

これでhttp://localhost:8888/にアクセスすると、以下のようにWordPressサイトにアクセスができます。

ローカル環境立ち上げ後の表示ページ

またWordPressの管理画面には http://localhost:8888/wp-admin/ でアクセスできます。
初期アカウントとパスワードは「Admin」と「password」です。

WordPressのログイン画面
みつた
ちなみにhttp://localhost:8889/でもアクセスができます!

wp-envの終了

wp-envを終了する場合は以下のコマンドを実行します。

wp-env stop

以下のように表示されたら正常に終了したことになります。

✔ Stopped WordPress. (in 15s 941ms)

.wp-env.jsonのカスタマイズ

開発サーバーを立ち上げることができましたが、肝心のテーマもなければプラグインも見えない状態です。

少し話しましたが、wp-envでは.wp-env.jsonという環境ファイルを作成して自作のテーマやプラグインをインストールすることが可能です。

まずは開発ディレクトリ内に.wp-env.jsonを作成します。

// .wp-env.jsonファイル作成
touch .wp-env.json
みつた
先頭に「.」が必要なので注意してください。

自作テーマファイルをインストールする

それでは自作のテーマファイルを開発環境にインストールしていきます。

次に任意の名前でフォルダを作成します。

// mitsutaの部分は任意のフォルダ名にしてください
mkdir mitsuta

作成したフォルダの中には、index.phpとstyle.cssの最小限のファイルを配置します。

index.phpには確認しやすいように以下のように記述しておきます。

<h1>Hello WordPress!!</h1>

.wp-env.jsonに作成したテーマファイルをインストールするために以下のように記述します。

// mitsutaの部分は任意のフォルダ名にしてください
{
  "themes": ["./mitsuta"]
}

これで完了です。再度wp-envを再起動します。

wp-env start —update

wp-envを再起動したら、管理画面のAppearanceのThemesを確認して作成したテーマが存在していたらインストール成功です。

Themesのインストールしたテーマが存在する

Activateをクリックし、テーマを変更します。index.phpに記述した内容が表示されたらOKです。

Hello WordPress!!

プラグインのインストール

プラグインのインストール方法を解説します。

今回は試しにWP Multibyte Patchプラグインを開発環境にインストールしてみましょう。

.wp-env.jsonを以下のように編集します。

{
  "themes": ["./mitsuta"],
  "plugins": ["https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"]
}

パスは、WP Multibyte Patchのダウンロードボタンのリンク先をコピーしています。
記述したら再度wp-envを再起動してください。

wp-env start —update

再起動できましたら今度は管理画面のPluginsを確認してください。WP Multibyte Patchがあればインストールが完了です。

WP Multibyte Patchがインストールされている

その他.wp-env.jsonのカスタマイズ例

最後に.wp-env.jsonのカスタマイズ例を簡単に解説します。

これまで自作テーマとプラグインのインストールで使用したthemespluginsしか紹介していませんでしたが、その他にも指定できるものがあるので紹介します。

{
  "core": "WordPress/latest",
  "config": {
    "WP_DEBUG": true,
    "SCRIPT_DEBUG": true
  },
  "plugins": [
    "."
  ],
  "themes": [
    "https://github.com/WordPress/twentytwentyone/archive/refs/heads/main.zip"
  ],
  "mappings": {
    "wp-content/mu-plugins": "./mu-plugins"
  },
  "port": 8888,
  "phpVersion": "8.0"
}

指定しているキーの解説

  • core
    WordPressのバージョンを指定し、latestは最新バージョンを取得
  • config
     WordPressのデバッグオプションなどの設定
  • plugins
    プロジェクトに含めたいプラグイン
  • themes
    使用したいテーマのリポジトリURLを指定
  • mappings
    ローカルのフォルダをWordPress環境の特定のディレクトリにマッピングできる
  • port
    開発用のWordPressサイトにアクセスするポート番号(任意で設定)
  • phpVersion
    PHPのバージョンを指定

mappingsを使用することで、開発中のプラグインやテーマのファイルがローカルで変更されたとき、それを自動的にDockerコンテナ内に反映させることができます。

{
    "mappings": {
      "wp-content/themes/mitsuta/": "./mitsuta/"
    }
}

mappingsを使用せずにコンテナ内にローカルの内容を反映させたい場合は、以下のコマンドを実行してコピーさせることができます。

docker cp <ローカルのファイルパス> <コンテナ名またはID>:<コンテナ内のパス>

とはいえ、いちいち手動コピーが面倒な場合はmappingsを利用するのがいいでしょう。

まとめ

wp-envを利用するためには、DockerとNode.js、npmのインストールが必要ですが一度インストールしておけば後は簡単にWordPressの環境を構築することができるので便利な機能です。

今回は説明していませんが、Dockerを使って環境構築を行っているので複数人数でプロジェクトディレクトリを共有するにも向いていますし、ビルドツールのViteを使用してより爆速環境を構築したり、DB接続など、よりwp-envを有効活用する方法もあります。

これらについてはまた別の機会に記事を作成できたらと思っています。

  • この記事を書いた人
  • 最新記事

みつた

完全未経験&異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き(現時点では…)

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-WordPress, 環境構築