WordPressとReactって何？

WordPressは、ブログやWebサイトを簡単に作れるツールです。世界中の多くのサイトで使われています。

Reactは、Webサイトを動きのあるものにするためのJavaScriptライブラリです。FacebookやNetflixなどの有名サイトでも使われています。

なぜ2つを組み合わせるのか？

WordPressの良いところ

記事や画像の管理がとても簡単
プラグインがたくさんあって機能を追加しやすい
初心者でも使いやすい管理画面

Reactの良いところ

サイトが速く動く
スマホでもサクサク動作する
かっこいいデザインが作りやすい

組み合わせると...

WordPressで記事を書いて、Reactでかっこいいサイトを作る！

基本的な仕組み

WordPressで記事を書く
ReactがWordPressから記事を取得
きれいなデザインで記事を表示

実際に作ってみよう

準備するもの

WordPress サイト
Node.js（コンピュータにインストール）
テキストエディタ（VS Codeがおすすめ）

ステップ1：Reactアプリを作る

# コマンドプロンプトで実行
npx create-react-app my-blog
cd my-blog
npm start

これで基本的なReactアプリができます！

ステップ2：WordPressから記事を取得する

// App.js
import React, { useState, useEffect } from 'react';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // WordPressから記事を取得
    fetch('https://あなたのサイト.com/wp-json/wp/v2/posts')
      .then(resp> response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>私のブログ</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title.rendered}</h2>
          <p>{post.excerpt.rendered.replace(/<[^>]*>/g, '')}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

ステップ3：CSSでスタイルを追加

/* App.css */
.App {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
}

.post {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px 0;
  border-radius: 5px;
}

.post h2 {
  color: #0066cc;
}

便利な機能を追加しよう

記事の詳細ページ

// 記事をクリックしたら詳細を表示
const showPostDetail = (postId) => {
  fetch(`https://あなたのサイト.com/wp-json/wp/v2/posts/${postId}`)
    .then(resp> response.json())
    .then(post => {
      // 記事の詳細を表示する処理
      console.log(post);
    });
};

検索機能

const [searchTerm, setSearchTerm] = useState('');

// 検索ボックス
<input
  type="text"
  placeholder="記事を検索..."
  value={searchTerm}
  {(e) => setSearchTerm(e.target.value)}
/>

// 検索結果を表示
{posts
  .filter(post => 
    post.title.rendered.includes(searchTerm)
  )
  .map(post => (
    // 記事を表示
  ))
}

よくある問題と解決方法

問題1：「記事が表示されない」

原因：WordPressのAPIが有効になっていない解決：WordPress管理画面で「設定 > パーマリンク」を一度保存し直す

問題2：「エラーが出る」

原因：WordPressサイトのURLが間違っている解決：正しいURLを確認して修正する

問題3：「スマホで見にくい」

解決：CSSでレスポンシブデザインを追加

@media (max-width: 768px) {
  .App {
    padding: 10px;
  }
  
  .post {
    margin: 10px 0;
    padding: 15px;
  }
}

まとめ

WordPressとReactを組み合わせると：

✅ 簡単に記事管理：WordPressで記事を書くだけ

✅ かっこいいデザイン：Reactで自由にデザイン

✅ 速いサイト：ユーザーが快適に閲覧できる

✅ スマホ対応：どのデバイスでもきれいに表示

WordPressとReactで作る現代的なWebサイト