※本記事は 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 本体ファイルが配置されます。
構成のカスタマイズ
作業用ディレクトリに.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 プラグインはある程度開発に使えるレベルかもしれません。ただブロック開発を行ったところ、ときどきメモリ系のエラーで落ちることがありました。
どれも気軽に使えるので、試してみると面白いです。