カスタム投稿 REST APIで取得するJSONを並び替えプラグイン通りにする

https://siteUrl.com/wp-json/wp/v2/POST-TYPE-NAME/ のREST APIを叩くと順番がデフォルト（投稿日順？）になってしまうので、これを並び替えプラグイン通りに並べ替えたい。

ぴったしの記事がありました
Intuitive Custom Post Orderの並び順をWP-REST-APIに反映する - aircolor memolog

カスタム投稿の場合は下記のようにする（ POST-TYPE-NAME にポストタイプを指定 ）

<?php
add_filter( 'rest_POST-TYPE-NAME_query', function( $args, $request ) {
  $args['order'] = 'ASC';
  $args['orderby'] = 'menu_order';
  return $args;
}, 10, 2 );

タクソノミーの場合も同様

<?php
add_filter( 'rest_TAXONOMY-NAME_query', function( $args, $request ) {
...

他参考

• WordPress REST API での検索条件設定 - Qiita
• restquery | filter | WordPress | hookr.io

ACF オプションページのREST APIエンドポイント

ACFオプションページのエンドポイントがうまくいかなかったのでメモ
公式ドキュメント: https://github.com/airesvsg/acf-to-rest-api
同じようなissue: https://github.com/airesvsg/acf-to-rest-api/issues/184

登録はfunctions.phpに通常通り記述

<?php
// ...
if( function_exists('acf_add_options_page') ) {
  $option_page = acf_add_options_page(array(
    'page_title' => 'PAGE-NAME',
    'menu_title' => 'PAGE-NAME',
    'menu_slug' => 'SLUG-NAME',
    'capability' => 'edit_posts',
    'redirect' => false
  ));
}
// ...

ドキュメントに /wp-json/acf/v3/options/{id}/ とあるので
https://{site_url}.com/wp-json/acf/v3/options/{id}/
を叩いてみても acf:{} と空が返ってくる...

こちら によると

/wp-json/acf/v3/options/{id}/
ではなく
/wp-json/acf/v3/options/options/
だとうまくいくとのこと。

https://{site_url}.com/wp-json/acf/v3/options/options/
が正解でちゃんと返ってきました。
ただこれだとすべてのオプションページのフィールドを含んでいるみたいです。
オプションページ登録部分が悪いのか、環境依存なのかは謎なままですがとりあえず取得まではこれでできるという感じでした。

node.js の切り替えを nodebrew ではなく nodenv で行う

nodebrew はプロジェクトごとに切り替えがしづらいので、 nodenv のがいいらしい。 導入は こちら 通りでいけました

リスト表示

$ nodenv versions

バージョン指定でインストール

$ nodenv install 10.15.0
$ nodenv install 12.11.0

デフォルトで使用するバージョンを指定

$ nodenv global 12.11.0

プロジェクトごとに使用するバージョンを指定

$ cd [project folder]
$ nodenv local 10.15.0
$ nodenv local 12.11.0

これでプロジェクトフォルダに .node-version ファイルが追加されているはず
バージョン確認

$ node -v

nodebrew の削除

# パス 削除
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ export PATH=$HOME/.nodebrew/current/bin/npm:$PATH

# nodebrew 削除
$ brew uninstall nodebrew

最後に、 ~/.nodebrew ディレクトリを削除

参考：

• Node.jsのバージョンを自動で切り替えられるndenvが超便利 - Qiita
• nodebrew から ndenvに切り替えたメモ(OSX) - Qiita

REST API のスキーマにリピーターフィールドの画像データを格納する

ACF to REST API を使えば REST API でACFの値が取得できますが、カスタマイズした形でカスタムフィールドの値を追加する方法です。

例えばACFフィールドでアップロードした画像は指定している戻り値がREST APIでも返ってきます。
image_field: リピーターの親フィールド
image_sub_field: リピーターの子フィールド（返り値 => 画像ID の場合）

...
"acf": {
    "image_field": [
      { "image_sub_field": 164 },
      { "image_sub_field": 165 },
      { "image_sub_field": 166 },
...

このままだとAPIからは画像URLなど取れないので独自で追加する必要があります。
functions.php

<?php
// ...
function register_custom_images_data() {
  register_rest_field(
    'CUSTOM_POST_TYPE_NAME', // カスタム投稿名
    'CUSTOM_REST_API_KEY',   // REST API に追加するキー
    array(
      'get_callback'    => 'get_custom_image_data',
      'update_callback' => null,
      'schema'          => null,
    )
  );
}
add_action( 'rest_api_init', 'register_custom_images_data' );
// リピーター画像取得
function get_custom_image_data( $object, $field_name, $request ) {
  $meta_fields = $object['acf']['image_field'];
  $meta = array();
  foreach ( $meta_fields as $field ) {
    $artist_images_full = wp_get_attachment_image_src( $field['image_sub_field'], 'full');
    array_push($meta, $artist_images_full);
  }
  return $meta;
}
// ...

として REST API を叩くと

...
  "CUSTOM_REST_API_KEY": [
  {
    "https:/siteUrl.com/wp-content/uploads/2019/10/sample02.jpg",
    1280,
    640,
    false
  },
  {
    "https:/siteUrl.com/wp-content/uploads/2019/10/sample01.jpg",
    1280,
    640,
    false
  },
...

となる

仮に Vue で出力するには

<ul v-for="(image,index) in post.data.CUSTOM_REST_API_KEY" :key="index">
  <li>
    <img
      :src="image[0]"
      :data-size="`${image[1]}x${image[2]}`"
      >
  </li>
</ul>

という感じで出力する

WordPress + Nuxt.js で スラッグベースのパーマリンクにルーティングする

ルーティングする という表現があっているのかどうか微妙ですが、
カスタム投稿タイプを使ったWordPressの投稿をIDベースではなくスラッグベースで実装する場合

カスタム投稿: book
.vue ファイル名: /pages/book/_slug.vue
実現したいURL構造: https://hoge.com/book/[スラッグ名]

<template>
  <section>
    <pre>{{post[0]}}</pre>
    <p>id: {{post[0].id}}</p>
    <p>slug: {{post[0].slug}}</p>
    <p>date: {{post[0].date}}</p>
    <p>link: {{post[0].link}}</p>
    <h1>{{post[0].title.rendered}}</h1>
    <div v-html="post[0].content.rendered"></div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      post: {}
    }
  },
  asyncData ({ params }) {
    // console.log(params)
    // console.log(params.slug)
    return axios.get(`https://hoge.com/wp-json/wp/v2/book?slug=${params.slug}`)
      .then(response => {
        return { post: response.data }
      })
      .catch((error) => {
        return { error: error }
      })
  }
}
</script>

結構つまってしまって、REST APIのエンドポイント、IDベースでしか記事情報が取得できないと思って
https://hoge.com/wp-json/wp/v2/book/${params.id} でid取得したあとにスラッグ取るのどうやんのかなとか思ってましたが、
https://hoge.com/wp-json/wp/v2/book?slug=${params.slug} でいけました

なのでAPI側を理解してなかったっていう話でした
参考: https://unicorn.limited/jp/item/949

🍺 nodebrew 🍺

インストールされている Node.js のバージョン確認

$ nodebrew list
v10.15.0
v11.6.0
v12.11.0

current: v12.11.0

安定版のインストール

nodebrew install-binary stable

バージョン指定でインストール

nodebrew install-binary v10.16.3

使用するバージョンの切り替え

$ nodebrew use v10.15.0
use v10.15.0

現在のバージョン確認

$ node -v
v10.15.0

2019年9月 振り返り

結果

ブログ

目標：月 12 回（週 3 回）更新
結果：月 4 回 更新

読書

目標：月 1 冊
結果：月 2 冊

反省点など

スクラム開発を知りたい欲が高まって関連本読んだが、技術的に進歩はほぼなし

来月に向けて

Nuxt 触ってサイト完成までもっていく。実績として1つ公開したサイトを作っておきたい
ブログの更新は目標回数見直そうかなと思います