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として分けて作った方がもしかすると楽かもしれない