この記事では、Localでローカルサイトを作成し、ReactアプリをWordPressのテーマとして統合する方法をステップバイステップで解説します。
ローカルサイトの作成
まずLocalを使用して、ローカルサイトを作成します。Localをダウンロードし、ローカル環境にWordPressサイトを立ち上げてください。
Reactアプリの作成
次に、Reactのフォルダを生成し、TypeScriptを組み込んだReactアプリを作成します。詳細は以下のリンクを参照してください：
React(TypeScript)とchakra-uiの環境構築方法
最初のapp構築の段階からTypeScriptを組み込み、作成したディレクトリに移動することを忘れないでください。この手順を忘れると、他のライブラリをインストールする際に依存関係が不適切になり、不要なnode_modulesなどがインストールされてしまいます。
axiosのインストール
TypeScriptプロジェクトでaxiosを使用する場合、axiosの型定義ファイルをインストールする必要があります。以下の手順に従ってください。
ステップ1: axiosとその型定義ファイルのインストール
- axiosのインストール
//npmの場合 npm install axios //yarnの場合 yarn add axios - 型定義ファイルのインストール
//npmの場合 npm install @types/axios //yarnの場合 yarn add @types/axios
ステップ2: 型定義ファイルの確認と使用
Reactコンポーネントを以下のように修正します。URLは適切に自身のURLに変更してください。
import React, { useEffect, useState } from 'react';
import axios from 'axios';
interface Post {
id: number;
title: {
rendered: string;
};
}
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('http://your-local-site.local/wp-json/wp/v2/posts')
.then(response => {
setPosts(response.data);
})
.catch(error => {
console.error('There was an error fetching the posts!', error);
});
}, []);
return (
WordPress Posts
{posts.map(post => (
- {post.title.rendered}
))}
);
}
export default App; ステップ3: 型定義の問題が解決しない場合
もし依然としてエラーが発生する場合は、以下を確認してください。
- プロジェクトの再ビルド
npm run build - VSCodeの再起動
VSCodeを再起動して型定義が正しく認識されるようにします。
Reactアプリのビルド
二つの方法があります。テーマと統合する方法とプラグインで統合する方法です。
テーマと統合する方法
ローカル環境でReactとWordPressを統合し、ローカルで開発を行う場合の手順について詳しく説明します。ここでは、ReactアプリをWordPressのテーマとして統合し、ローカル環境で動作させる方法を紹介します。
WordPressテーマへの統合
ステップ1: Reactアプリのビルド
まず、Reactアプリをビルドして、静的ファイルを生成します。
//npmの場合
npm run build
//yarnの場合
yarn buildこのコマンドを実行すると、buildフォルダが生成され、その中に最適化された静的ファイルが含まれます。
ステップ2: 新しいテーマフォルダの作成
LocalでセットアップしたWordPressサイトのディレクトリに移動し、wp-content/themesディレクトリ内に新しいテーマフォルダを作成します。例えば、my-react-themeという名前にします。
ステップ3: テーマファイルの準備
my-react-themeフォルダ内に、style.cssとindex.php、functions.phpファイルを作成します。
ステップ4: Reactビルドファイルのコピー
create-react-appで生成されたbuildフォルダの中身（index.html、staticフォルダなど）を、my-react-themeフォルダ内にコピーします。
ステップ5: functions.phpの編集
以下のコードを追加します。
<?php
function get_react_build_file($type) {
$manifest = file_get_contents(get_template_directory() . '/build/asset-manifest.json');
$manifest = json_decode($manifest, true);
return get_template_directory_uri() . '/build/' . $manifest['files'][$type];
}
?>ステップ6: index.phpの編集
index.phpファイルを以下のように編集して、Reactのビルドファイルを読み込みます。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<?php bloginfo('name'); ?>
>