WordPress REST API HTML+jQueryで表示

REST API MEMO

状態を作れない

例えば、rest-example.htmlというファイルを作成して、ajaxで、以下にアクセスすると、

http://tenman.info/labo/snip/wp-json/wp/v2/posts?page=1

このようにアクセスすると、投稿一覧の1ページ目が取得できます。2ページ目もpage=2にすれば、無事にアクセスできますが、ブラウザのURL欄は、rest-example.htmlのままになります。

WEB上に公開しないなら、OKなんですが、1ページ目も2ページ目も同じURLになるなら、WEBは、URL毎に検索結果を表示するので問題になりそうです。PHPでは、リクエストURLのクエリ―を含めると、複数ページに、それぞれのURLを作ることが出来ますが、HTMLでURLに対応する表示を実現したい時にどんな方法があるのだろうか?

ページングするのに総ページ数が取れない

レスポンスしてくるjsonには、総ページ数や、一ページ当たりの投稿数が含まれていません。これらの値は、レスポンスヘッダーの中に含まれているので、PHPを使わないでレスポンスヘッダーを受け取る方法を見つけなければならない。

ドメインの制約

コンテンツは、RESTで取得できますが、そのコンテンツをうまく表示するためのjsファイルなどは、htmlのヘッダーに、元サイトのスクリプトのリンクを貼っても、ドメインが異なる場合は、エラーが発生する。

スタイルシートに関しても、最近は、WEBフォントを使っていたりして、.woffだとかいろいろのファイルで、ドメインの制約の可能性があります。

テーマやプラグインとの関係

コンテンツは、RESTで取得できますが、WordPressは、テーマの諸設定や、プラグインの機能がコラボして表示を行うので、投稿のデータが取得できるだけは、満足のいく表現が出来ない場合が少なくない。

個別投稿のjsonは、標準で出力される情報が限られる

カスタムフィールドや、アイキャッチ画像、前後リンクなんかはリクエストに含まれないので、自力で、jsonに追加する必要がある。

とりあえず作る

たった1枚のhtmlで、投稿 固定ページ 一覧を表示

可能性のありそうな方法

状態を作るには、history.pushState が使えそう。URLを自由に書き換えることが出来そうですが、ページをリロードしたような場合でも、表示すべきコンテンツが正しく表示されるような工夫は必要そうです。

レスポンスヘッダーを取得するには、xhr.getResponseHeader( ‘X-WP-TotalPages’ )といった形で取得できる模様

クロスオリジン対策は、ajax – Access-Control-Allow-Origin error sending a jQuery Post to Google API’s – Stack Overflowみたいなことで、可能らしい(まだ、実際にはテストをしていない)

RESTを使ったテーマ

Foxhound — Free WordPress Themes

[emulsion_relate_posts]