自分の視界にもようやく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()メソッドの使い方です。
[php]
$.getJSON( "https://e-yota.com/wp-json/wp/v2/posts?search=高橋一生", function(results) {
…
});
[/php]
jQueryオブジェクトの.getJSON（）メソッド
jQueryオブジェクトの.getJSON（）メソッドは、HTTP(GET)通信でJSON形式のデータを読み込みます。第一引数は読み込むページのURLを、第二引数は通信成功時のコールバック関数を取ります。なお、”$(ダラーマーク)は”jQuery”というオブジェクトの省略記号です。
.getJSON（）メソッドの第一引数
第一引数は読み込むページのURLを取りますが、今回の場合、各WordPressサイトのエンドポイントのURLを取ります。例えばエコテキブログのエンドポイントは、下記のURLとなります。
https://e-yota.com/wp-json/wp/v2/posts
直接アクセスするとJSON形式でエコテキブログのデータが表示されます。
https://ja.wordpress.org/wp-json/wp/v2/posts
ちなみに日本語版WordPress.orgにアクセスすると、やはりJSON形式のデータが表示されます。
今回はsearchクエリを使って、エコテキブログから”高橋一生（さん）”に関する記事があるかどうか確認して、そのタイトルを表示させます。
.getJSON（）メソッドの第二引数
第二引数は通信成功時のコールバック関数で返される結果を取ります。つまり”高橋一生（さん）”に関する記事があれば、コールバック関数の内容に従ってデータを表示するという意味です。
今回の場合は、”高橋一生（さん）”に関する記事があれば、その記事のタイトルに全てliタグをつけて表示するという内容です。
実行結果（2017年10月27日現在）
コードを実行すると高橋一生さんに関する2件の記事が表示されます。
WP REST APIの妥当性を確認するために当ブログのサイドバーにある、検索ボックスで”高橋一生（さん）”で検索すると、やはり2件の記事が表示されます。以上、WP REST APIの使い方に関するごく初歩的な説明記事でした。
【参考サイト】
