WordPressで手軽にREST APIを確認する方法！

# WordPressで手軽にREST APIを確認する方法！

とか言いながら、WordPressのプラグインを作ったのでそのドキュメント置き場として利用してます。

https://wordpress.org/plugins/query-search/

今回作ったのはREST APIの結果をDataGridに表示するブロックです。
設定されそこなったカスタムフィールドを持つ投稿をあぶりだすこともできます。

素人プログラマが練習用に作ってるもので品質はあんましよくありません。
まだ完成には程遠いですけど少しずつ進めてます。
インストールしていただけると嬉しいなー。

あとプロの方、レビューとかいただけると嬉しいなー。


## 以下ドキュメント。


REST API のクエリ結果確認用です。
GutenbergのEntity Dataを使用し結果をデータグリッドに表示します。

このプラグインは「非公開の投稿orページ」でのみ使用してください。
開発練習用に作ったもので開発者専用となってます。



例として「投稿」にクエリを投げてみます。
以下は使い方です。



## 結果ビュー

まずは「結果ビュー(query-search/result-view)」を追加します。
REST API 結果をDataGrid表示するブロックです。

![wp-add-result-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/e6e9d88e-cfa0-17b9-2331-2f7f7e1df074.png)


結果ビューの表示名(適当でいい)を付けます。

![wp-result-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/928ad2e2-3a61-cb91-7cf6-ceb169b4d6f4.png)


次にエンティティを選びます。
「投稿」は`postType`で`post`です。

![wp-entity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/10f11fdf-6faa-9b62-47b9-0ccf3278e5d2.png)




## エンティティ

エンティティは「kind」と「name」からなります。
一般的なのは以下の通りです(他にもありますが省略します)。

| entity     | kind     | name        |
|------------|----------|-------------|
| 投稿       | postType | post        |
| 固定ページ | postType | page        |
| メディア   | postType | attachement |
| カテゴリ   | taxonomy | category    |
| タグ       | taxonomy | post_tag    |


エンティティを選択すると、DataGridに一覧が表示されます。


![wp-entity-column-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/c04ac66e-5899-1a25-af36-9bfbcc2062e1.png)


REST APIの結果から表示するカラムを選択できます。
「エンティティ決定」ボタンを押せば完了です。


## クエリ・フォーム

クエリフォームを使うとクエリを追加することができます。

    /wp/v2/posts?search=kurage

例えばテキスト検索する場合は「search」を追加します。
詳しくは公式ドキュメントを読んでください。

https://developer.wordpress.org/rest-api/reference/posts/

以下のようにクエリフォームを追加します。
「文字列 クエリ」を選択し、
「追加」ボタンを押します。

![wp-add-query-form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/07db8643-58e8-8075-96d4-0c120f623b69.png)


そしたら「文字列 クエリ」の入力ブロックが追加されます。
クエリパラメータの名前(フィールド名)の「search」を入力して決定ボタンをおします。

![wp-entity-search.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/de93ea37-863f-b0d0-abb6-9373992d6b13.png)


パラメータの値を入力します。「kurage」を入力します。

![wp-query-search-input.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/5eab7276-d36c-6efa-e0d1-b7d683a173a2.png)


これでクエリパラメータが完成します。

    search=kurage

ただそのままではフィルターでは無効になっています。


![wp-query-filter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/0fa275ea-3515-cbac-1180-17a2cdb28714.png)


フィルター(search: kurage)をチェックします。


![wp-query-filter-check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/f7cb3614-c751-ede0-69c6-d9eb76e82556.png)


チェックを入れると以下のURLが完成します。

    /wp/v2/posts?search=kurage


**結果ビューに即反映されます**

重要なことなのでもう一度書きます。

**結果ビューに即反映されます**

今回は「文字列」を指定するクエリフォームを使いましたが、他に「DateTime」や「配列」もあります。

DateTimeは「after」や「before」に使用します。
配列は「categories」や「include」「exclude」に使います。

