徹底解説！wp-envでWordPressのローカル環境を構築する方法（Docker利用+コマンド付き）

WordPress

投稿日：2024年10月28日(月) 更新日：2024年12月01日(日)

みなさんこんにちは！エンジニアの高澤です！

今回はwp-envでWordPressのローカル環境を構築する方法（Docker利用+コマンド付き）について解説していきたいと思います。

wp-envとは、コマンドなどを通してサーバーを立ち上げずに簡単にWordPressローカル環境を立ち上げることができるツールです。

従来ではXAMPPやMAMPなどのローカル環境が存在しますが、WordPress公式が提供するwp-envを使うことで、さまざまな便利な機能やメリットを活用してモダンな開発環境を利用することができます。

当記事ではこのwp-envについて徹底解説し、手順通りに進めていただければ簡単にローカル環境を構築できるようにいたしましたので、よろしければぜひ当記事をお仕事でご活用いただけましたら幸いです。

1 wp-envとは
2 wp-envに関するWordPress公式ドキュメント
3 wp-envを使用するメリット
4 wp-envでローカル環境を構築する方法
5 wp-envが謎のエラーで使えない時の対処法
6 まとめ

wp-envとは

wp-env（ダブリューピーエンブ）とは、WordPress のローカル開発環境を簡単にセットアップ・管理できるツールのことをいいます。

Dockerコンテナを利用して WordPress サイトをローカル環境に構築し、プラグインやテーマの開発、テスト、デバッグが行えるようにします。

特に、複雑なサーバー設定をせずにコマンドひとつで環境の起動と停止が可能なので、迅速かつ手軽に開発環境を整えたい場合に便利です。

また、.wp-env.json ファイルでテーマやプラグインのディレクトリを設定し、WordPressに同期させることができます。これにより、実際のサーバー環境に近い状態で、効率よく開発を進められます。

WordPress のローカル開発環境を簡単にセットアップするには、このwp-envをインストールする方法がとても便利です。

このwp-envは、Webサイト制作会社のサイト構築をするエンジニアや、テーマ開発、プラグイン開発でまずは導入したいツールといえるかと思います。

wp-envに関するWordPress公式ドキュメント

当記事でwp-envについて解説する前に、事前に公式ドキュメントをご共有させていただきます。

もし当記事の内容で上手くいかないなどが万が一あった場合は、こちらの公式からご確認いただけますと幸いです。

@wordpress/env

wp-env 入門

wp-envを使用するメリット

それではwp-envを使用することのメリットについて解説いたします。

よくよく考えたら他にもローカル環境立ち上げるならXAMPPやMAMPなどが昔からよく使用されていて使いやすいのではないか？と思う方がいるかと多います。

自分もそう思っておりました。しかしwp-envにはXAMPPなどにはない以下のようなメリットがあります。

セットアップが簡単
公式サポート
Dockerによる仮想環境
簡単なファイル同期
統一された開発環境
Dockerによる再現性
迅速なセットアップ

それぞれ解説していきます。

セットアップが簡単

コマンド一つで WordPress 環境を起動・停止でき、面倒なサーバー設定が不要です。テーマやプラグイン開発者が迅速に作業を開始できます。

公式サポート

WordPress の公式ツールであるため、他のツールよりも WordPress との互換性が高く、最新の機能やセキュリティの恩恵を受けやすいです。

Dockerによる仮想環境

Dockerコンテナ内で動作するため、システムに依存しない安定した環境を構築できます。また、開発環境を分離しやすく、複数のプロジェクトで異なる環境を使うことも可能です。

簡単なファイル同期

.wp-env.json でテーマやプラグインを指定するだけで、ローカルファイルとWordPress 環境が自動で同期され、開発効率が向上します。

統一された開発環境

.wp-env.json ファイルに設定がまとめられているため、他の開発者も同じ設定で環境を再現できます。チーム全員が同一環境で作業できるので、動作やバージョンの違いによるトラブルが減ります。

Dockerによる再現性

wp-env はDockerコンテナを利用しているため、OSに依存せず、Windows、macOS、Linux上で同じ環境を簡単に再現可能です。複数の開発者が環境を統一しやすく、動作確認のための設定ミスを防ぎます。

迅速なセットアップ

他の開発者はリポジトリをクローンし、簡単なコマンドで環境を立ち上げられます。新しいメンバーがプロジェクトに参加する際も、すぐに開発を開始できるため、オンボーディング（新しい仲間が組織に順応して活躍できるようサポートする取り組みやそのプロセス）もスムーズです。

wp-envでローカル環境を構築する方法

wp-envでローカル環境を構築する方法について、まずは概要を解説したいと思います。

