コーディングブログ

Coding Blog

WPで投稿したブログをREST APIで取得し、Vue.jsでブログ一覧を作成

Vue.js

WordPress

    技術スタック

    • バックエンド
      – WordPress(ブログはカスタム投稿)
    • フロントエンド
      – Vue.js
    • 環境
      – Vue CLI
    • ライブラリ
      – SPA用でVue Router、Ajaxにaxios

    作成ファイル

    main.js

    Vue CLIでaxiosをインストールします。

    その後main.jsに上記axiosの記述を追記してください。
    以降this.$axiosで使えます。

    mixin.js(任意)

    他でも使い回したかったので、mixinにしました。

    getDate

    REST APIが返す投稿日の値は、
    『2020-01-04T07:27:32』
    の形式で、Tの後に時間が入ってきますが、今回は不要なのでT以降の文字を削除します

    getExcerpt

    REST APIが返す抜粋は100文字までで、省略記号が『[…]』です。

    まずは、HTMLタグが含まれているのでそれを削除し、指定の文字数のカットしたのち、『…続きを読む』と表示させます。

    router/index.js

    page_numをパラメーターとしてコンポーネントに渡します。

    Blog.vue

    script

    ページャーをコンポーネントに分けたので、importとcomponentsに定義します。mixinも。

    getBlogs

    axiosでWP REST APIのエンドポイントにリクエストを送り結果を受け取ります。
    値を組み合わせてget()にエンドポイントを渡します。

    ▼ エンドポイント例
    https://tacs-port.tech/wp-json/wp/v2/blog?_embed&per_page=8&page=1

    blogカスタム投稿スラッグ
    _embedアイキャッチ画像を取得するために必要
    per_page1ページあたりの投稿数
    page何ページ目か
    ● 結果

    返ってきた値はresponse.dataに入っているので、forで配列:blogListに、値を追加:pushします。

    REST APIで返ってくる値は下記のようなオブジェクト階層になっています。
    そして、挟んだ関数などを記載します。

    タイトルtitle.rendered 
    抜粋excerpt.renderedカスタム投稿側で抜粋を有効化
    日付datemixinで用意したgetDate()関数を挟む
    パーマリンクlinkreplace(HOST, '')で絶対パスのドメイン部分を削除
    アイキャッチ画像_embedded[‘wp:featuredmedia’][0].media_details.sizes.full.source_urlアイキャッチ画像が無かったらここでエラーになるので、三項演算子で_embedded[‘wp:featuredmedia’]が無かったらnoimage.pngを代入
    アイキャッチ画像のAlt_embedded[‘wp:featuredmedia’][0].alt_text同上

    投稿総数やページ数はheader情報に入ってきます。
    なので、response.dataではなく、response.headersに入っています。

    投稿総数x-wp-total
    ページ数x-wp-totalpages

    createdで、最初の記事一覧表示、
    watchで、ページネーションで遷移時の記事一覧表示です。

    SPAで同じコンポーネントで値を更新する時はwatchで再度パラメーターを代入する必要があります。

    template

    あとはblogListにしまった記事データをv-forで出力するだけです。

    ページネーションも作成したので、そのコンポーネントに値を渡します。

    Pagination.vue

    親コンポーネントからcurrentpagesの値を受け取って、それに応じて出力させます。

    ①は、一つ前のページを出力します。(現在のページ -1)
    v-ifでそれが0(1ページ目)の時は非表示にします。

    ②は、v-forでページ数分リンク出力を繰り返します。
    spanタグに現在のページ時にcurrentというclassを付与します。

    ③は、一つ後のページを出力します。(現在のページ +1)
    v-ifでそれがページ数より大きい場合(最後のページ)の時は非表示にします。