「ACF | Advanced Custom Fields」は、簡単にカスタムフィールドを作ることができるWordPressの定番とも言えるプラグインです。
そんなACFを使っているサイトから、WP REST APIで情報を取得して出力する場合のスニペットについて解説していきます。
はじめに
はじめにですが、この記事にはカスタムフィールドを使った実際のサンプルがありません。
すいません。サンプルがないのでイメージできづらいかもしれませんがお付き合いください。
そしてコードは、以下のような「WP REST API」で記事の情報を取得して文章を記載するものをベースにして、これに「カスタムフィールド用のコード」を追加するような解説内容です。
const getPosts = "https://dubdesign.net/domain/wp-json/wp/v2/posts?_embed&include[]=1386"
fetch(getPosts).then(
response => {
return response.json();
}).then(data => {
for (let i = 0; i < data.length; i++) {
apiPost.innerHTML += '<div class="posts">' // wrapper
+ '<h2>' + data[i].title.rendered + '</h2>'
+ '<img src="' + data[i]._embedded["wp:featuredmedia"][0].source_url + '" alt="' + data[i].title.rendered +'">'
+ '<div class="posts_content">'
+ data[i].content.rendered
+ '</div>'
+ '</div>'
}
}).catch(err => {
// Do something with error here
console.log('Error: ' + err)
})上記のコードをベースに解説していきますが、このコードの仕様や詳細については以下にまとめていますので、気になる方はこちらの記事も参考にしてみてください。
WP REST APIで特定の記事を指定してその記事の本文を表示
カスタムフィールドを取得する時のコード
カスタムフィールドで取得して表示する場合のスニペットですが、大きく分けて通常の「個別のカスタムフィールド」と、有料版のProで使える「繰り返し（リピーター）フィールド」の2種類によって記述方法が大きく異なります。
この2つの記述方法について、順番に解説していきます。
個別のカスタムフィールド
個別のカスタムフィールドを取得する場合、以下の一文を挿入したい箇所に記述すればOKです。
+ '<p>' + data[i].acf.フィールド名(英数字) + '</p>'これだけで取得・出力できるので簡単（なはず）です。
繰り返し（リピーター）フィールドの場合
繰り返し（リピーター）フィールドの場合、基本は以下のようになります。
+ '<h2>' + data[i].acf.親フィールド名[0].子フィールド名_1 + '</h2>'
+ '<p>' + data[i].acf.親フィールド名[0].子フィールド名_2 + '</p>'ですが、その名の通り「繰り返し（リピーター）フィールド」なので、このフィールドが使われる回数が記事によって大きく異なります。
そこで、for 文を使ったループを作り必要があります。
例えば、繰り返しフィールドの親が「question」。子フィールド名1が「title」で、子フィールド名2が「ans」。そしてそれが5回繰り返し使われている場合は、for文を使って5回ループさせるように記述します。
for (let j = 0; j < 5; j++) {
apiPost.innerHTML += '<h2>' + data[i].acf.question[j].title + '</h2>'
+ '<p>' + data[i].acf.question[j].ans + '</p>'
}いわゆる for の中に for ですが、複数回取得する場合これでOKです。
このような複数回繰り返しフィールでの複数回ループも記述すると、全体は以下のようになります。
const getPosts = "https://www.sample.com/wp-json/wp/v2/posts?_embed&include[]=記事ID"
fetch(getPosts).then(
response => {
return response.json();
}).then(data => {
for (let i = 0; i < data.length; i++) {
apiPost.innerHTML += '<div class="posts">' // wrapper
+ '<h2>' + data[i].title.rendered + '</h2>'
+ '<img src="' + data[i]._embedded["wp:featuredmedia"][0].source_url + '" alt="' + data[i].title.rendered +'">'
+ '<div class="posts_content">'
+ data[i].content.rendered
+ '<h2>' + data[i].acf.txt001 + '</h2>'
for (let j = 0; j < 5; j++) {
apiPost.innerHTML += '<h2>' + data[i].acf.question[j].title + '</h2>'
+ '<p>' + data[i].acf.question[j].ans + '</p>'
}
+ '</div>'
+ '</div>'
}
}).catch(err => {
console.log('Error: ' + err)
})