結論からいうと、以下の流れで進めていただけると簡単にローカル環境を構築することが可能です。

ターミナルを立ち上げる
作業用ディレクトリを作成する
Dockerのインストール
wp-envのインストール
設定ファイル .wp-env.jsonの作成
コマンドでwp-envを起動する

それでは上記の手順に沿って解説させていただきます。この流れに沿って手を動かすだけでwp-envでのWordPressローカル環境を構築できるので、安心して進めてみてください。

ターミナルを立ち上げる

まず最初に、ターミナルを立ち上げましょう。WindowsのPCをお使いの方は、コマンドプロント等のコマンドを入力できるアプリケーションを使用してください。

PCのアプリケーション一覧などにターミナルのアイコンなどがあるはずなので、クリックしていただける大丈夫です。

クリックしていただくと、下図のようにターミナルのコマンド入力エディタが開きます。

ここまでで、ターミナルの準備は完了です。

作業用ディレクトリを作成する

ターミナルを立ち上げたら、次は作業用のディレクトリを作成していきます。

ターミナルの入力エディタにて、以下のコマンドを上から順番に入力して実行してください。こちらはあくまでも参考なので、ご自身の利用状況などに応じて進めてください。

# デスクトップへ移動する
cd desktop

# 作業用ディレクトリ「local_test」を作成する
mkdir local_test

# 作成した「local_test」ディレクトリの中へ移動する
cd local_test

もしコマンドが苦手、という方はご自身の手作業でディレクトリを作成していただいても構いません。

ここでも目的は作業用のディレクトリ「local_test」を作成できればいいので、よろしくお願いいたします。なお、「local_test」というディレクトリ名は適当に考えただけなので、ご自身で好きなディレクトリ名にしていただいても大丈夫です。

作成ができたら、次にDockerをインストールしていきましょう。

Dockerのインストール

作業用ディレクトリの作成が完了したら、次はDockerをインストールしていきます。
Docker自体は「Docker Desktop」をPCにインストールして環境構築していきます。

Dockerを公式サイトからダウンロード

こちらのサイトから、以下のDocker公式のダウンロードページへアクセスしてください。

https://www.docker.com/ja-jp

上記ページへアクセスできたら、画面中央付近にある「Docker Desktopをダウンロードする」というボタンをクリックし、ご自身のPC環境に合わせて適切なDockerを選択してインストールしてください。

具体的なインストール手順は記事が長くなってしまうので割愛しますが、クリックするだけで完了する簡単な作業になるので、ご安心ください。

Dockerを起動する

ご自身のPCへDockerがインストールできたら、Dockerを立ち上げてください。

例えばMacであれば、以下のようにDockerアイコンがアプリケーション一覧に追加されているはずなので、クリックしてください。クリックするだけでDockerが立ち上がります。

クリックして立ち上げていただくと、下図のようにDockerデスクトップアプリが起動して開きます。

現時点ではまだできませんが、下図のようにこのデスクトップアプリからWordPress環境を立ち上げたファイル群が一式確認でき、右上付近にある「Open in IDE」をクリックしていただくとVSCodeなどのエディタを使ってファイル全体を開くことが可能です。

ここまでで、無事Dockerのインストールと起動が完了しました。

Dockerとは

ここでDockerについて解説しておきます。

Dockerとは、ソフトウェアを効率よく開発・実行できる「仮想化技術」の一種です。従来、開発したアプリケーションを他の環境で動かすと動作しないことがありましたが、Dockerを使うとどんな環境でも同じように動作させることができます。

Dockerは「コンテナ」と呼ばれる単位でアプリケーションとその動作に必要なソフトウェアをまとめて管理します。このコンテナにより、アプリケーションの環境ごとの依存関係を気にせず、どこでも簡単に実行可能です。たとえば、開発者が自分のPCで動かしたアプリを、同じ設定で本番サーバーにもすぐに移すことができます。

Dockerは特に開発環境の共有やチームでの協力に強く、環境構築がシンプルで、初心者でも効率的に開発できるツールとして人気です。

wp-envを利用するのに、このDockerについて当記事で解説する内容さえ把握していれば問題ありませんが、より深く色々とDockerについて知っておくとより便利に高度に使いこなすことができるので、余裕のある方はぜひ学習に挑戦してみてください。

`package.json`ファイルの作成手順

Dockerのインストールと起動まで完了したら、次はnpmのプロジェクトを初期化し、package.jsonファイルを作成します。

ここで作成するpackage.jsonファイルには、プロジェクトの依存関係やスクリプトなどの情報が記載され、npmパッケージの管理が簡単になります。

