WordPressでReactを使ったテーマを作る 準備編
SPAにしたらサイトによっては速くて快適かなとかそういう思いつきから。
ちなみにこの技術ブログのように直帰率が極めて高いサイトの場合はあんまり恩恵はない。
下手すると初回ロードに時間がかかるだけデメリットの方が大きいまである。
まっさらなReact対応テーマの作成と開発サーバーの起動
create-react-wpthemeと言うものがあったのでこれを使っていく。
これがやってくれるのと同じことを自分でやるのはけっこう大変。
Reactを組み込んだテーマの作成
まずcreate-react-wpthemeでWordPressのテーマとして組み込むことができるように調整したReactアプリを作成する。
もちろん要Node.js。
$ npx create-react-wptheme my-theme --typescript
意識高くTypeScriptを使うので–typescriptを付けた。通常のJavaScriptで開発したければこのオプションは不要。
WordPressの開発サーバーの起動
WordPressのローカル開発環境ならなんでもいいが、ここではwp-envを使う。WSL2で無事使えるようになった。
$ cd my-theme
$ echo '{ "themes": [ "." ] }' > .wp-env.json
$ wp-env start
Reactの開発サーバーも起動する
$ cd react-src
$ npm run start
これでReactアプリのファイルを変更したらそれが反映されるようになる。
開発サーバーへのアクセス
http://localhost:8888 にアクセスするとcreate-react-appでReactアプリを作った時と同じようなページが表示される。
Reactテーマ開発の覚書
テンプレートファイルはindex.phpのみ
react-src/public/index.phpを変更すること。
my-theme直下のindex.phpはビルド時に上書きされてしまうため。
SPAなのでsingle.phpなど他のテンプレートファイルは作らない。
wp_headとかwp_footerとかは入れておいた方がいいのかな。
functions.php
react-src/public以下に作る。
App.tsx
react-src/src以下にあるやつにルーティング書いて使っていくよ。
データはREST APIで取得する。
App.scss
スタイルはシンプルにここに書いて行く。
App.cssをApp.scssにリネームすれば特に何もしなくてもSCSSで書ける(react-create-appが良きに計らってくれるところ)
一応作っていく準備が終わってふと思ったこと
- プレビューとか工夫しないとダメそう
- HeadlessCMSとReactとして分けて作った方がもしかすると楽かもしれない