Vue.jsでWordPressから新着記事一覧を取得・外部サイトに表示する方法
WordPressを使ってるブログサイトから記事情報を取得・外部サイトに表示したい。
本記事ではこの様な悩みを解決。
WordPress REST API・axios・Vue.jsを使って、実装する方法を解説します。
WordPress REST API・axiosとは
WordPress REST APIとはURLベースでWordPressから記事情報を取得できるAPIです。
axiosとはAPIからデータを取得、そのデータを表示・追加・削除できるものになります。
この二つを組み合わせて、Vue.jsを使い動的に記事を外部サイトに表示します。
実装サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
本サイトの新着記事を8件、codePenに表示してます。
実装手順は以下の通りです。
CDNを準備
<!-- vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-- axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
本記事ではCDNを使って、Vue.jsとaxiosを使える様にします。
上記コードを実装環境に読み込みます。
Vue.js・axiosでデータを取得
const app = Vue.createApp({
data() {
return {
posts: '',
error: '',
}
},
created() {
this.getPosts();
},
methods: {
//WordPressから投稿データ取得
getPosts: function () {
// ここのドメインを取得したいサイトのドメインに変更
axios.get('https://kasumiblog.org/wp-json/wp/v2/posts?_embed', {
params: {
// 取得する記事数
per_page: 8,
}
})
.then(response => {
this.posts = response.data
})
.catch(error => {
this.error = "記事を取得できません"
})
},
// 日付フォーマットを変更
dateFormat: function (postDate) {
const date = new Date(postDate)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return year + '/' + month + '/' + day
},
}
});
app.mount("#app");
vueとaxiosを使い、WordPress REST APIから記事を取得するコード例です。
getPosts関数に定義されてるaxios.getメソッドを確認。
記事を取得したいWordPressサイトのドメイン（/wp-json/より前を変更）を指定します。
paramsにあるper_pageに、取得したい記事数を入れます。
以上でdataメソッドにあるpostsに取得したい記事数分、データが格納されます。
埋め込みたい場所にHTMLを記述
<div id="app">
<div class="flex">
<div class="post" v-for="post in posts">
<a v-bind:href="post.link" class="post-link">
<!-- アイキャッチ -->
<img class="post-img" v-bind:src="post._embedded['wp:featuredmedia'][0].source_url" alt="">
<!-- 公開日 -->
<p class="post-time">{{dateFormat(post.date)}}</p>
<!-- カテゴリ -->
<ul class="post-cate" v-for="category in post._embedded['wp:term'][0]">
<li>{{category.name}}</li>
</ul>
<!-- タイトル -->
<p class="post-title">{{ post.title.rendered }}</p>
</a>
</div>
</div>
<!-- エラーの場合 -->
<p>{{error}}</p>
</div>
最後に記事を埋め込む場所にデータを出力します。
v-forディレクティブで記事を一件ずつpostsから取得・出力します。
以下をそれぞれ出力したい箇所に記述することで記事データを表示できます。
post._embedded[‘wp:featuredmedia’][0].source_url
アイキャッチ画像のURLを取得
dateFormat(post.date)
記事公開日を取得。（前章でdateFormatを定義）
post._embedded[‘wp:term’][0]
複数カテゴリを取得。
v-forディレクティブを使い、繰り返しで出力。
post.title.rendered
記事タイトルを取得
post.link
記事のリンク先を取得
それぞれ取得したい条件に合わせて使い分けてください。
以上で実装完了です。
まとめ
Vue.jsでWordPressを使ってるブログサイトから記事情報を取得・外部サイトに表示する方法について紹介しました。
以上で解説を終わります。