REST APIでWPとReactを接続する（カスタムテーブル）

WordPress側でカスタムテーブルを作成し、それをREST APIでつなぐ方法はいくつかのステップに分かれています。以下にその手順を説明します。

1. カスタムテーブルの作成

まず、WordPressのデータベースにカスタムテーブルを作成します。これは、テーマの functions.php ファイルやカスタムプラグイン内で行うことができます。


function create_custom_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'custom_table';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        name text NOT NULL,
        value text NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta( $sql );
}

add_action( 'after_setup_theme', 'create_custom_table' );

2. REST API エンドポイントの作成

次に、カスタムテーブルに対して操作を行うためのREST APIエンドポイントを作成します。これは、テーマの functions.php ファイルやカスタムプラグイン内で行います。


function register_custom_table_routes() {
    register_rest_route('custom/v1', '/data', array(
        'methods' => 'GET',
        'callback' => 'get_custom_table_data',
    ));
}

add_action('rest_api_init', 'register_custom_table_routes');

function get_custom_table_data() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'custom_table';

    $results = $wpdb->get_results("SELECT * FROM $table_name", OBJECT);
    return new WP_REST_Response($results, 200);
}

3. Reactアプリケーションからデータを取得

ReactアプリケーションからカスタムREST APIエンドポイントを使用してデータを取得します。


import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://your-wordpress-site.com/wp-json/custom/v1/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, []);

  return (
    
      Custom Table Data
      {data.map(item => (
        
          {item.name}
          {item.value}
        
      ))}
    
  );
}

export default App;

認証が必要な場合

カスタムデータの読み書きに認証が必要な場合、JWTやOAuthなどの認証を追加します。前述のように、JWTプラグインを使用して認証を実装できます。

JWTプラグインの設定と使用方法の例

1. JWTプラグインのインストール:
– プラグイン「JWT Authentication for WP REST API」をインストールして有効化します。

2. 認証付きAPIリクエスト:


import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // トークンを取得
        const tokenResponse = await axios.post('https://your-wordpress-site.com/wp-json/jwt-auth/v1/token', {
          username: 'your-username',
          password: 'your-password'
        });

        const token = tokenResponse.data.token;

        // トークンを使用してデータを取得
        const response = await axios.get('https://your-wordpress-site.com/wp-json/custom/v1/data', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        setData(response.data);
      } catch (error) {
        console.error('Error fetching data: ', error);
      }
    };

    fetchData();
  }, []);

  return (
    
      Custom Table Data
      {data.map(item => (
        
          {item.name}
          {item.value}
        
      ))}
    
  );
}

export default App;

まとめ

この方法により、WordPressのカスタムテーブルとReactフロントエンドを効果的に連携させることができます。その他の質問や特定の要件があれば教えてください。

要点:

カスタムテーブルを作成: WordPressのデータベースにカスタムテーブルを作成します。
REST API エンドポイントを作成: カスタムテーブル用のREST APIエンドポイントを作成します。
Reactからデータを取得: ReactアプリケーションからREST APIを使用してデータを取得します。
認証が必要な場合: JWTやOAuthを使用して認証を行います。