※本記事は Sapporo WordPress Meetup #17 の内容を Qiita 向けに再編したものです。
Visual Studio Code での作業を前提としています。

WordPress のローカル開発環境

ローカルでの新しい WordPress 開発環境やサンドボックス環境に使える「wp-env」「Studio」「WordPress Playground」の概要や導入について紹介します。皆様の参考になれば幸いです。

これまでのローカルでの開発環境といえば?

使用中の OS に対し、WordPress 動作で必要なサーバ用ソフトなど（Apache//Nginx, PHP, MySQL//MariaDB)をパッケージでインストールする「XAMPP」や「MAMP」「LAMP」などを導入していました。ただし、実際に使っていくと、

サイト毎に PHP のバージョンを変更するなど、バージョン管理が大変
複数人開発時の環境統一がむずかしい
Mac と Windows で互換性がない
デプロイ先と合わず、本番環境でエラーが出る

などの問題を個人的に経験してきました。

① wp-env によるローカル開発環境構築

説明

「wp-env」は Docker で動作する WordPress.org が提供する開発環境です。公式ページの日本語版はこちら。Docker の深い知識が無くても大丈夫です。

特徴

Docker で動作
複数の環境が同居できる（異なるサーバ構成、バージョン、DBなど）。複数人で開発環境を統一するのに便利
PHP のバージョン、ディレクトリ構成、デフォルトプラグインなどの構成を json ファイルで共有できる
Windows では WSL2 が必要

準備

Docker は Docker Desktop を使うと便利です。Windows 版は WSL2 を有効にします
Node.js も必要です

インストール

作業用ディレクトリに移動（デフォルトではディレクトリ名が仮のサイト名になります）
npm -g i @wordpress/env でインストール。既存プロジェクトにローカルで追加もできます
wp-env start で必要ファイルのダウンロードと Docker の設定・起動が行われます
http://localhost::8888 でサイトにアクセスできます

この状態では、個人のホームディレクトリに.wp-envが作られ、その中に各 Docker 環境別に WordPress 本体ファイルが配置されます。

デフォルトのユーザ名は「admin」、パスワードは「password」です。

構成のカスタマイズ

作業用ディレクトリに.wp-env.jsonを配置することで、さまざまな設定をカスタマイズできます。

.wp-env.json

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.zip"
  ], 
  "phpVersion": "7.4",
  "port": 8888,
  "mappings": {
    "wp-content/plugins": "./public/plugins"
  },
  "config": {
    "WP_DEBUG": true
  }
}

この例では、

インストールする WordPress ファイルを最新の日本語版に
デフォルトでインストールするプラグインを WP Multibyte Patch に
PHP を 7.4 に
wp-content//pluginsディレクトリをローカルの ./public/pluginsに
wp-configのWP_DEBUG 設定を true に

しています。ファイルを配置したらwp-env start -updateコマンドで再設定します。

公式サイトですべての設定が解説されています。

②WebAssembly 系動作環境

WebAssebmly を使って、ブラウザ上でサーバ、PHP、DB（SQLite）を走らせ WordPress を直接動作させるものです。PHP, MySQL, Apache などのインストールが不要です。実装の違いでいくつか種類があります。

2-1) Studio by WordPress.com

https://developer.wordpress.com/studio/
公式サイトからインストーラをダウンロードして使用します。独自の管理 UI があります。起動して[サイトを追加]をクリックするだけでサイトが立ち上がります。

特徴

2024年4月にリリースされたAutomattic社による開発環境
WordPress.com にデモサイトを公開可能（要アカウント）
デフォルトで日本語に対応
細かなインストールオプションには（今のところ）未対応

2-2) WordPress Playground

https://wordpress.org/playground/
前述の Studio by WordPress.com のベースとなっている技術です。ページの[Explore Playground]をクリックすれば、そのブラウザ上ですべてが動作します。

特徴

デフォルトではブラウザを閉じるとデータベースの内容もすべて消えるので、編集や設定内容も消える
サイト右上から、変更内容をローカルに保存する設定ができる
blueprints という機能を使い、設定のカスタマイズができる

{
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "plugins": ["wp-multibyte-patch"],
  "login": true,
  "landingPage": "/wp-admin/plugins.php"
}

この例では、PHP や WordPress のバージョン、既定のプラグイン、ログイン状態の設定、ランディングページの設定をしています。なお、.wp-env.json とは互換性がありません。

日本語に設定するのが結構大変
個人的な印象として、一時的なプラグインのデモなど消えることが前提のページでの使用に向いているかもしれません

2-3) VS Code 用 WordPress Playground 拡張機能

同じ技術を使っていますが、これは VS Code のプラグインとして動作し、ローカルの開発環境を提供します。

特徴

任意のディレクトリを開き[Start]をクリックすると、そのディレクトリ構成を自動で識別して WordPress がブラウザで動作する
変更内容はローカルに自動で保存される

動作モード

index モード: index.php ファイルがあるとき。PHP ファイルとして直接実行する
plugin モード: plugin名.php ファイルと必要ファイルがあるとき。対象のプラグイン開発モードになる
theme モード: テーマ名を記載した style.css ファイルがあるとき。対象ディレクトはテーマのディレクトリとして認識される
wp-content モード: plugins と themes ディレクトリがあるとき。対象ディレクトリは wp-content として認識される
wordpress モード: 普通の WordPress ファイルセットがあるとき
playground モード: 何もないとき。ユーザディレクトリに保存された WordPress が仮想的に動作する

まとめ

あくまでも個人的な印象ですが、本格的な多人数開発には wp-env が安定性などを考慮してもよいかもしれません。もちろん個人開発でも XAMP、MAMP をすぐに置き換え可能ではないでしょうか。
WebAssembly 系では Studio は未知数、playground はデモなどに、VS Code プラグインはある程度開発に使えるレベルかもしれません。ただブロック開発を行ったところ、ときどきメモリ系のエラーで落ちることがありました。

どれも気軽に使えるので、試してみると面白いです。