サンプル

当サイト（ばすにっき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

developer.wordpress.org

取得したデータは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>

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

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

まとめ

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

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

バスずかん

バスの写真をたくさん掲載！バスずかんでは仙台を中心としたバスの写真を掲載しています。バスにっきとあわせてごらんください。

takabus.com