React > WordPressテーマにReactを統合

WordPressテーマにReactを統合

参考サイト

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

前提条件

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

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

  1. wp-content/themesディレクトリに新しいフォルダを作成（例：my-react-theme）
  2. 以下のファイルを作成：
    • style.css：テーマ情報を含むメインスタイルシート
    • functions.php：テーマ機能を定義
    • index.php：メインテンプレートファイル
  3. style.cssにテーマ情報を追加：
/*
Theme Name: My React Theme
Author: Your Name
Description: A WordPress theme with React integration
Version: 1.0
*/

2. ReactをWordPressに統合

  1. テーマディレクトリで以下のコマンドを実行：
npm init -y
npm install @wordpress/scripts @wordpress/element --save-dev
  1. package.jsonに以下のスクリプトを追加：
"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}
  1. srcディレクトリを作成し、index.jsとApp.jsファイルを追加
  2. 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');
  1. 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コンポーネントの開発

  1. src/App.jsにメインコンポーネントを作成：
import { Component } from '@wordpress/element';

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

export default App;
  1. src/index.jsでアプリケーションをレンダリング：
import { render } from '@wordpress/element';
import App from './App';

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

4. WordPressデータの統合

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

  1. 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;
  1. App.jsでPostsコンポーネントを使用

5. テーマのビルドと有効化

  1. 開発モードで実行：npm start
  2. 本番用ビルド：npm run build
  3. WordPress管理画面でテーマを有効化