WordPressで訳あって投稿一覧画面のみReactを使いReact Routerでルーティングすることにしました。 やるなら全部ヘッドレス化したほうが通常はいいと思います。
<Link>でリンク先を開くときは問題なくても、URLで直接アクセスしたり再読み込みすると404になってしまいました。
add_rewrite_rule()で追加のリライトルールを指定
add_rewrite_rule()をfunctions.phpに追記して、追加のリライトルールを指定すれば404を回避できます。
例えば私の場合は投稿一覧画面のみReact Routerでルーティングしたかったので、以下のようにしました。
function my_rewrite_rules()
{
// 設定 > 表示設定で「posts」ページを投稿一覧画面として、一覧画面のみReact Routerを使いたい場合の設定です。
add_rewrite_rule('^posts$', 'index.php?post_type=post', 'top'); // 投稿一覧のルート
add_rewrite_rule('^posts/page/\d+', 'index.php?post_type=post', 'top'); // ページネーション
add_rewrite_rule('^archives/category/.*', 'index.php?post_type=post', 'top'); // カテゴリーページ
}
add_action('init', 'my_rewrite_rules');
<Route>でルーティングしていればReact Routerがうまいことやってくれるようで、第2引数で$matchesを使って情報を渡す必要はありませんでした。
第3引数にはtopを指定しておきます。
注意点としては、管理画面の「設定 > パーマリンク」のページで「変更を保存」ボタンを押さないとリライトルールが適用されません。
add_rewrite_rule()のリファレンスはこちら
WordPressのクエリの一覧はこちらから
WordPressのREST APIのエンドポイント一覧はこちらから
一部のページだけ404になるときは
だいたい大丈夫になっても、一部のページのみURL直打ちで404になることがあります。
正規表現を間違えている
リライトルールの正規表現を間違えている可能性があります。
ネットの正規表現チェッカーとかでチェックするといいかもしれません。
データの存在しないURLへアクセスしている。
add_rewrite_ruleでリライトルールを追加しても、データの存在しないURLへのアクセスだと404に飛ばされてしまいます。
例えばREST APIで投稿一覧を取得するときに、クエリのper_pageパラメータで1ページ当たりの投稿件数を指定できます。
このときWordPressの管理画面で設定した「ページに表示する最大投稿数」より小さな数字を指定すると、最後のほうのページに直接URLでアクセスしたときに404になったりします。
その場合は管理画面で「ページに表示する最大投稿数」を小さい数字に設定するか、アクションフックのparse_requestで404へのジャンプを抑制する必要があります。
