Dockerを使うローカル開発環境の手順です。
wp-env公式ドキュメントに沿って、Docker、Node.js、npm、Gitを用意します。
既存のpackage.jsonを丸ごと置き換えず、必要なscriptsだけを追加してください。
いつもはLocalを使ってWeb制作をしているのですが、
PCをMacBookAirに変えたので、公式が推奨しているwp-envの環境構築をしてみました。
結論を言うとクライアントワークはLocalで十分ですが、
テーマやプラグイン、ブロックエディタ関連の開発はwp-envの方が便利だと思います。
wp-envの環境構築の前提条件
Docker方式では、以下のDockerとNode.jsに加えて、npmとGitも必要です。
Node.jsは公式が案内するLTS版を用意し、Dockerを起動しておきます。
wp-envを最短で環境構築する
公式サイトを見ながら@wordpress/envの環境構築していきます。
Windows、macOS、Linuxで利用できます。
この記事の画面とバージョン表示は過去のmacOS環境の例です。
VS Codeを起動して上部メニューからターミナルを起動します。
node -v、npm -v、git --versionで各コマンドを確認します。
Dockerはdocker infoでエンジンへ接続できることも確認してください。
npmのバージョン表示だけでは、Dockerの起動やGitの導入までは確認できません。
package.jsonの作成
作業するフォルダを作成して、ディレクトリの場所に切り替えます。
例：cd /Users/motoki/Documents/wordpress/develop
package.jsonがまだない新規フォルダで、npm initを実行します。
既存プロジェクトでは作成済みのpackage.jsonを使います。
最初にプロジェクト名を打ちます。
あとはリターンキーを押していき、最後にyesと入力。
フォルダにpackage.jsonが作成されます。
@wordpress/envのインストール
続いて下記のコマンドを打って@wordpress/envのインストールします。
npm i @wordpress/env --save-dev
インストール後、node_modulesフォルダとpackage-lock.jsonというファイルが生成されます。
package.jsonの編集
wp-envというコマンドを使えるようにするためにpackage.jsonを開いて、下記のコードを追記します。
既存のscripts内に"wp-env": "wp-env"を追加します。
以下は過去のpackage.json全体の例です。
依存関係の^7.0.0を転記せず、インストール時に記録されたバージョンとpackage-lock.jsonを保持してください。
{
"name": "develop",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"wp-env": "wp-env",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@wordpress/env": "^7.0.0"
}
}DockerにWordPressをインストール
次のコマンドを打って、DockerにWordPressをインストールします。
npm run wp-env start
ターミナルに起動完了と接続先が表示されたら、ブラウザから確認します。
エラーが出た場合は後述の切り分けを行ってください。
ブラウザから下記のURLにアクセスしWordPressが表示されているか確認しましょう。
http://localhost:8888/（ログイン画面）。
設定でポートを変えた場合は、起動時に表示されたURLを使ってください。
管理画面にログインしたい場合は以下の通りです。
http://localhost:8888/wp-login.php
ユーザー名：admin
パスワード：password
wp-envの更新方法
とりあえず WordPressが表示できたものの、どうやってテーマやプラグインを更新するのかローカルフォルダに直接アクセスできるLocalとは違ってわかりづらいと思います。
実際の更新方法を書いておきます。
.wp-env.jsonの作成
同階層に.wp-env.jsonというファイルを作成します。
※先頭にドットがつきます。
例えば下記の内容のコードを記載すると、プラグインがインストールされて有効の状態で表示されます。
{
"plugins": [
"https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip"
]
}.wp-env.jsonファイルの作成後、ターミナルで以下のコマンドを打つとWordPressの環境がアップデートされます。
npm run wp-env start -- --update
Done!と表示されましたら確認してみましょう。
自作テーマやプラグインをインストールする
以下ではwordpress/develop/にpackage.jsonと.wp-env.jsonを置き、developの隣にpluginsとthemesを置きます。
相対パスは.wp-env.jsonの場所を基準にします。
wordpress
├develop（package.jsonと.wp-env.json）
├plugins
│ └my-plugins（フォルダのままでOK。中身はmy-plugin.phpのみ）
└themes
└my-theme （フォルダのままでOK。中身はstyle.cssとindex.phpのみ）
.wp-env.jsonの記述は以下の通り。
{
"themes": [
"../themes/my-theme"
],
"plugins": [
"https://downloads.wordpress.org/plugin/wp-multibyte-patch.latest-stable.zip",
"../plugins/my-plugins"
]
}更新後、自作テーマや自作プラグインの追加・有効化を管理画面で確認します。
プラグインのPHPにはPlugin Nameヘッダー、テーマのstyle.cssにはTheme Nameヘッダーなど、WordPressが認識できる内容が必要です。
空ファイルを置くだけでは使えません。
この例のstyle.cssとindex.phpはクラシックテーマ用で、ブロックテーマの必須ファイルはstyle.cssとtemplates/index.htmlです。
.wp-env.jsonは他にもさまざまな指定ができます。
- core: WordPressのバージョンを指定できる
- port: ポート番号を指定できる。
- config: wp-config.phpの設定を変更できる
- mappings: 画像等のディレクトリをローカルに指定できる。
まとめ
冒頭で書いた通り、このwp-envを使った環境構築は
テーマやプラグイン、ブロックエディタ関連の開発の場合におすすめです。
VS Codeのターミナルから操作できますが、Dockerの稼働とブラウザでの表示確認も必要です。
クライアント案件でも利用できます。
画面中心で管理したいか、設定ファイルで開発環境を共有したいかなど、作業方法に合わせてLocalと使い分けてください。
気になった方は是非試してみてください。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
停止・更新と切り分け
npm run wp-env stop
npm run wp-env start -- --update上の2行は停止と更新の別操作です。
更新オプションは半角ハイフン2個を使い、npmへ渡す区切りの--も必要です。
エラー時はDockerの起動、使用ポート、.wp-env.jsonのJSON構文と相対パスを順に確認します。
既定のログイン情報はローカル検証用で、インターネットへ公開する環境には使いません。
stopは環境を停止します。
resetやdestroyはデータを失う操作なので、停止の代わりに実行しないでください。
変更前の設定と開発データを退避し、設定を戻す場合は退避した.wp-env.jsonへ戻して再起動します。
Dockerでの起動自体は利用者の環境で確認が必要です。
よくある質問：wp-envでWordPressのローカル環境を作るとき
wp-envは、何のための環境ですか？
記事では、Dockerを使うローカル開発環境です。
wp-env公式ドキュメントに沿って、Docker、Node.js、npm、Gitを用意します。
テーマやプラグインの開発・テストに使え、クライアント案件にも利用できます。
VS Codeのターミナルで操作しても、Dockerの稼働とブラウザでの確認は別途必要です。
Localとは、どう使い分けますか？
記事では、クライアントワークはLocalで十分ですが、テーマやプラグイン、ブロックエディタ関連の開発はwp-envの方が便利だとしています。
事前に必要なものは何ですか？
この記事のDocker方式では、Docker、Node.js、npm、Gitを用意します。
Windowsも対応していて、Dockerの起動とWSL2バックエンドなど、使用する環境の前提を確認します。
この記事の画面とバージョン表示は、過去のmacOS環境の例です。
最短で環境を作る流れは？
記事では、作業するフォルダを作成してpackage.jsonを作成し、@wordpress/envをインストールして起動します。
既存のpackage.jsonを丸ごと置き換えず、必要なscriptsだけを追加します。
起動後にURLへアクセスして、WordPressが表示されているか確認します。
テーマやプラグインを、追加するにはどうしますか？
記事では、同じ階層に.wp-env.jsonというファイルを作成します。
先頭にドットがつきます。
プラグインを指定するとインストールされて有効の状態で表示され、自作のテーマやプラグインはフォルダのまま追加できます。
ファイル作成後に、ターミナルで更新のコマンドを実行すると環境がアップデートされます。
.wp-env.jsonでは、ほかに何を指定できますか？
記事では、coreでWordPressのバージョン、portでポート番号、configでwp-config.phpの設定、mappingsで画像等のディレクトリをローカルに指定できます。
エラーが出たときは、何を確認しますか？
記事では、エラー時はDockerの起動、使用ポート、.wp-env.jsonのJSON構文と相対パスを順に確認します。
更新オプションは半角ハイフン2個を使い、npmへ渡す区切りのハイフン2個も必要です。
停止や初期化のコマンドで、気をつけることは？
記事では、stopは環境を停止します。
resetやdestroyはデータを失う操作なので、停止の代わりに実行しないでください。
変更前の設定と開発データを退避し、設定を戻す場合は退避した.wp-env.jsonへ戻して再起動します。
既定のログイン情報はローカル検証用で、インターネットへ公開する環境には使いません。
なお、Dockerでの起動自体は利用者の環境で確認が必要です。
