WordPressの記事一覧をREST APIから取得してみる

WordPressのREST APIから記事一覧を取得し、Vue.jsで表示するサンプルコードを紹介します。もちろんNuxt.jsでも使える方法です。

サンプル

当サイト（ばすにっきTips）の新着記事を取得し、表示するサンプルです。

Vue.jsとAxiosで実装してみました。

解説

まず、axiosでAPIにアクセスし、データを取得しています。

// 最新記事を取得する
axios
  .get("https://takabus.com/tips/wp-json/wp/v2/posts?_embed")
  .then((res) => {
    this.posts = res.data;
  });

最新の投稿は/wp-json/wp/v2/posts?_embedからGETで取得できます。

例えば、hoge.comにwordpressのトップがあるとすると、hoge.com/wp-json/wp/v2/posts?_embedがAPIとなります。ブラウザからアクセスして確認してみましょう。URLと一緒にクエリパラメーターを追加することで、カテゴリ（?categories）やタグ（?tags）で絞り込んだりといったこともできます。

このほか多くのパラメーターが準備されており、かなり細かい指定が可能となっているようです。

Posts – REST API Handbook | Developer.WordPress.org

Schema

取得したデータはdataに置いておき、v-forで各記事へのリンクとサムネイル・タイトルなどを表示させています。

<!-- 記事ごと -->
<a :href="post.link" v-for="post in posts" :key="post.id" style="text-decoration:none;color:#2c2c2c;">
    <div class="card" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-4">
                <img class="d-block w-100"
                    :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumb320.source_url"
                    alt="..." />
            </div>
            <div class="col-8">
                <div class="card-body p-2">
                    <h6 class="card-title mb-0">{{post.title.rendered}}</h6>
                    <div>
                        <small>{{post.date.substr(0,10)}}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>

余分なクラスやスタイルを取り払うとこんな感じとなります。

<a :href="post.link" v-for="post in posts" :key="post.id">
    <div>
    <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumb320.source_url" />
    <h6>{{post.title.rendered}}</h6>
    <small>{{post.date.substr(0,10)}}</small>
    </div>
</a>

よくつかうであろうキーは以下のとおりです。

項目	JSONのキー
記事のタイトル	post.title.rendered
記事の投稿日時	post.date
サムネイル画像のURL (320px)	post._embedded.wp:featuredmedia[0].media_details.sizes.thumb320.source_url

なお、サムネイル画像は?_embedをつけないと取得できません。

まとめ

WordPressサイトの記事一覧をほかのサイトに埋め込みたいときなどに便利そうですね。例えばWebアプリのお知らせサイトをWordPressで制作し、Webアプリ内にお知らせを埋め込む、なんて使い方が考えられます。

▼こちらのURLで実際に運用しているサンプルも公開しています。Nuxt.jsを使用したサイトですが、記事内容はサーバーサイドレンダリング、新着記事のところは当記事の方法を使いクライアントサイドでレンダリングすることで、つねに最新の記事が表示される仕組みとなっています。実際のユースケースとして、参考にしていただければ幸いです。