wp-envを使ってテーマのローカル開発環境を構築する
wp-envとは？
プラグインやテーマのビルド用とテスト用の WordPress ローカル環境を簡単にセットアップできるライブラリ。ローカル上でのチーム開発に役に立つ。内部でdockerを使用しているのでdockerを入れる必要アリ。
開発環境
今回は以下の環境で開発を行った。
・windows 11 home(AMD製pc）
・node.js 20.19.0
・docker
開発手順
まずdockerを立ち上げる。docker desktopをクリックする。
次にwp-envをインストールする。
npm install -D @wordpress/env
さらにインストールするwordpressの設定を行う。
.wp-env.jsonファイルに以下のような設定を行うと日本語でデフォルトでプラグインが２つ含んだ/wordpress/themes/以外のフォルダは隠された環境が構築できる。
{
"core": "https://ja.wordpress.org/wordpress-6.8.1-ja.zip",
"phpVersion": "8.2",
"plugins": [
"https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip",
"https://downloads.wordpress.org/plugin/query-monitor.3.15.0.zip"
],
"mappings": {
"wp-content/themes": "./wordpress/themes"
},
"config": {
"WP_DEBUG": true
}
}
具体的にオプションは以下のようになっている。
wp-envを立ち上げる。
npx wp-env start
最初はdockerの構成から行うので立ち上がるまでに時間がかかる。
http://localhost:8888/ で立ち上げることができるようになる。
最終的に以下のようなフォルダ構成となる。
テーマ開発について
この設定の状態だとなんのテーマファイルも設定していないので真っ白な画面が表示される。そこでまず立ち上がっていることを確認するためにhttp://localhost:8888/wp-admin/にアクセスする。IDはadmin、passwordはpasswordと入力することで管理画面へアクセスが可能になる。
無事立ち上がっていることが確認できた。
この図を見るとテーマとして設定するには上記のような構成から読み取るにindex.phpは最低限必要であることがわかる。そこでまずindex.phpを作成してみる。
<p>hello world</p>
また以下の記事を見るとstyles.cssに以下を用意する必要もあるため記載する。
/*
Theme Name: My Theme
Author: Your Name
Description: My First WordPress Theme
Version: 1.0
Text Domain: mytheme
*/
現時点でフォルダは以下のようになっている。
このテーマを管理者画面から割り当てていく。
外観→テーマを選択
My Themeから有効化を選択
これでテーマが有効化された。
参考文献
Discussion