これら「after, before, include, exclude」などはクエリパラメータとして使えるものです。
しかし、いちいちドキュメントを見るのも面倒です。
そこでエンドポイントを活用します。


## エンドポイントからの追加


これらクリエパラメータの情報はHTTPメソッドを「OPTIONS」に指定することで得ることができます。

```js
await wp.apiFetch({ path: '/wp/v2/posts', method: 'OPTIONS' })
```


![wp-api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/e7214429-cd87-d5e8-0037-e05cd197ece4.png)


このJSONスキーマを解析し、自動的にクエリフォームを構築するのがこの機能です。
試しに「after」を追加します。


![wp-endpoint-after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/d3721508-7326-059b-2460-5fbc4efb6b57.png)



「追加」ボタンを押すとDateTime型のクエリフォームが追加されます。
その際フィールド名(after)も設定された状態になります。


![wp-endpoint-after-add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/20535f37-b946-6ffd-c7da-074971e59c35.png)



時刻を設定し、フィルターをチェックするとクエリパラメータにafterか追加されます。


![wp-endpoint-after-check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/5d11da93-45ff-3fa9-7920-5634dc4646f2.png)



## 隠し内部ブロック

これらクエリフォームの正体はブロックです。
これらは「結果ビューブロック」の隠しブロックに自動的に追加されます。

ツールバーの目のボタンを押すと「表示」「非表示」を切り替えることができます。



![wp-hidden-blocks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/20495471-dd9d-bebd-0b5f-9c83a07c888a.png)


そしてインスペクターのフォームと連動してます。


## クエリ フォーム ブロック

直接ブロックとして追加することもできます。
「文字列 クエリ」 を追加してみましょう。


![wp-string-query-form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/9b7f82ab-5d82-7ecb-8370-1d86b7d81750.png)



クエリ名を入力(search)

![wp-string-query-form-add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/f4807eb5-fb72-3e67-a79f-5afc2581636b.png)



クエリフォームは結果ビューに属します。
どの結果ビューにも属してないと警告が出ます。
属する結果ビューを選択します。

![wp-string-query-form-result-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/4270c011-7b09-dc79-c57b-58705e47b7a2.png)



クエリフォームが完成しました。


![wp-string-query-form-new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/a8bbda2f-a65f-8be7-bf40-d1b4ddc6789c.png)


ただクエリ名(search)が二つ存在してます。
こちらのほうには値(hello)を入力します。

![wp-string-query-form-select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/3c3dddef-a18c-551e-5736-4c4e0e40defc.png)


クエリ フィルタを見ると、「search」がラジオボタンになっています。
同じクエリパラメータの名前が複数あると、そのうちどれかを選ぶ必要があります。
searchの値「kurage」と「hello」を切り分ることができます。

![wp-string-query-form-select-check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/e4a564f1-ccd6-2104-0a12-bea9d76096e9.png)


## IDチェック

クエリパラメータの「categories」は、カテゴリを絞る検索です。
指定したカテゴリに属する投稿だけを検索します。

投稿のカテゴリの指定の仕方は２通りあります。


* カテゴリIDの配列を指定(categories)
* オブジェクトで指定(terms, include_children, operator)

設定の仕方はちょっと特殊です。


新たに結果ビューを追加します。
エンティティは「カテゴリ(taxonomy/category)」です。

![wp-category-result-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/b00bdf42-cf42-ae5d-1ba0-99aadf431d61.png)


DataGridにカテゴリ一覧が表示されます。
それぞれチェックできるので、適当にチェックします。

![wp-category-ids.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/8e0d48cd-c0f8-1f36-8890-872b9aae05bc.png)



## マルチ クエリ

投稿の結果ビューに戻ります。
エンドポイントから「categories」を追加します。

![wp-category-endpoint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/8224f256-e2d8-d314-4b06-4a8418c63a97.png)


選択項目があります。
「配列 クエリ」と「オブジェクト クエリ」です。

