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

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

電話番号 078-333-9333

に関する画像

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

に関するタイトル画像

線画像

2017.07.05

BLOG

Rest APIを試そう

この記事をシェアする

WordPress4.7から取り入れられたWP-Rest-API・・・

どうでしょう・・・皆さんつかっていますか?

 

と言っている私も最近使い始めたばかりです・・・

ここではちょっと案件の中で試してみたコードと作成についての方法をご紹介していこうと思います。

 

まず、したいことの整理

・カテゴリーの複数検索

・複数選択カテゴリーの検索結果表示

・複数カテゴリーのページャー作成

 

 

カテゴリーの複数検索

WordPressの仕様の確認

カテゴリーの複数検索について、WordPressのカテゴリー名やカテゴリーのスラッグという英数字のコード(カテゴリーの編集画面で入力できるもの)をURLとして使っている場合、これ・・・複数として使用する場合どうやってすれば・・・と思うかもしれません。

しかし、「?cat=」として、カテゴリーの番号(編集画面でURLにtagID=○)となっている部分の数字をカンマ区切りで送れば複数(or検索)ができるようになるのです。これで、Aというカテゴリーまたは、Bというカテゴリーというものを表示することができるようになります。

 

フォームの実装

フォームとしてチェックボックスでカテゴリーを複数チェックできるようにするとどうしても「配列」というちょっと複雑なものになってしまうのです・・・そこで、javascriptを使用してチェックボックスをカンマ区切りで文字として処理をするようにします。それが、下のコードです。

https://gist.github.com/afiru/29023009574ffd08c5657486d7b63b9f

 

 

 

複数選択カテゴリーの検索結果表示

Rest-APIを使う

「何を検索するのか?」を先程作りました。では、次は実際にそれをもとに検索をしていきます。検索ではWordPressが用意してくれているcategory.phpを使うことが一般的ですが、これだとページを移動してまた同じようなテンプレートファイルに基づく設定ファイルを読み込まなければなりません。そこで、今回ご紹介するのが先程触れた「WordPress Rest-API」です。これは、URLとしてデータを送るとjsonという文字列で情報を取得することができます。そして、この取得はURLがわかっていれば他サイトからも情報を得ることができます。さて、その実装方法なのですが、今回は一部として下記のURLを作ってみました。

“<?php home_url(‘/’); ?>wp-json/wp/v2/posts?_embed&categories=”+ categories;

今回は、先程作ったjavascriptでカンマ区切りとしてカテゴリーの番号を保存している「categories」を使って送っています。ですので、チェックボックスが入るたびにこのcategoriesが変化していきます。

Rest-APIを実装する

先程のURLが完成するとあとは、これを決まりきった文言に投げ、整形をしていけば出力ができるようになります。少しサンプルとして下記のコードをご紹介します。

https://gist.github.com/afiru/c46c211c57169473fab5b0616558870b

このカスタマイズについては、また後日お話しましょう。

 

以上で検索と表示ができるようになりました。最後は、ページャーを作りましょう。

 

 

複数カテゴリーのページャー作成

スクロールの判定

データは抽出されているのですが、この状態だと10件しか表示されていません。そこで、今回はサンプルとして画面下までスクロールしたら、次の10件が表示されるというものを作ってみたいと思います。スクロールしたかどうかは下記のコードでできるかと思います。

https://gist.github.com/afiru/657df2b421f741745799d84461c2dd43

 

ページャーの作成

WordPressのRestAPIの特性上、URLにpage=○と番号を○部分に入れていくことでページの移動ができるようになります。これと先程「スクロールしたら○○をする」というコードを組み合わせて「スクロールするとpageのカウントを+1増やす」という形にしていきます。そうすることで、スクロールした際に新しいページが表示されるようになるようです。

 

 

まとめ

以上長々となりましたが、少しデモとサンプルコードをご紹介します。

デモ版はこちら

 

サンプルコードはこちら

 

色々と使えるWordPress RestAPI あなたも使ってみてはいかがでしょうか。

edited by:afiru

トップに戻る