最近の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で作ってもいいですし。
自分がやりやすい方法で快適に開発しましょう
Read next
- 2021年12月19日IE非対応だけどIE対応してほしいと言われた時に伝えること
- 2021年12月19日Next.jsとmicroCMSで動的にサイトマップを生成する
- 2021年12月4日GitHub Actionsで必要なファイルだけ別ブランチに書き出す