■
WordPressとReactの魔法の組み合わせ
はじめに
この記事では、WordPressとReactを組み合わせて、魅力的でインタラクティブなウェブサイトを作成する方法について解説します。
WordPressの役割：お話の保管庫
WordPressは、記事やブログポスト、写真、ビデオなどを保管し、整理するためのツールです。これらのコンテンツをインターネット上で管理し、公開することができます。
Reactの役割：お絵かきツール
Reactは、ウェブサイトをより魅力的で使いやすくするためのツールです。コンテンツをより美しく、動的に表示することができます。
組み合わせの方法
WordPressで作成したコンテンツを、Reactを使ってどのように表示するかを決定します。WordPressが「何を見せるか」を決め、Reactが「どう見せるか」を担います。
具体的な例
WordPressで書かれた絵本の物語を、Reactを使ってページをめくる動きと共に表示することができます。これにより、読者はインターネットで絵本を読む際に、実際にページをめくっているかのような体験を得ることができます。
なぜReactが良いのか
この組み合わせにより、ウェブサイトはより楽しく、魅力的になり、訪れる人たちに素晴らしい体験を提供できます。
WordPressのセットアップ
WordPressのfunctions.phpファイルを使用してREST APIを有効化し、カスタムポストタイプを追加することで、Reactとの統合を容易にします。
Reactアプリケーションのセットアップ
functions.php: ここでWordPress REST APIを有効化し、カスタムポストタイプやフィールドを追加することができます。
function create_post_type() {
register_post_type('custom_post',
array(
'labels' => array(
'name' => __('Custom Posts', 'textdomain'),
'singular_name' => __('Custom Post', 'textdomain'),
),
'public' => true,
'has_archive' => true,
'show_in_rest' => true
)
);
}
add_action('init', 'create_post_type');
Reactプロジェクトをcreate-react-appコマンドで作成し、WordPress REST APIからデータを取得して表示します。
npx create-react-app my-react-app
cd my-react-app
コンポーネントの作成
Reactでは、データを表示するためのコンポーネントを作成し、ページ上にレンダリングします。
import axios from 'axios';
import React, { useEffect, useState } from 'react';
function App() {
const [posts, setPosts] = useState();
useEffect(() => {
axios.get('http://yourwordpresssite.com/wp-json/wp/v2/posts')
.then(response => {
setPosts(response.data);
});
}, );
return (
<div>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title.rendered}</h2>
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
</div>
))}
</div>
);
}
export default App;
ルーティングの設定
React Routerを使用して、ウェブサイト内で異なるページやルートを作成し、ナビゲーションを実現します。
まとめ
WordPressとReactを組み合わせることで、コンテンツ管理とユーザーインターフェースの両方で優れた体験を提供するウェブサイトを作成することができます。
