WordpressでReactを導入する方法

React Wordpress

WordpressでReactを導入する方法

ReactはJavaScriptでの操作が便利なフレームワークですが、WordPressでも使用したい場面があります。

WordPressにReactを導入する方法はいくつかありますが、最も一般的な方法はプラグインやテーマにReactを統合することです。
以下では、テーマやプラグインにReactを追加する手順を説明します。

前提条件

  • WordPressの開発環境がセットアップ済みであること
  • Node.jsとnpmがインストールされていること
  • 基本的なJavaScriptとReactの知識があること

1. テーマまたはプラグインでReactを使用する準備

まず、Reactを使用するためのテーマかプラグインを作成する必要があります。
既存のテーマを使用するか、新しいテーマまたはプラグインを作成してください。

テーマにReactを追加する場合

「wp-content/themes/テーマ名」ディレクトリを使用して、テーマ内にReactを統合します。

プラグインにReactを追加する場合

新しいプラグインを作成し、「wp-content/plugins/プラグイン名」に配置します。

2. 必要なファイルの準備

次に、Reactのファイルを管理するために必要なファイルとディレクトリを準備します。

  • index.js (Reactコードを記述するファイル)
  • package.json (npmの依存関係を管理)
  • webpack.config.js (Webpackの設定)

例えば、次のようなディレクトリ構成にします。

テーマ名/
  ├── js/
  │   ├── index.js
  ├── package.json
  ├── webpack.config.js

3. npmとWebpackをセットアップ

プロジェクトディレクトリ（テーマやプラグインのディレクトリ）に移動し、npmの初期化を行います。

cd wp-content/themes/テーマ名
npm init -y

次に、Reactと必要なパッケージをインストールします。

npm install react react-dom
// 他、必要なモジュールがあれば追加でインストールしてください。
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

4. WebpackとBabelの設定

次に、Reactコードをコンパイルするためにwebpack.config.jsを設定します。
以下は一例なので、用途に応じて設定してください。

const path = require('path');

module.exports = {
  entry: './js/index.js',
  output: {
    path: path.resolve(__dirname, 'js'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

また、Babelの設定を行うために、.babelrcファイルを作成します。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. Reactコンポーネントの作成

Reactのエントリーポイントとなるindex.jsを作成します。このファイルでReactコンポーネントを定義し、WordPress内に表示します。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>WordPressでReactの表示</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('react-app'));

6. Webpackでビルド

次に、Webpackを使用してReactコードをビルドします。以下のコマンドを実行します。

npx webpack --mode development

js/フォルダにbundle.jsというファイルが生成されます。このファイルがWordPressで読み込むJavaScriptファイルです。

7. WordPressにReactを表示

最後に、生成されたbundle.jsをWordPressで読み込むようにテーマかプラグインに追加します。functions.phpに以下のコードを追加します。

function enqueue_react_app() {
  wp_enqueue_script(
    'react-app',
    get_template_directory_uri() . '/js/bundle.js',
    array(),
    null,
    true
  );
}

add_action('wp_enqueue_scripts', 'enqueue_react_app');

そして、Reactを表示させたい場所にid="react-app"のdivタグを挿入します。例えば、header.phpやfooter.phpに追加できます。

<div id="react-app"></div>

8. 確認

ブラウザでサイトを表示し、id="react-app"のdivタグの中にReactコンポーネントがレンダリングされていることが確認できるかと思います。

結論

これでWordPressにReactを導入する基本的な手順が完了です。
この方法を用いることで、WordPressテーマやプラグインにReactを組み込んだ動的なUIを作成することが可能になります。