WordPressには「REST API」という、JSON形式のデータを他のアプリに供給できる機能があるのはご存知でしょうか。
個人的には、興味はあったものの実際には触ったことはなかったので、今回少しだけ触ってみました。
目次
サンプルコード・デモ
SPCブログの記事を10件呼び出してみます。HTML,CSS,JSのみの構成で、JSはJQuery以外のライブラリは一切使用しません。
中核であるJSのコードを掲載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
restJSON = $.getJSON( "【WordPressのサイトURL】/wp-json/wp/v2/posts?_embed", function(results) {//パラメータに_embedを入れることでアイキャッチ情報が取れる $('#rest-loading').addClass('active'); $.each(results, function(i, item) { eyecatch = item._embedded['wp:featuredmedia'][0]; restPost = '<li class="js-modal rest-base anime fade-in active wave' + restCount + '">'; if(eyecatch.media_details.sizes['news-img'] !== undefined){//アイキャッチ画像の有無に差異があるので処理する restPost = restPost + '<div class="rest-img" style="background-image:url(' + eyecatch.media_details.sizes['news-img'].source_url + ')"></div>'; }else if(eyecatch.media_details.sizes['full'] !== undefined){ restPost = restPost + '<div class="rest-img" style="background-image:url(' + eyecatch.media_details.sizes['full'].source_url + ')"></div>'; }else{ restPost = restPost + '<div class="rest-img" style="background-image:url()"></div>'; } restPost = restPost + '<div class="in">' + '<p class="list-cat cat-' + item._embedded['wp:term'][0][0].slug + '">' + item._embedded['wp:term'][0][0].name + '</p>' + '<p class="list-title">' + item.title.rendered + '</p>' + '<p class="list-date">' + item.date + '</p>' + '<p class="list-name">' + item._embedded.author[0].name + '</p>' + '<article class="list-main modal-bg"><i class="modal-close fa fa-close" aria-hidden="true"></i><div class="modal-content">' + '<a class="bebas" href="' + item.link + '" target="_blank">' + item.link + '</a>' + '<div class="wp-post t-blue">' + item.content.rendered + '</div>' + '</div></article>' + '</div></li>' ; $('#wp-rest').append(restPost); }); }); |
デモページ
「【WordPressのサイトURL】/wp-json/wp/v2/posts」
このURL形式より、基本的な投稿のデータをJSON形式で取得できます。追加で「?_embed」のパラメータを入れることで、アイキャッチなどより詳細なデータを追加で受け取れます。
後に長々と続くコードは、受け取ったデータをひたすらHTMLに整形して出力しているのみです。単に出力するだけなら、JSONの扱い以外の特殊な知識はほぼ不要でした。
タイトル、投稿日時、カテゴリー、投稿者、アイキャッチ、そして本文と、記事の表示に必要なデータがしっかり持ってこれていることがわかります。
また、フルレスポンシブなど本来のSPCブログとは大きく異なる表示で実装されており、自由度の高さも伺えるかと思います。
JSで呼び出すことが何に使えるのか
別サイトで運用しているWordPress記事を低負荷で呼び出す
PHPで呼び出す場合、データを取りに行く時間がそのままサーバー応答速度に加算され、1秒2秒という規模でページ表示が遅れてしまいますし、取得先のサイトがダウンしている場合などはエラーで止まってしまうリスクもあります。
JSのAjaxを利用して取得させることで、他のコンテンツ表示を妨げるなく呼び出しができます。
他のシステム上でWordPress記事を簡単に呼び出す
WordPressをモジュール的なスケールで扱う事ができます。仮にWordPressと未知のCMSを合体させるような必要性が出ても、JSONを共通的に扱える手段さえあれば、かなり安定性の高い形で合体ができてしまいます。
ざっと触れた感触ではこのようなメリットを感じました。また、呼び出すだけでなく書き込みなど、様々な操作に対応しているようなので、実態はもっと強力な代物だと思います。
WordPressに触れている限り、必ず活躍の機会は訪れると思うので、より高度な用法やセキュリティリスクなど、詳細に理解していきたいAPIですね。
