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

投稿日:2017年11月10日 | 更新日:2017年12月2日

自分の視界にもようやく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(新しいタブで開く)にアップしています。

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

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

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

第一引数は読み込むページの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クエリを使って、エコテキブログから”高橋一生（さん）”に関する記事があるかどうか確認して、そのタイトルを表示させます。

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

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

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

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

【参考サイト】