WordpressとVueを組み合わせて一覧を作成していた際のコードサンプルと、
再現性のないバグ？っぽい挙動があり、情報がどこにもなかったためまとめます。
###バグの解決をしたいだけの人用まとめ
結論：投稿消して、新規投稿、かつサムネイルも新規アップロードしたら直るよ！
##背景
WP REST APIを利用し、Wordpress外でVueを使ってお知らせ一覧を表示するということを行っていました。
サムネイル付きのデータが欲しい場合、取得urlの末尾に?_embedをつけると、
戻り値の中に_embeddedが追加され、その中にあるsource_urlから取得できます。
以下戻り値の取得例。
//戻り値がdataに格納されている上で
thumbUrl = data[0]["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"];
["thumbnail"]を["lage"]などに変えればサイズを変えて取得も可能。
WP REST APIとVueでのサムネイル付き一覧作成するサンプルソースを掲載します。
###VueとWP REST API でサムネイル付き一覧を作成するサンプル
<template>
<div>
<div v-for="item in slicedItems" :key="item.id">
<a :href="item.link">
<div class="img_box">
<span v-if="item.thumbnail"><img :src="item.thumbnail" alt="item.title.rendered" /></span>
<span v-else><img :src="noImage" alt="no image" /></span>
</div>
<div class="txt_box">
<p class="date">{{ dateConv(item.date) }}</p>
<h3>{{ item.title.rendered }}</h3>
<div>{{ strReplace(item.excerpt.rendered) }}</div>
</div>
</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
props: {
//urlに渡している内容はこれ。投稿をサムネ付きで４つ取得している。
//https://mydemosite.com/info/wp-json/wp/v2/posts?_embed&per_page=4
url: String,
count: {
type:String,
default:"4",
},
noImage: {
type:String,
default:"/assets/img/common/no_image.png",
},
},
methods: {
getPosts() {
this.isLoading = true;
var self = this;
axios
.get(this.url)
// Success
.then((response) => {
if (response.status != 200) {
//console.log(response.statusText);
exit;
}
self.items = response.data;
//サムネイルの取得とデータ格納
for(let i = 0; i < self.items.length; i++) {
if(response.data[i]["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"]){
self.items[i].thumbnail = response.data[i]["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"];
}
}
})
// Error
.catch((error) => {
console.log(error);
this.isLoading = false;
});
},
dateConv(data){
var newdate = new Date(data);
var year = newdate.getFullYear();
var month = newdate.getMonth() + 1;
var day = newdate.getDate();
return year + '年' + month + '月' + day + '日';
},
strReplace(data){//…[…]
var replaced = data.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
replaced = replaced.replace(/ \[…\]/g,'…');
return replaced;
},
},
created() {
this.getPosts();
},
};
</script>
だいたいこんな感じで取得していました。
###WordPressでいろいろいじっていたら突然サムネイルが取れなくなる
取得できたのを確認したあと、Wordpressで投稿のカテゴリを増やす、
また特定の記事でサムネイル画像を変更するなどしていました。
その後、一覧を取得していたページに戻ったところ、
触った記事だけでなく、全記事のサムネイル画像が表示されなくなっていました。
そこでconsoleにログを取得して確認していたところ、
wp:featuredmediaから先が正しく取れていないことがわかりました。
その中のデータを確認すると以下のようなエラーが返ってきています。
code: "rest_forbidden"
data:status: 401
message:"その操作を実行する権限がありません。"
そもそも権限にからむ操作をした記憶もなく、ソース自体変わっていなかったため原因が不明でした。
###解決方法
国内外問わずググってもこれという情報がでず・・・
WP APIのissueで同様の質問を発見。
解答を見ていると、
「これ多分バグっぽくて、投稿消して再度投稿したら行けるよ」って書いてました。
なので、言われた通り、
**投稿消して、新規投稿、かつサムネイルも新規アップロード（←重要）**したら直りました。
日本語ファイルが原因だったのか、特殊文字が原因だったのか（サンプル①.jpgみたいな名前）、
再度試したけど再現せず、サンプル①.jpgみたいな名前の画像でもしっかりと表示され、
原因自体は不明でした。
とにかく、このような現象にあった場合は、再投稿するほかないようです。