スポンサーリンク

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

カスタマイズ
スポンサーリンク
本ページにはプロモーションが含まれています。
たろ
たろ

Reactを使ってWordPressの投稿を爆速取得&表示するには?

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

本記事の内容
  • WordPressでReactを使う
  • WordPressのRestAPIの活用例
  • Reactの実装について
  • ReactのuseEffect, useStateの実例
  • Reactでロード画面の表示

こんにちは。

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

新着記事を読み込むタイミングは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

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

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'));

参考記事

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

新着記事を5件表示(Let’s!! ページを再読み込み)

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

タイトルとURLをコピーしました