# npmプロジェクトを初期化し、デフォルト設定で package.json ファイルを作成
npm init -y

上記コマンドは必ず先ほど作成した作業用ディレクトリである「local_test」内で実行してください。

wp-envのインストール

次に、WordPress のローカル開発環境を簡単に構築するために、wp-env をインストールします。wp-env を使用すると、WordPress サイトを Docker 上で簡単に起動・停止できるため、開発作業が効率的になります。

# WordPress のローカル開発環境構築ツール wp-env をインストール
# (開発用依存として追加)
npm install -D @wordpress/env

設定ファイル `.wp-env.json`の作成

次に、WordPressのローカル環境構築に必要な設定ファイル .wp-env.json を作成します。

このファイルでは、最低限の設定を行い、テーマディレクトリを WordPress に正しく同期させます。

今回の設定内容は、現在いるプロジェクトディレクトリ内の「wp-theme」フォルダを WordPress の wp-content/themes ディレクトリと同期させるものです。

`.wp-env.json`を作成

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

この設定によって、この後作成するWordPressテーマファイルのプロジェクトである「mytheme」フォルダが WordPress のテーマディレクトリに同期され、テーマとして認識されるようになります。

`.wp-env.json`とは

ここで.wp-env.jsonについて解説させていただきます。

.wp-env.jsonとは、WordPressのローカル開発環境を構成するための設定ファイル（JSONファイル）です。

このファイルを使うことで、wp-env が提供する環境の詳細をカスタマイズできます。例えば、WordPressのバージョン、テーマやプラグインのパス、データベースの初期状態など、開発者が望む環境を正確に指定することが可能です。

.wp-env.json を使うことで、複数人での開発や複数の環境をまたぐ開発作業が容易になるため、チーム開発での再現性が向上し、複雑な設定を一括管理することができます。

例えば、以下のような使用例があげられます。

WordPressバージョン指定
プラグインやテーマのディレクトリ指定
データベース設定
WP_DEBUG設定

そして以下は、基本的な .wp-env.json の例です。

{
  "core": "latest",
  "plugins": [
    ".",
    "https://downloads.wordpress.org/plugin/akismet.latest-stable.zip"
  ],
  "themes": [
    "https://github.com/WordPress/twentytwentyone/archive/refs/heads/master.zip"
  ],
  "config": {
    "WP_DEBUG": true,
    "WP_DEBUG_LOG": true
  },
  "port": 8888
}

上記コードについては、以下の表をご参考にしてください。

“core”: “latest”	WordPressの最新バージョンを使う指定です。`"5.8"` など特定のバージョンを指定することもできます。
“plugins”	ローカルディレクトリのプラグイン（ `"."` で現在のディレクトリを指定）や、外部URLから取得するプラグインを指定できます。
“themes”	テーマもプラグイン同様にローカルや外部URLから指定可能です。
“config”	`WP_DEBUG` など、WordPressの設定を指定して、デバッグ情報やエラーログを表示できるようにします。
“port”: 8888	ローカルサーバーのポート番号を指定します。

このように、.wp-env.json はWordPressのローカル開発環境を設定するためのJSONファイルであり、WordPressの開発環境を簡単に構築できるツール「@wordpress/env」に対応しており、設定を細かくカスタマイズすることができます。

ちなみにWordPress公式ドキュメントに以下のURLで.wp-env.jsonについて詳しく解説されているため、仕事などでより詳しく確認したい方はこちらをご参考になさってください。

@wordpress/env

実装に使用するテーマファイルの作成

# サンプルのWordPressテーマファイル「mytheme」を作成する
mkdir mytheme

テーマが適切に反映されているか確認するために、最低限のファイル index.php と style.css を作成し、「mytheme」ディレクトリに配置します。

以下のコマンドを参考に、作成してください。

# WordPressテーマファイル「mytheme」の中へ移動
cd mytheme

# WordPressテーマファイル「index.php」を作成
touch index.php

# WordPressテーマファイル「style.css」を作成
touch style.css

mythemeファイルの中にindex.phpとstyle.cssの2つが作成できたらVSCodeなどのエディタで開いて、以下のようにそれぞれコードをファイルに記述してください。

mytheme/index.php

<h1>Hello wp-env!!!</h1>

mytheme/style.css

/*
Theme Name: MyTheme
*/

@charset "utf-8";

ここまでで、ファイル構成は以下のようにシンプルになります。

これで、WordPressのローカル環境の立ち上げ自体は完了です。お疲れ様でした！

あとはコマンドでこのローカル環境を起動してWordPressへブラウザからアクセスできるようにしていきます。

