WordPressテーマにReactを統合

2024年10月2日2025年6月7日

参考サイト

Reactを使用してWordPressテーマを開発する方法
https://kinsta.com/jp/blog/wordpress-react-theme/

前提条件

WordPressサイト（ローカル開発環境推奨）
Node.jsとnpm（またはyarn）のインストール

1. WordPressテーマの基本構造を作成

wp-content/themesディレクトリに新しいフォルダを作成（例：my-react-theme）
以下のファイルを作成：
- style.css：テーマ情報を含むメインスタイルシート
- functions.php：テーマ機能を定義
- index.php：メインテンプレートファイル
style.cssにテーマ情報を追加：

/*
Theme Name: My React Theme
Author: Your Name
Description: A WordPress theme with React integration
Version: 1.0
*/

2. ReactをWordPressに統合

テーマディレクトリで以下のコマンドを実行：

npm init -y
npm install @wordpress/scripts @wordpress/element --save-dev

package.jsonに以下のスクリプトを追加：

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}

srcディレクトリを作成し、index.jsとApp.jsファイルを追加
functions.phpにスクリプトエンキュー関数を追加：

function enqueue_react_scripts() {
    wp_enqueue_script('my-react-theme', get_template_directory_uri() . '/build/index.js', ['wp-element'], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_react_scripts');

index.phpを更新してReactアプリケーションのマウントポイントを追加：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div id="root"></div>
    <?php wp_footer(); ?>
</body>
</html>

3. Reactコンポーネントの開発

src/App.jsにメインコンポーネントを作成：

import { Component } from '@wordpress/element';

class App extends Component {
    render() {
        return <h1>Hello, WordPress and React!</h1>;
    }
}

export default App;

src/index.jsでアプリケーションをレンダリング：

import { render } from '@wordpress/element';
import App from './App';

render(<App />, document.getElementById('root'));

4. WordPressデータの統合

WordPress REST APIを使用してWordPressのデータをReactコンポーネントに統合できます：

src/Posts.jsコンポーネントを作成：

import { Component } from '@wordpress/element';

class Posts extends Component {
    state = { posts: [] };

    componentDidMount() {
        fetch('/wp-json/wp/v2/posts')
            .then(response => response.json())
            .then(posts => this.setState({ posts }));
    }

    render() {
        return (
            <div>
                {this.state.posts.map(post => (
                    <h2 key={post.id}>{post.title.rendered}</h2>
                ))}
            </div>
        );
    }
}

export default Posts;