最近のWordPress開発環境を調べてみた

いろいろとWordPressの開発環境ありますが、最近は何が流行ってるのかを調べてみました。

Local

https://localwp.com/
最近といいつつ2016年~2017年ごろには名前を聞いていたDockerベースのGUIツール。当初はMacだけでした。
GUIツールなので、エンジニアじゃなくても使いやすいのがメリット。一方でコマンド操作（wp-cli）も使えるので、エンジニアにももちろん便利なツール。
すごく便利だけど、すごく検索しづらいのが最悪。



Live Linkボタンを押すと、URLを発行して、ローカル環境を他の人に共有できる（しばらくすると切断されたり、実用性は低いみたいだけど）。

アカウント作成

まずはアカウントを作成して、アプリをダウンロードします。無料なので気軽に作りましょう。

アプリを起動し、サイトを作る

アプリをダウンロードし、アプリを起動すると以下の画面になります。
「Create A New Site」をクリックし、サイトを作り始めましょう。

サイト名やディレクトリ設定

まずはサイト名やファイルを生成するディレクトリを指定します。

PHPやデータベースの環境設定

次のPHPやMySQLのバージョンを選択したり、web serverの種類を選択します。
特に指定やこだわりがなければデフォルトでいいでしょう。

ID、パスワードの設定

最後にログインするためのIDやパスワードを設定します。
ローカルなのでID・パスワードは適当です

ローカル環境完成

しばらく時間かかりますが、ローカル環境が完成すると、以下の画面になります。
デフォルトでローカル環境が立ち上がってるので、右上の「OPEN SITE」をクリック。

テストサイト

無事テストサイトが完成しています。
先程の画面の「OPEN SITE」の隣にある「ADMIN」をクリックすると管理画面へアクセスできます。

ファイル置き場

デフォルトの設定から特に変更していなければ以下に wp-config.php や wp-content などのファイルがあります。
wp-content/themes にテーマファイルがあるので、ここでテーマ開発ができます。

~/Local Sites/testsite/app/public

wp-env

wp-env公式ドキュメント
WordPressが公式に発表した開発環境。2021年初め頃から使われ始めた？
Dockerベースで、Dockerとnpmが事前に必要です。npmは使える前提で進めます。

Dockerを入手

以下のサイトからDockerを入手しましょう。Docker Desktopでいいと思います。
https://www.docker.com/



DockerをインストールしてDockerアプリを開くとこんな画面になってると思います。

開発準備

以下のコマンドで開発に必要な準備をします。

// ディレクトリ作成
mkdir test-theme

// 移動
cd test-theme

// init 
yarn init -y

wp-envを追加

以下のコマンドでwp-envを追加します

yarn add @wordpress/env -D

scripts

package.jsonのscriptsに以下を記述します。

{
  "name": "test-theme",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "wp-env": "wp-env" // ここ追記
  },
  "devDependencies": {
    "@wordpress/env": "^4.1.3"
  }
}

起動

以下のコマンドで起動します。最初は時間かかります。

yarn run wp-env start

doneになったあと localhost:8888 にアクセスすると、ローカル環境のサイトが確認できます。
管理画面は http://localhost:8888/wp-login.php です。id・パスワードは admin / password です。



逆にローカル環境を止めるときは以下のコマンドを打ちます

yarn run wp-env stop

.wp-env.jsonの作成

開発環境を立ち上げることはできましたが、ディレクトリにはまだ以下だけで、テーマの開発ができません。

.
├── package.json
└── yarn.lock

そこで.wp-env.jsonを作成し、themesにテーマを指定することで、管理画面からテーマを切り替えられるようになります。
また、プラグインはpluginsにurlを指定すると、追加してくれます。
その他のオプションは 公式ドキュメントで。

{
  "core": null,
  "themes": ["./"],
  "plugins": [
    "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"
  ],
  "config": {
    "WP_DEBUG": true,
    "WP_DEBUG_LOG": true,
    "WP_POST_REVISIONS": false
  }
}

2021年現在、デフォルトのテーマが twentytwentyone なので、twentyseventeen を追加して切り替えてみます。
以下からTwenty Seventeenをダウンロード、zipを解凍し、ディレクトリ直下に置きます。
https://ja.wordpress.org/themes/twentyseventeen/

.
├── package.json
└── yarn.lock
└── twentyseventeen
│   ├── style.css
│   

記述したら以下のコマンドを打ちアップデートします。

yarn run wp-env start -update

管理画面のテーマを見るとTwenty Seventeenが追加されているので、有効化すると切り替わります。

どの開発環境がいいか

GUI派ならLocal、コマンド使えるならwp-envなど、やりやすい方法でいいと思います。
コマンド使えてもLocalは便利なので使ってもいいですし、Docker使えるならDockerで作ってもいいですし。

自分がやりやすい方法で快適に開発しましょう