WordPress REST APIを読みこんで記事を表示する

テストデータをWordPressに入れておく

オリジナルの入力項目を追加するカスタムフィールドは、今のところ必要ないのでは…と思い、テストデータはブロックエディターを使って画像、表、リスト、カラム、ボタンなどを入れてみました。

出力されたJSONのcontentをみると、なんかhtmlタグはもちろんのことclassとかも入っていますね。。

"\n<p>久しぶりにダニエルでカヌレを買いました。</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"945\" src=\"http://gogogridsome.backdrop.jp/wp-content/uploads/2020/10/IMG-5747-1024x945.jpg\" alt=\"\" class=\"wp-image-19\" srcset=\"http://gogogridsome.backdrop.jp/wp-content/uploads/2020/10/IMG-5747-1024x945.jpg 1024w, http://gogogridsome.backdrop.jp/wp-content/uploads/2020/10/IMG-5747-300x277.jpg 300w, http://gogogridsome.backdrop.jp/wp-content/uploads/2020/10/IMG-5747-768x709.jpg 768w, http://gogogridsome.backdrop.jp/wp-content/uploads/2020/10/IMG-5747-1536x1418.jpg 1536w, http://gogogridsome.backdrop.jp/wp-content/uploads/2020/10/IMG-5747-2048x1891.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /><figcaption>カヌレー</figcaption></figure>\n\n\n\n<h2>H２の見出しが入ります。</h2>\n\n\n\n<p>朝の散歩は海までいったよ。</p>\n\n\n\n<p>おかげでグッタリだよ。</p>\n\n\n\n<h3>H3の見出しが入ります。</h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></tbody></table><figcaption>3×3のテーブルを入れました。</figcaption></figure>\n\n\n\n<h2>他に何かいれるものないかなー</h2>\n\n\n\n<p>ブロックエディターはマジ使いやすくなったな。</p>\n"

これを見るとイチからCSSを書くよりも、ブロックの基本のスタイルのCSS持ってきてたほうが速いのでは？？？
気に入らないところは自分が修正するとして、ベースをいただいたらいんじゃない。

一応ベースのCSSをコピーして保管しておく

ブロックの基本のスタイルは"WordPressの中「wp-includes/css/dist/block-library/style.min.css」にあるということが分かったので、サーバーからDLして名前を「wp_style.css」として、/assets/css/の中に入れました。

wp-includes/css/dist/block-library/style.min.css

↓コピーしてリネーム

/src/assets/css/wp_style.css

記事ページのテンプレートを作るときに、利用したいと思います。今はココでストップ。

@ gridsome / source-wordpress をインストール

npm install @gridsome/source-wordpress

そのあと「gridsome.config.js」の「plugins:」のところに追記します。

plugins: [
  --省略
  {
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: 'http://gogogridsome.backdrop.jp/', // url
      apiBase: 'wp-json',
      typeName: 'WordPress',
      perPage: 10,
      concurrent: 1,
      customEndpoints: [ //カスタム投稿タイプ
        {
            typeName: "DiaryPost", //カスタム投稿タイプ用
            route: "/wp/v2/diary", //カスタム投稿タイプ用のURL
            normalize: true,
        },
    ]
    }
  }
],
templates: { //出力するURLの指定
  WordPressPost: "/wp/:id/",
  DiaryPost: "/blog/:id/"
},

テンプレート名の仕組みがイマイチ…

「gridsome.config.js」の「typeName:」が'WordPress'なら記事用のテンプレート名は自動的に「WordPressPost」になる。 markDownのプラグイン「@gridsome/vue-remark」を使った時はテンプレートの指定をしたけど…なんなの。。。

今回はカスタム投稿タイプを使っているので、カスタム投稿タイプ用の「typeName」を「DiaryPost」としました。
テンプレート名は「DiaryPost」。「DiaryPostPost」じゃなかった。。。仕組みがよく分かんねぇ

↓「DiaryPost.vue」のテンプレの中身はこんな感じ。
↓タイトルと投稿日を指定しただけで、あとはコンテンツの中身を出力するといった感じです。

<template>
  <Layout>
    <article class="WpPost">
    <h1 class="h2 mb-3 text-info">{{ $page.diaryPost.title }}</h1>
    <div class="border-top border-bottom border-info pt-2 pr-2">
    <p class="h6 text-right">投稿日：{{ $page.diaryPost.date }}</p>
    </div>
  <div v-html="$page.diaryPost.content" />
  <p class="d-flex align-items-center justify-content-center"><b-icon-arrow-up-circle-fill font-scale="2" class="mr-2"></b-icon-arrow-up-circle-fill font-scale="2"><a href="/step/">目次ページに戻る</a></p>
  </article>
  </Layout>
</template>

<page-query>
query DiaryPost ($id: ID!) {
  diaryPost(id: $id) {
    title
    date (format: "YYYY年M月D日")
    content
  }
}
</page-query>

--以下「StepPost.vue」と同じなので略

出力されたことを確認する。

CSSが全くきいていませんが、出力されたことを確認しました。

CSSを読み込む。

テンプレごとにCSSをインポートすることができるはず…と思うんだけど見当たらず。。。
先程WordPressからDLしてきたCSSを「main.js」に書いちゃいましたw

import '~/assets/css/wp_style.css'

おぉ！！リストとかカラムとか表とかボタンとかちゃんと最低限のスタイルが当たっています！！！

表の線、カラムの画像がチョット変ですが、CSSを追記して対応したらOK!!

公開して確認したら画像出てなかったー！！！

ローカル上ではちゃんと画像出てたのに、本番公開したら画像が表示されず（汗
おそらくWordPress側のSSL化してないから、画像引っ張ってこれないっぽい…

くぅ～！！！やりますよ！やります！！

ドメインとってSSL化対応したら画像表示されました…ホッ

やっとチャンと最初の投稿が表示されました。
次はリストページをやります！！