この記事は前回の続編です。
WordPressのサムネイルはフィーチャーメディア (featured media) と呼ばれています。これを呼び出すには
https://your-site.net/wp-json/wp/v2/posts
から一旦 id を取り出した後、
src=”https://your-site.net/wp-json/wp/v2/media/取り出したid
を叩いきます。このjsonの中のguid.renderedを取り出せれば画像のURLをとってくることができます
以下コードです。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
interface Post {
id: number;
title: { rendered: string };
featured_media: number;
}
const PostList: React.FC = () => {
const [posts, setPosts] = useState<Post[]>([]);
const [mediaUrls, setMediaUrls] = useState<string[]>([]);
useEffect(() => {
axios.get('https://your-site.net/wp-json/wp/v2/posts')
.then(response => {
setPosts(response.data);
const mediaRequests = response.data.map((post: Post) =>
axios.get(`https://your-site/wp-json/wp/v2/media/${post.featured_media}`)
);
return Promise.all(mediaRequests);
})
.then(mediaResponses => {
const mediaUrls = mediaResponses.map(response => response.data.guid.rendered);
setMediaUrls(mediaUrls);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}, []);
return (
<div>
<h1>WordPress Post List</h1>
<ul>
{posts.map((post, index) => (
<li key={post.id}>
{/* 詳細ページへのリンク */}
<Link to={`/post/${post.id}`}>
<img src={mediaUrls[index]} alt="" style={{ maxWidth: '100px', maxHeight: '100px' }} />
{post.title.rendered}
</Link>
</li>
))}
</ul>
</div>
);
};
export default PostList;
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
