WordPress ローカル開発環境いろいろ

※本記事は [Sapporo WordPress Meetup](https://www.meetup.com/ja-JP/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 が提供する開発環境です。公式ページの日本語版は[こちら](https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/get-started-with-wp-env/)。Docker の深い知識が無くても大丈夫です。

### 特徴

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


### 準備

* Docker は [Docker Desktop](https://www.docker.com/ja-jp/products/docker-desktop/) を使うと便利です。Windows 版は [WSL2 を有効にします](https://qiita.com/tatsushi_do_ob/items/a2b018a7eaaa84670d91)
* Node.js も必要です

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

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

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

### 構成のカスタマイズ
作業用ディレクトリに``.wp-env.json``を配置することで、さまざまな設定をカスタマイズできます。
```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``コマンドで再設定します。

[公式サイト](https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/#wp-envjson)ですべての設定が解説されています。

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

### 2-1) Studio by WordPress.com

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

![{E827D3AB-730E-48B5-AC9B-BFB46333FE41}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124288/4a002e9d-d75e-956e-94b0-7521ad72bbc8.png)

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

### 2-2) WordPress Playground

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

![{93BF52E6-2EBC-462B-865F-16B72483ED22}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124288/0e496fde-b62e-e78d-6782-10830b40c8b2.png)

#### 特徴
* デフォルトではブラウザを閉じるとデータベースの内容もすべて消えるので、編集や設定内容も消える
* サイト右上から、変更内容をローカルに保存する設定ができる
![{7374F267-503F-453D-8160-649A679647BD}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124288/a97ad4d1-a683-d804-abc8-2c13bae32da1.png)

* [blueprints](https://github.com/WordPress/blueprints/blob/trunk/docs/what-are-blueprints-what-you-can-do-with-them.md) という機能を使い、設定のカスタマイズができる 
```json
{
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "plugins": ["wp-multibyte-patch"],
  "login": true,
  "landingPage": "/wp-admin/plugins.php"
}
```
この例では、PHP や WordPress のバージョン、既定のプラグイン、ログイン状態の設定、ランディングページの設定をしています。なお、``.wp-env.json`` とは互換性がありません。

* [日本語に設定するのが結構大変](https://ben-no.blog/introducing-wordpress-playground/)
* 個人的な印象として、一時的なプラグインのデモなど消えることが前提のページでの使用に向いているかもしれません

### 2-3) VS Code 用 WordPress Playground 拡張機能
https://marketplace.visualstudio.com/items?itemName=WordPressPlayground.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 プラグインはある程度開発に使えるレベルかもしれません。ただブロック開発を行ったところ、ときどきメモリ系のエラーで落ちることがありました。

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