ウェブパ[web制作・ホームページ制作]

Rest-APIを試そう【続編】|ウェブパは神戸・大阪をはじめ全国対応のWebサイト(ホームページ)制作パックプランです。

電話番号 078-333-9333

に関する画像

線画像
トップ > インフォメーション > BLOG > Rest-APIを試そう【続編】

に関するタイトル画像

線画像

2017.07.13

BLOG

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のみ)

edited by:afiru

トップに戻る