Written by Kasumi

Vue.jsでWordPressから新着記事一覧を取得・外部サイトに表示する方法

WordPressを使ってるブログサイトから記事情報を取得・外部サイトに表示したい。

本記事ではこの様な悩みを解決。

WordPress REST APIaxiosVue.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を使ってるブログサイトから記事情報を取得・外部サイトに表示する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

【簡単】Vue.jsとCSSを使ってハンバーガーメニューを実装する方法

2022.09.16
3275
Vue.js

Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

2022.09.13
5349
Vue.js

Vue.jsでfadeIn、fadeOutするアニメーションを実装する方法

2022.09.22
4602
Vue.js

Vue.jsで日本語カレンダー入力を実装する方法【Vue 3 Datepickerライブラリ】

2022.09.24
7880