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

WordPressとReactって何？
なぜ2つを組み合わせるのか？
基本的な仕組み
実際に作ってみよう
便利な機能を追加しよう
1. 記事の詳細ページ
2. 検索機能
よくある問題と解決方法
まとめ

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

# コマンドプロンプトで実行

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 &#91;posts, setPosts] = useState(&#91;]);

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

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

export default App;

// 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(response => response.json())

.then(data => setPosts(data));

}, []);

return (

<div>

<h1>私のブログ</h1>

{posts.map(post => (

<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;
}

/* 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) =&gt; {
  fetch(`https://あなたのサイト.com/wp-json/wp/v2/posts/${postId}`)
    .then(response =&gt; response.json())
    .then(post =&gt; {
      // 記事の詳細を表示する処理
      console.log(post);
    });
};

// 記事をクリックしたら詳細を表示

const showPostDetail = (postId) => {

fetch(`https://あなたのサイト.com/wp-json/wp/v2/posts/${postId}`)

.then(response => response.json())

.then(post => {

// 記事の詳細を表示する処理

console.log(post);

});

};

検索機能

const &#91;searchTerm, setSearchTerm] = useState('');

// 検索ボックス
&lt;input
  type="text"
  placeholder="記事を検索..."
  value={searchTerm}
  onChange={(e) =&gt; setSearchTerm(e.target.value)}
/&gt;

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

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

// 検索ボックス

<input

type="text"

placeholder="記事を検索..."

value={searchTerm}

onChange={(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;
  }
}

@media (max-width: 768px) {

.App {

padding: 10px;

}

.post {

margin: 10px 0;

padding: 15px;

}

まとめ

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

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

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

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

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