![wp-category-endpoint-select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/899c93ef-60bb-c779-472f-8ed84f0ceefb.png)


* 配列 クエリ

![wp-category-endpoint-select-array.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/c58c5a7c-4cd9-3698-7f90-3114b95056a5.png)


* オブジェクト クエリ

![wp-category-endpoint-select-object.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/6b92b539-86ac-2054-23f4-fa830746041d.png)


まずは「配列 クエリ」についてです。
「結果ビューから取得」ボタンを押します。

![wp-category-endpoint-select-array-rv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/4bce4eb7-cbfe-d07e-f9e6-8d0f6a198344.png)


カテゴリ 結果ビューを選択します。

![wp-category-endpoint-select-array-rv-c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/9f897e37-8e6f-2dc6-db71-a9e6cc31c347.png)


リストを上書きします。

![wp-category-endpoint-select-array-rv-c-rew.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/9120ebba-585b-322f-428d-464d69e7f20b.png)


クエリ フィルタを見るとチェック項目がクエリパラメータに指定されていることが確認できます。


![wp-category-endpoint-items.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/474c03ae-1cfd-5f4b-65d2-53c4f3f7babc.png)



結果ビューを見ると、特定のカテゴリに属する投稿に絞り込まれています。
わかりやすいようにカテゴリＩＤのカラムを追加しています。


![wp-category-endpoint-result-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/05b99a54-1ac0-c785-2130-f2f4bc536c7c.png)


ちなみに「オブジェクト クエリ」はもっと複雑です。

* terms タームのリスト(未確認だがカテゴリ以外のタームも含むのかも？)
* include_children 子タームも含めるか
* operator すべてのタームに属するなら「AND」、一部なら「OR」

これらをまとめて設定できます。
クエリパラメーターはとても複雑になってます。

![wp-category-endpoint-object.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/5f86c26f-0cc4-60e3-c162-72b845cecb9e.png)


## メタチェック

この機能は投稿タイプが`postType`のものにだけ有効です。
カスタム投稿を使用する場合はPHP側のカスタム投稿用関数で「show_in_rest」を有効にします。

エンドポイントから「kurage_meta_includes」を選び追加します。
投稿にメタが設定されているか調べます。

![wp-qs-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/279378b6-4028-50cd-cfad-744d8fe3f342.png)


またメタがいくつそろっているかを調べます。

not: 一つもメタが含まれない
all: すべてのメタが含まれる
some: それらの間。

例えば３つのメタがあると、
not: 0
all: 3
some: 1, 2


この例では座標の値 lat, lng　があります。

`none`は座標が一切設定されていない投稿を、
`all`は両方設定されている投稿、
`some`は片方だけ設定されている投稿を
それぞれ「OR」の条件で取得します。

## その他

インスペクターから「隠しブロックへ移動」ボタンを押すことで移動できます。


![wp-string-query-form-inspector.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/fdb450a6-b874-b5b4-cd2e-a11d6027fa26.png)


結果ビューのボーダーの色や高さを変更できます


![wp-setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/acf5a0c8-d8e3-cc85-e647-7e83d1eb4d17.png)


## 開発中で使用非推奨なもの

開発中の機能は無効になってます。
以下のボタンをクリックするとその機能が使えます。


![wp-dev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/28c3da34-36d8-257a-53a8-40954f93a2b2.png)


アイコンの意味は、

ページや編集ページへのリンクへ移動、または編集や削除ができます。


![wp-dev-icons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/cfcd3c62-0c88-1ccd-b278-35db67164e70.png)


こちらもJSONスキーマを解析することで編集フォームを自動的に作成してます。

プラスのアイコンを押すと投稿(Entity)の「新規追加」ができます。


![wp-edit-add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/f5ec0a03-663d-654d-71cb-63ef17737b95.png)


ペンのアイコンを押すと投稿(Entity)の「更新」ができます。


![wp-edit-update.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/c3575fa4-cac7-0704-dfa1-9f6b10661e77.png)


これらは開発中なので動作は不安定です。