コマンドでwp-envを起動する

wp-envを使用すると、WordPress のローカル開発環境をコマンドひとつで簡単に起動・終了できます。ここでは、環境の起動と終了方法について説明します。

環境を起動するには、以下のコマンドを実行します。

# WordPressの環境を起動 (初回はセットアップに少し時間がかかります)
npx wp-env start

そして以下のコマンドでローカル環境を停止することができます。

# WordPressの環境を停止
npx wp-env stop

ブラウザからWordPressへログインする

環境の起動が完了したら、以下のURLをブラウザにてアクセスしてみてください。「http://localhost:8888/」と「http://localhost:8889/」の2つがあるかと思いますが、これはwp-envが2つWordPress環境を自動で作成してくれており、開発者の用途によって自由に使い分けていただければと思います。

http://localhost:8888/
http://localhost:8888/wp-admin/

http://localhost:8889/
http://localhost:8889/wp-admin/

初期の時点のアカウントとパスワードは「admin」と「password」です。

上記どちらかのURLの「/wp-admin/」のURLへアクセスしていただきますと、下図のようにログイン画面が表示されるかと思います。

ユーザー名には「admin」、パスワードには「password」を入力してログインしてください。

すると、無事ログインできてWordPressの管理画面が表示されるかと思います。

これでwp-envのローカル環境構築の作業は完了になります。お疲れ様でした！

WordPressを起動してテーマを確認

最後に、管理画面から作成したテーマ「MyTheme」が反映されているか確認しましょう。

WordPress管理画面左メニューの「外観」の「テーマ」を開き、下図のように「MyTheme」があるはずです。有効化して先ほどindex.phpに入力した内容が表示されているかフロントページを開いて確認してみてください。

これでwp-envでのサイト構築作業がイメージできるようになったかと思います。

wp-envが謎のエラーで使えない時の対処法

筆者の経験をもとにこのセクションを設けたのですが、実はこれまでwp-envを開発環境ツールとして使っていたのですが、ある日突然使えなくなってしまいました。

ある日いつものようにnpm run wp-env startコマンドを実行した際に、以下のようなエラーが発生しました。（以下エラー文は省略されたものになります）

✖ Error while running docker compose command.

[wordpress 10/19] RUN apt-get -qy install git:
Reading package lists...
Building dependency tree...
Reading state information...
Package git is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or is only available from another source.

E: Package 'git' has no installation candidate

どうやらエラーの発生箇所は、Docker イメージのビルド時に apt-get install git コマンドを実行するステップ部分のようで、このエラーは以下のような理由で発生する可能性があるようです。

Debianのリポジトリの変更
使用しているDockerイメージが古いため、apt が正しいリポジトリにアクセスできていない。
依存パッケージの問題
git パッケージが依存する他のパッケージが利用できない状態になっている。
リポジトリの設定が適切でない
sources.list の記述が正しく設定されておらず、パッケージが取得できない。

上記を踏まえてエラー解決に向けて改善を進めていただのですが、一向に解決せず時間だけが過ぎていくだけでした。そこで代替案として「wp-envを利用しない形でDocker ComposeでWordPress開発環境を作成する」を考えました。

幸いこちらの方法で快適にWordPressのローカル環境を利用することができております。

この方法については、同じように困っている方に向けて以下の記事を執筆いたしましたので、よろしければ解決にお役立ていただけましたら幸いです。

すぐできる！Docker ComposeでWordPressローカル環境を構築する方法を徹底解説

釈然としないところですが、もしwp-envを使用していて同じような状況でwp-envでWordPress開発環境を使用できないなどで困っておりましたら、wp-envを利用しない形でDocker ComposeでWordPress開発環境を作成する」を試してみてください。

まとめ

今回はwp-envでWordPressのローカル環境を構築する方法（Docker利用+コマンド付き）について解説させていただきました。

wp-envは、コマンドなどを通してサーバーを立ち上げずに簡単にWordPressローカル環境を立ち上げることができるツールで、WordPress公式が提供してくれております。

XAMPPやMAMPなどのローカル環境が存在しますが、WordPress公式が提供するwp-envを使うことでさまざまな便利な機能やメリットを活用してモダンな開発環境を利用することがでるので、今やWebサイト制作やプラグイン開発に必須のツールといっても過言ではありません。

よろしければぜひ当記事をお仕事でご活用いただけましたら幸いです。

執筆者

UMENOKI編集部高澤翔汰

歴5年目（2024年8月以降から5年目です）のエンジニアです！
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ（iPhoneアプリ）やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です！

詳しく見る

お気軽に皆さんのご要望をお聞かせください！

どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！

例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など