React を WordPress に組み込むためのガイド

📝React 環境構築

Vite を使用してReactの環境構築
Node.jsがインストールされていないと、起動しないのでNode.jsのインストールが必須になります。

VITE ローカル環境のコマンド

$ npm run dev

📂React フォルダ構造

フォルダの階層構造（ワードプレスとReactのフォルダは分けている）

public_html/

├── frontend/

│ └── TaskSummariesProject/

│ └── dist/

│ └── assets/

│ ├── index-xxxxx.js

│ └── index-xxxxx.css

└── wp/

└── wp-content/

└── themes/

└── cstm-wp/

ワードプレスとReactのフォルダをわけている理由
①WordPressテーマ更新の影響受けない為
②ReactエンジニアとWPエンジニアで作業ディレクトリが分離

🧱 1. React 側（Vite or CRA）でビルド

$ npm run build

出力先が frontend/TaskSummariesProject/dist/ になるように設定。

出力ファイル：index-xxxx.js, index-xxxx.css, index.html など。

🏗 2. WordPress テーマ内で読み込む PHP 処理追加

ファイル：
/wp/wp-content/themes/cstm-wp/inc/component/custom_react.php

ログの確認
サーバー内の wp-content/debug.log（WP_DEBUG_LOG 有効時）

function enqueue_react_assets()
{
    $dir = '/home/cnsr/cnsr-dev.com/public_html/frontend/TaskSummariesProject/dist/assets';
    $uri = 'https://cnsr-dev.com/frontend/TaskSummariesProject/dist/assets';

    if (!is_dir($dir)) {
        error_log('❌ Reactアセットディレクトリが存在しません');
        return;
    }

    $js_files = glob($dir . '/index-*.js');
    $css_files = glob($dir . '/index-*.css');

    error_log('✅ JSファイル: ' . print_r($js_files, true));
    error_log('✅ CSSファイル: ' . print_r($css_files, true));

    if ($js_files) {
        $js_file = $js_files[0];
        wp_enqueue_script(
            'react-app',
            $uri . '/' . basename($js_file),
            [],
            filemtime($js_file),
            [
                'in_footer' => true,
                'strategy' => 'defer',
                'type' => 'module',
            ]
        );
    }

    if ($css_files) {
        $css_file = $css_files[0];
        wp_enqueue_style(
            'react-style',
            $uri . '/' . basename($css_file),
            [],
            filemtime($css_file)
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_react_assets');

🔧 3. React を表示するテンプレートを作成（例：固定ページテンプレ）

＜div id="root"></div>

※ 必ず <div id="root"></div> を設置すること。React 側と一致させる。

📂 4. .htaccess の調整（SPA用のルーティング対策）

ファイルパス：
/frontend/TaskSummariesProject/dist/.htaccess

RewriteEngine On RewriteBase /frontend/TaskSummariesProject/dist/ RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /frontend/TaskSummariesProject/dist/index.html [L]

これにより、/frontend/TaskSummariesProject/dist/tasks のようなパスでも
サーバーが 404 を返さず React 側にルーティングを渡します。

📂 5. ⚠ 5. React 側の BrowserRouter 設定に注意！

React 側（例：App.jsx）で以下のように書く：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter basename="/frontend/TaskSummariesProject/dist">
  {/* ルート定義 */}
</BrowserRouter>

WordPress のサブディレクトリ構成に合わせて basename を調整してください。
例：WordPress が /wp/ にあるなら、/frontend/TaskSummariesProject/dist がルートになる。

✅ 6. 表示確認チェックポイント

index-*.js, index-*.css が読み込まれているか

<div id=”root”></div> が DOM に存在するか

React のレンダリング対象が正しいか

ルーティングで 404 にならないか（→ .htaccess）