1. TOP
  2. Webサービス
  3. WP REST APIの簡単な使い方〜 WordPressのエンドポイントからブログサイトの検索結果を表示する

WP REST APIの簡単な使い方〜 WordPressのエンドポイントからブログサイトの検索結果を表示する

thumbnail

自分の視界にもようやくWP REST APIが視界に入ってきたので、どんなことができるかごく簡単に試してみました。

index.phpとstyle.cssだけを用意

今回はWP REST APIを試すだけです。WordPressのテーマを構成するために最低限必要なファイル(index.phpとstyle.css)が入ったディレクトリをローカル開発環境に用意します(WP REST APIプラグインのインストールと有効化もお願いします)。

何のコードも書かれていないindex.phpとstyle.cssローカル開発環境のアドレスにアクセスすると、画面は真っ白な状態で表示されます。そこにWP REST APIの機能を使って当ブログの検索結果を表示させてみましょう。

なお表示させるためのコードは、ソフプラントさんのコードを参考にして、GitHubにアップしています。

APIを呼び出すスクリプトコードのポイント

htmlタグなども記述していますが、WP REST APIを使うときの最もポイントとなるのが、Ajax通信を行う$.getJSON()メソッドの使い方です。

$.getJSON( "https://e-yota.com/wp-json/wp/v2/posts?search=高橋一生", function(results) {
   ...     
});

jQueryオブジェクトの.getJSON()メソッド

jQueryオブジェクトの.getJSON()メソッドは、HTTP(GET)通信でJSON形式のデータを読み込みます。第一引数は読み込むページのURLを、第二引数は通信成功時のコールバック関数を取ります。なお、”$(ダラーマーク)は”jQuery”というオブジェクトの省略記号です。

.getJSON()メソッドの第一引数

第一引数は読み込むページのURLを取りますが、今回の場合、各WordPressサイトのエンドポイントのURLを取ります。例えばエコテキブログのエンドポイントは、下記のURLとなります。

https://e-yota.com/wp-json/wp/v2/posts

wordpress_how_to_wp-rest-api_1

直接アクセスするとJSON形式でエコテキブログのデータが表示されます。

https://ja.wordpress.org/wp-json/wp/v2/posts

wordpress_how_to_wp-rest-api_2

ちなみに日本語版WordPress.orgにアクセスすると、やはりJSON形式のデータが表示されます。

今回はsearchクエリを使って、エコテキブログから”高橋一生(さん)”に関する記事があるかどうか確認して、そのタイトルを表示させます。

.getJSON()メソッドの第二引数

第二引数は通信成功時のコールバック関数で返される結果を取ります。つまり”高橋一生(さん)”に関する記事があれば、コールバック関数の内容に従ってデータを表示するという意味です。

今回の場合は、”高橋一生(さん)”に関する記事があれば、その記事のタイトルに全てliタグをつけて表示するという内容です。

実行結果(2017年10月27日現在)

wordpress_how_to_wp-rest-api_3

コードを実行すると高橋一生さんに関する2件の記事が表示されます。

wordpress_how_to_wp-rest-api_4

WP REST APIの妥当性を確認するために当ブログのサイドバーにある、検索ボックスで”高橋一生(さん)”で検索すると、やはり2件の記事が表示されます。以上、WP REST APIの使い方に関するごく初歩的な説明記事でした。

【参考サイト】