たろ
Reactを使ってWordPressの投稿を爆速取得&表示するには?
こんな悩みを解決します。
本記事の内容
- WordPressでReactを使う
- WordPressのRestAPIの活用例
- Reactの実装について
- ReactのuseEffect, useStateの実例
- Reactでロード画面の表示
こんにちは。
この記事では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
これを応用して新着の記事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'));
参考記事
今回の実装内容のより細かな詳細は下記の記事が参考になりました。
- サイト(ブログ)内検索で記事をリアルタイムで取得し表示する
- WordPress5.0 React を使い動作検証するまでの手順
- Reactページの読み込みが終わるまでの間ローディングを表示する
- React ステートフック useState の使い方
- React 副作用フック useEffect の使い方(実演コード付き)
新着記事を5件表示(Let’s!! ページを再読み込み)
※ページを再読み込みするとローディング画面が表示され、投稿の取得が終わったタイミングで記事がフェードインします。