Wordpressブロックエディタ用プラグインを作る① 〜環境準備〜
はじめに
この記事は公式チュートリアルを元に自分の備忘録として制作方法を記録したものです。
記事を書くきっかけとなったのはWordpress 5.9からブロックエディタプラグインの設定で block.json を使うようになり、開発が少し簡易になったことです。
最終的なディレクトリ構成
wp-develop/
+- study/ # プラグイン学習用
+- vendor/ # 既存のプラグイン・テーマを置く
| +- plugins/
| +- classic-editor
+- .wp-env.json # 設定ファイル
この章のゴール
- WordPress environmentツールをインストール
- Docker上で開発用Wordpressを動かす
事前に必要な環境
下記はすでにインストールされている前提で進めます。
- Node v16
- Docker desktop
- Visual Studio Code
公式チュートリアルでは Node v14 と書かれてましたが、後述する npx @wordpress/create-block [プロジェクト名] の際にエラーが出たので Node v16 を使用します。
Node のインストールには nvm を使うよう書かれてますが、もちろんこれは自由です。
自分は nodebrew を愛用しています。
WordPress environment ツールのインストール
すでに自前で開発用Wordpress環境があるならこの章は不要です。
開発用のWordpress環境を作るためのDockerイメージをグローバルインストールします。
$ npm -g install @wordpress/env
インストール完了したらWordpressを起動します。
wp-develop の部分は自分の環境にあわせて変更してください。
$ cd wp-develop
$ wp-env start
ブラウザから下記にアクセスして起動を確認します。
動作が確認できたらいったん終了させます。
$ wp-env stop
WordPress environment ツールの注意点
Wordpressは起動フォルダごとに作成される。
wp-env start を実行するとDockerボリューム（約390MB）が作成され、設定や投稿はプロジェクト毎に別々に保存されます。
テストでほいほい作るとその度にディスク容量が圧迫されるのでお気を付けください。
Wordpressを削除するには
作成済みのWordpressを削除するにはチュートリアルの アンインストール – やり直し # が参考になります。
起動フォルダがプラグインフォルダとしてマウントされる
起動フォルダはWordpressのプラグインフォルダ内に自動的にマウントされ、プラグインが有効化されます。
プラグインを１つだけ開発するならそれもアリですが、将来的に複数のプラグインを作るなら後述する .wp-env.json を使ってマウントされないように設定することをお勧めします。
.wp-env.jsonで環境を指定
使用するプラグイン、テーマなどをあらかじめ指定できます。
wp-develop/.wp-env.json を作成して下記の内容で保存します。
{
"plugins": [
"./vendor/plugins/classic-editor"
]
}
下記の設定がされました。
- 起動フォルダをプラグインにマウントしない
- 既存の「classic-editor」を有効にする
おわり
ここまでで開発用Wordpressの準備ができました。
実装前の下ごしらえ編に続きます。
Discussion