WordPress
REST-API
ACF

WordPress WP_REST_APIで投稿データを取得するでサムネイル画像とアドバンスカスタムフイールド画像を出力する

More than 1 year has passed since last update.

Wordpress WP_REST_APIを使って、

●サムネイル画像

●アドバンスカスタムフイールド画像

この2つの取得を行います。


準備

wordpressのヴァージョンは4.9.1です。

デフォルトでWP_REST_APIが設定されているバージョンのお話をします。


①カスタム投稿タイプを「member」として作成する(作成方法は割愛します)

カスタム投稿タイプの設定で

register_post_typeに、


functions.php

'show_in_rest' => true,


の記述を忘れずに。


②カスタムフィールド値の取得には専用のプラグインが必要です。インストール後に有効化する。

ACF to REST API


③APIのURLの確認

カスタム投稿タイプの全件データ所得は下記の記述です。


URL

http://example.net/wp-json/wp/v2/member/


ですが、今回は画像データもほしいためにカスタム投稿タイプ「/member/」の後ろに「?_embed」を記述します。

下記に記述例を書きます。


URL

http://example.net/wp-json/wp/v2/member/?_embed


※これがわからずに長時間ハマりました。


出力

上記で準備はOKです。

あとは出力します。


html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WP REST APIテストページ</title>
</
head>
<body>
<h2>メンバー 全件</h2>
<ul id="mylist">
</u
l>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/
javascript">
$(function() {
$.getJSON( "
http://example.net/wp/wp-json/wp/v2/member/?_embed", function(results) {
$.each(results, function(i, item) {
$('ul#mylist').append('<li>'
+'【記事タイトル】' + item.title.rendered
+'<br>'
+'【記事サムネイル_フル画像URL】' + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
+'<br>'
+'【記事サムネイル_リサイズ画像URL】' + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['w700']['source_url']
+'<br>'
+'【acf フル画像URL】' + item.acf.メッセージ画像.url
+'<br>'
+'【acf リサイズ画像URL】' + item.acf.メッセージ画像.sizes.top_slider
+'</li>'
+'<hr>');
});
});
});
</script>
</body>
</html>