Rest-APIを試そう【続編】
この記事をシェアする
WordPress rest-APIを使ってスクロールページャーとカテゴリーの複数検索や、検索時に該当記事の検索を行う方法などをご紹介してきましたが、今回は、階層があるカテゴリーのときに使えそうなものを作ってみました。
参考にしたコード
・RestAPIの基本コード
https://www.sofplant.com/blog/tech/wp-rest-api-tips/
以上を参考にして作っていきます。
作成手順
ページを読み込んだ際に親カテゴリーを抽出
ページが読み込まれた際に、rest-apiにカテゴリーの0番を基準として（?parent=0）出力するようにします。そうすることで、親カテゴリーだけを取得することができます。出力をする際に<li data-parent=親カテゴリーのID名>とすることで、あとでそのIDを取得することができます。
2.親カテゴリーがセットされたら子カテゴリーの準備をする
「$(document).on(‘click’,～～)function()」を利用して、親カテゴリーが準備できれば子カテゴリーを読み込ませるようにしていきます。親カテゴリーのliをクリックした際に、data-parent=親カテゴリーのID名で指定したID名を取得し、子カテゴリーをrest-apiに投げて子カテゴリーのリストを取得します。
3.子カテゴリーのリストがセットできれば、子カテゴリーに関する記事を出力
2と同じ要領で、子カテゴリが取得し、liとして出力されたことが前提として、3を実行していきます。再度rest-apiに子カテゴリーのidを投げて、それに基づく記事一覧を取得して画面に出力していきます。
これで、作成が完了です。
実際のデモ画面とコード
作成したデモはこちら
https://web-pack.jp/demo/tab_chenge_list/
実際のコードはこちら（JavaScriptのみ）
https://gist.github.com/afiru/85e13c91dda435224a4789150fe32514
