Zenn
💻

wp-envでミニマムなWordPressの自作テーマ構築環境を作成する方法

2022/06/25に公開
WordPress
tech

はじめに

案件でwp-envを利用した開発をすることになったものの、経験がありませんでした。
ひとまず極限までブラックボックスの無い状態で進めるべく、最低限のWordPress設定で、完全にブランクな自作テーマをローカルで動かすまでの手順をまとめてみました。
同じような状況の人の参考になれば幸いです。

前提

  • Macを利用しています
  • VSCodeを使います
  • Docker Desktopがインストール済です
  • その他のバージョン情報は以下です
$ sw_vers
ProductName:    macOS
ProductVersion: 12.3.1
BuildVersion:   21E258
$ node -v
v16.14.0
$ npm -v
7.15.1

やってみたこと

@wordpress/env のインストール

$ cd /path/to/workdir
$ npm init
$ npm install @wordpress/env --save-dev

設定ファイルの追加

$ code .wp-env.json

{
	"core": null,
	"themes": [ "." ]
}

空のテーマファイルの作成

$ code index.php
$ code style.css

blank.

@charset "UTF-8";
/*
Theme Name: blank-theme
*/

起動

$ npx wp-env start
⠏ Configuring WordPress.
↓
WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 51691
MySQL for automated testing is listening on port 51678
    
✔ Done! (in 26s 229ms)
  • ブラウザで http://localhost:8888 にアクセスしてユーザ向け画面の表示を確認
  • ブラウザで http://localhost:8888/wp-admin にアクセスして管理画面に移動
      • 初期アカウント(admin/password)でログイン
      • [Appearance]-[Themes]にblank-themeができていることを確認
    • Activateして再度ルートへアクセス
    • 作成したテーマが反映されたことが確認できました

最後に

とりあえず、自分の環境では10分もあればブランクのテーマを用意したWordPress環境を作成することができました。wp-env便利ですね。

参考

Discussion