WP REST APIについて
wordpressにはWP REST APIがあって、特定のURLからデータを引っ張ってこれる。設定するURLにはそれぞれパラメーターがあって、好きな情報を取得することができる。
基本となるURLは以下。hogehoge.comのところはご自身のURLを設定してください。
https://hogehoge.com/wp-json/wp/v2このURLには欲しい情報に応じて、複数のパラメーターが指定できる。例えば記事一覧を取得したい場合は以下のURLを使います。
https://hogehoge.com/wp-json/wp/v2/posts記事一覧の中にサムネイル画像の情報を入れたい場合は以下です。
https://hogehoge.com/wp-json/wp/v2/posts?_embed記事数を３ページと指定して、さらにサムネイル画像情報も入れる場合は以下です。記事数はMAX100記事まで取得できます。
https://hogehoge.com/wp-json/wp/v2/posts?per_page=3&_embed必要な情報だけを指定することもできます。その場合はfieldを使います。
例えば以下では記事数を5ページにして、title、link、date、excerptの情報だけを取得しています。fieldsで出力条件を絞った場合、embedのサムネイル情報は指定しても取得できなかった。。
https://hogehoge.com/wp-json/wp/v2/posts?per_page=5&_fields=title,date,link,excerptサムネイル画像も含めて、基本的な情報がほしいのであれば以下の指定で十分です。
https://hogehoge.jp/wp-json/wp/v2/posts?context=embed
//記事数も一緒に指定する場合は以下
https://hogehoge.com/wp-json/wp/v2/posts?per_page=5&context=embedそれ以外にも固定ページ、カスタム投稿、タクソノミー、コメント一覧など、取得することが可能です。
//個別ページ
https://hogehoge.jp/wp-json/wp/v2/pages
//カテゴリー
https://hogehoge.com/wp-json/wp/v2/categories
//タクソノミー
https://hogehoge.jp/wp-json/wp/v2/taxonomies
//タグ
https://hogehoge.com/wp-json/wp/v2/tags
//カスタム投稿名（カスタム投稿名memoの場合）
https://hogehoge.jp/wp-json/wp/v2/memo
//コメント
https://hogehoge.com/wp-json/wp/v2/comments
//特定の記事（投稿タイプと投稿IDを指定）
https://hogehoge.com/wp-json/wp/v2/posts/1087
実際にどのように使うのか
JavaScriptのfetchメソッドを使ってURLからデータを取得します。
fetch("https://yumegori.com/wp-json/wp/v2/posts?_embed&per_page=3")
.then((response) => response.json())
.then((data) => {
for (const elem of data) {
const dateInner = `
タイトル:${elem.title.rendered}
サムネイルURL：${elem._embedded["wp:featuredmedia"][0].source_url}
`;
console.log(dateInner);
}
});これをコンソールで見ると以下です。
タイトルとサムネイルURLが取得できていることがわかります。
