WordPress×React×RestAPIを組み合わせて記事を取得

こんな悩みを解決します。

こんにちは。

この記事ではReactからRestAPIでWordPressの新着記事の投稿を取得し表示するプログラムに取り組んだ備忘をまとめます。

新着記事を読み込むタイミングはReactのすべてのレンダーが終わった後に発火する副作用フック useEffect をトリガーを使います。

WordPress×Reactの爆速サイト作成のきっかけになるかもしれません。

環境

• WordPress 5.4.4
• React

WordPressでReactを使うための準備

WordPressでReactを使うにはWordPressのバージョンが5.0以上である必要があります。

ダッシュボードでバージョンを確認してから作業に入ってください。

Reactを使うためのセットアップ手順は下記の記事が参考になりますよー。

WP RestAPI で新着記事の取得

WordPressではデフォルトのAPIが用意されています。→WP REST API

例えば、次のURLをブラウザで叩くとブログ内の記事をJSON形式で取得できます。

https://tarovlog.com/wp-json/wp/v2/posts

これを応用して新着の記事５件をサムネイル有で取得します。

https://tarovlog.com/wp-json/wp/v2/posts?per_page=5&_embed

これで準備が整いましたのでReactのコードを次にまとめます。

爆速！新着記事をReactで表示するコード

まずはコードをぺたり。

実装内容の詳細はコード内のコメントに記載。

const { useState, useEffect } = wp.element

// 記事表示用の関数コンポーネント
function Contents(props) {
  // props.postsで記事を取得
  var posts = props.posts;
  if(posts) {
    // map で配列を展開し、rowsに結果を格納
    const rows = posts.map((post) =>
      <a href={post.link} className='entry-card-wrap a-wrap border-element cf fadeIn fadeIn-left'>
        <article className="entry-card">
          <figure className="entry-card-thumb card-thumb e-card-thumb">
            <img src={post._embedded["wp:featuredmedia"][0].source_url}></img>
          </figure>
          <div className="entry-card-content card-content e-card-content">
            <p className="entry-card-title card-title e-card-title">
              {post.title['rendered']}
            </p>
          </div>
        </article>
      </a>
    );
    return (
      <div>
        {rows}
      </div>
    )
  } else {
    return null
  }
}

// ローディング表示用の関数コンポーネント
function Loading() {
  return (
    <div class="sk-chase sk-center">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
  )
}

function App() {
  // 状態管理の変数と関数を定義
  const [post, setPost] = useState([]),
        [load, setLoad] = useState(false);

  // レンダー後のイベントを定義
  useEffect(() => {
    fetch(
      'https://tarovlog.com/wp-json/wp/v2/posts?per_page=5&_embed'
  )
  .then(response => response.json())
  .then(data => {
    // 取得した記事のデータを格納
    setPost(data)
    // 1秒後にLoadの変数を true に置き換え
    setTimeout(()=>setLoad(true), 1000);
  })
  .catch(console.error);
  }, []);

  return (
    <div id="list" className="list ect-entry-card front-page-type-index">
      // 三項演算子
      // True：記事表示
      // False：ローディング画面を表示
      {load ? (<Contents posts={post} />) : (<Loading/>)}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

参考記事

今回の実装内容のより細かな詳細は下記の記事が参考になりました。

• サイト（ブログ）内検索で記事をリアルタイムで取得し表示する
• WordPress5.0 React を使い動作検証するまでの手順
• Reactページの読み込みが終わるまでの間ローディングを表示する
• React ステートフック useState の使い方
• React 副作用フック useEffect の使い方（実演コード付き）

新着記事を５件表示（Let’s!! ページを再読み込み）

※ページを再読み込みするとローディング画面が表示され、投稿の取得が終わったタイミングで記事がフェードインします。