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

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

電話番号 078-333-9333

に関する画像

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

に関するタイトル画像

線画像

2017.07.10

BLOG

Rest-APIを試そう【続編】

この記事をシェアする

前回WordPress rest-APIを使ってスクロールページャーとカテゴリーの複数検索を実装してみました(簡易的でしたが・・・)しかし、実際検索をする時ってフリーワード検索が多いと負いもいます。

そこで、今回はちょっとgoogleのように検索した文言を入れるとその下に該当する記事のタイトルを出力するというものを作ってみたいと思います。

 

参考にしたコード

・テキストを入力したり、変更したときに何かを起こすコード

 http://www.kaasan.info/archives/1676

 

・RestAPIの基本コード

 https://www.sofplant.com/blog/tech/wp-rest-api-tips/

 

以上を参考にして作っていきます。

 

作成手順

1.テキストの入力・変更時に入力したテキストを取得

「テキストを入力・変更」に対して、毎度テキストの内容を保存する。その保存したものを今後使用していく。

2.保存したテキストの内容を元に、検索をする。

検索については、「WordPressのURL/wp-json/wp/v2/posts?_embed&search=検索する文言」で検索が可能。検索して該当する記事の情報を取得することができます。

3.一度データを削除する。

今回JSでは「リストを追加する」というものを使っているため、以前に検索したものを削除しなければなりません。そこで「$(“該当のID名”).empty();」として、データを削除していきます。

4.検索結果の情報を取得して、タイトルだけを記述していく。

Jsonで書かれる情報はたくさんあるので(function.phpというところでコードを記入すると不要なデータを削除したりできるらしい)、必要な情報だけを抜き取り記載するようにする。今回はタイトルとリンク先だけが必要なので「”<li><a href='”+ item.link + “‘>” + item.title.rendered + “</a></li>”」としてみました。

 

これで、作成が完了です。

 

実際のデモ画面とコード

作成したデモはこちら

https://web-pack.jp/demo/category_cheack_box/yosokuhenkan.php

 

実際のコードはこちら

 

ちょっととっつきにくいものが多いですが、なれると意外と楽に色々なことができるのでおすすめです。

edited by:afiru

トップに戻る