WordPressの Docker環境が簡単に。wp-envを使ってみよう

WordPressのテーマやプラグインを作る場合、XAMPPや MAMPなどの仮想環境ソフトで作るとか、Dockerで作るなど色々な方法があります。
そんな中、WordPressの開発チームで公式で開発環境を整備するためのソフトウェア「WordPress/env(wp-env)」をリリースしているので、これを利用して開発環境を整えてみましょう。

Dockerをセットアップする

wp-envは、Dockerを利用するため、まずはこれをセットアップしましょう。Dockerの公式サイトから「Get Started」をクリックして「Docker Desktop」をダウンロードしてセットアップしましょう。

Node.jsをセットアップする

同様に wp-envは、NPMを利用して開発されているため、Node.jsをセットアップします。Node.jsの公式サイトから「推奨版（LTS）」をダウンロードしてセットアップしておきましょう。

プロジェクトのフォルダーを準備する

それでは、いよいよ環境を作成して行きましょう。まずは適当な場所にフォルダーを作成します。

そしたら、package.jsonファイルを生成するため、npmで初期化しましょう。

npm init

wp-envをセットアップする

そして、このディレクトリーに wp-envをセットアップします。

npm i @wordpress/env --save-dev

セットアップが終わったら、先ほど生成された package.json ファイルにコマンドを追記して利用できるようにします。「scripts」の所に次のように追加しましょう。

“scripts”: {
    “wp-env”: “wp-env”
}

WordPressを起動する

これで準備完了です。次のようにコマンドを打ち込むと、ウェブサーバーが起動します。

npm run wp-env start

ウェブブラウザーで localhost:8888 にアクセスをすると、WordPressが起動します。

管理画面には、次の情報でログインができます。

http://localhost:8888/wp-login.php
admin / password

.wp-env.jsonでカスタマイズ

このままでは、テーマもプラグインも見えないのでカスタマイズできません。wp-envでは、環境ファイルとして「.wp-env.json」というファイルを作ることで、自作のテーマやプラグインをインストールすることができます。

まずは、開発しているフォルダー内に .wp-env.jsonというファイルを作成します。ファイル名の先頭が「.（ドット）」なので気をつけましょう。

そしたら、例えば次のように記述してみましょう。

{
  “plugins”: [
    “https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip”
  ]
}

実際のパスは、WP Multibyte Patchの「ダウンロード」ボタンのリンク先をコピーして貼り付けると良いでしょう。

こうして、サーバーを再起動します。

npm run wp-env start —update

こうして管理画面にログインし、「Plugins」を見ると WP Multibyte Patchがインストールされ、有効化されていることが分かります。このように、環境ファイルにあらかじめプラグインなどを列記することで、自動的にインストールすることができます。

.wp-env.jsonには、次のような内容を記述することができます。

• core: WordPressのバージョンを指定できます。省略すると最新版になります
• plugins: 配列でプラグインを指定できます。ZIPファイルへのパスや GitHubへのパスで指定します。
• themes: テーマを配列で指定できます。
• port: ポート番号を指定できます。標準で 8888および 8889で起動します
• config: wp-config.phpの設定内容を上書きできます
• mappings: ディレクトリをマッピングすることができます

自作のテーマファイルをインストールする

それでは、ここで準備した環境でオリジナルのテーマを作成してみましょう。まずは、プロジェクトフォルダーに適当なフォルダーを作成します。

そして、フォルダーの中にテーマファイルを構成する最低限のファイルである「index.php」と「style.css」の2つのファイルを準備します。

そしたら、.wp-env.jsonファイルにこのテーマファイルをインストールするための設定を追記していきましょう。

{
  "themes": [
    "./tomosta"
  ],
  “plugins”: [
    “https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip”
  ]
}

これで、再度再起動します。

npm run wp-env start —update

これで、管理画面から「Themes」を確認すると、今作成したテーマがインストールした状態になっています。これを有効化しましょう。

後は、今作成したフォルダー内でテーマを作っていけばウェブブラウザーをリロードするだけでテーマを作っていくことができるようになります。

その他、テスト環境の準備なども簡単

実は、wp-envを起動するとウェブサーバーが2つ起動しています。「8888」とテスト環境用の「8889」というポートでも閲覧することができます。

もう1つのポートを「テスト環境」として、別のバージョンの WordPressで構築するとか、プラグインのインストール状況を変えるなどでテストをすることができます。

.wp-env.json上で、テスト環境用の記述なども可能なので公式ドキュメントを確認すると良いでしょう。