WordPress REST APIを読みこんでリストページを作る

投稿日:2020年12月3日

更新日:2020年12月3日

とりあえずアイキャッチ画像はどこだ…

APIのURLを

https://gridsome.work/wp-json/wp/v2/diary

↓ アイキャッチ画像を取得するにはURLの末尾に「?_embed」を付けると取得されるとあったので、変更。

https://gridsome.work/wp-json/wp/v2/diary?_embed

これをブラウザで見てみると…
エラーの表示
message:"その操作を実行する権限がありません。"!!!!そしてstatus:401!!!

表示されてないんですが…

ここでドはまりね。。。

日本語サイトも英語サイトも色々探しまくった挙句、

VueとWP REST API でサムネイル付き一覧を作成&取得時に発生する再現性のないバグを回避する方法

再現性のないバグ…で落ち着いているようだ(なんだよそりゃ)
画像の名前が悪いとかいう話も出てたけど、私の場合は英数半角だからこれが問題ではないはず。

そんなわけで、私も投稿を削除、新規投稿から作り直し、サムネイルも新しくアップロードさせていただきました。

無事!表示されたことを確認!!

ブログのトップページ用のテンプレートを追加する

さきに作ったStep.vueのテンプレートを参考に「/src/pages/Blog.vue」に新しくリストページ用のテンプレートを作る。
と思ってやっていたんですが、アイキャッチ画像の情報どんなに頑張っても取得できず…挙句、やり方変更!!!

「axios」を使っていつもどーりフツーに外部APIを手動で呼び出すことにしました。いいもんね。チッ

いつも通りと思ったけど、いつも通りじゃなかった…

普段は「Vue.js」読んで「axios.js」も読んで~なんだけど、gridsomeの場合どうなんの?

公式サイトの「Add collections with Data Store API」(https://gridsome.org/docs/collections/?#add-collections-with-source-plugins) に書き方は記載されているモノの、これドコに書くのよ。。。

「gridsome.server.js」ってなに。。って思ったら、最初から準備されて入っていましたw。それもディレクトリ直下に。
ははは~とりあえず公式サイトからいただきたコードを「/gridsome.server.js」にペタっとはり、中身を変更します。

const axios = require('axios')

module.exports = function (api) {
  api.loadSource(async actions => {
    const { data } = await axios.get('https://gridsome.work/wp-json/wp/v2/diary?_embed')

    const collection = actions.addCollection('Diarylist')

    for (const item of data) {
      collection.addNode({
        id: item.id,
        title: item.title.rendered,
        date: item.date,
        thumbnail: item._embedded['wp:featuredmedia'][0].source_url
      })
    }
  })
}

テンプレートに表示を記載します

テンプレートは「/src/pages/Blog.vue」。
「template」と「page-query」を書き換えて、あとメタ情報などは「/src/pages/Step.vue」と同じです。

<template>
  <Layout>
  <article class="Blog">
    <b-jumbotron bg-variant="white" text-variant="info" border-variant="info">
    <h1>Blog</h1>
    <p>WordPressと連携してBlogをHeadlessで更新します</p>
    <hr class="my-4">
  <ul class="Boxlink">
    <li v-for="diaryPostlist in $page.diaryPostlist.edges" :key="diaryPostlist.node.id">
        <a href="#":href="'/blog/'+diaryPostlist.node.id" class="card">
          <img :src="diaryPostlist.node.thumbnail" class="card-img-top" alt="">
          <div class="card-body">
            <h2 class="card-title h5">{{ diaryPostlist.node.title }}</h2>
          </div>
      </a>
    </li>
  </ul>
  <g-image src="~/assets/img/yotigory_02.png" class="Bgimg" width="60px" alt="よちごりーのアイコン"/>
  </b-jumbotron>
  </article>
  </Layout>
</template>

<page-query>
  query {
    diaryPostlist: allDiarylist(sortBy: "createdAt", order: ASC)  {
      edges {
        node {
          id
          title
          date (format: "YYYY年M月D日")
          thumbnail
        }
      }
    },
  }
</page-query>
--以下略

やっとアイキャッチ付きリスト表示できました!!本当に疲れたwww

目次ページに戻る