前回は、WordPress の REST API を実行して取得できるデータについてご紹介しました。
今回は、実際にREST APIで実行して取得したデータをhtmlに表示してみようと思います。
REST APIをたたくのに今回はnode.jsを使用したいと考えているのでその制御する仕方についてご紹介いたします。
はじめに、環境を用意しないといけません。
私は下記のサイトを参考にして作成しました。大変助かりました。
準備編
作成編
「作成編」でも説明はされていますがnode.jsについて簡単に説明します。
入口はapp.jsとなります。app.js内にsamples.jsを追加することによって動作が確認できることになります。
それでは作成したsamples.jsを使用してWord PressのREST APIを実行する部分を作成していきます。
var express = require('express'); var router = express.Router(); let http = require('http'); const URL = 'http://<あなたのサイトのドメイン>/<マルチサイトのディレクトリ名>/wp-json/wp/v2/posts'; router.get('/', function(req, res, next) { http.get(URL, (res2) => { let body = ''; res2.setEncoding('utf8'); res2.on('data', (chunk) => { body += chunk; }); res2.on('end', (res3) => { var param = body; res.header('Content-Type', 'application/json; charset=utf-8') res.send(param); }); }).on('error', (e) => { console.log(e.message); //エラー時 }); }); module.exports = router;
jsができましたら、実際に起動して確認してみましょう。
下記のようなJSONデータが作成されたと思います。
簡単にJavaScriptからREST API実行のコードかけることがわかります。
また、JSONでパースしているので例えば、URLを取得したい場合
res.send(param[0]["_links"]["self"][0]["href"]);
と記載すればURLも取得することが可能になります。
今回はposts部分のみの記載でしたがほかのREST APIでも同様な書き方で簡単に実装できます。
node.js自体、まだまだ始めたばかりなので勉強しつつ、
また記事でなにか紹介できたらなと思います。
最後までお読みいただきありがとうございます。
弊社では全国各地の請負い(ご自宅)で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。