【javascriptライブラリW3.JS ＆ PHP】WordPress・REST-APIの記事データを取ってきて、別のページで表示する方法

今回は、既に何回か使っている超軽量ライブラリ『W3.JS』を使って、『WordPress・REST-APIから記事データを取ってきて、別サイトで表示』というのをやってみたいと思います。APIから取ってくるやつは、お仕事・プライベートでいくつかやりましたが、W3.JSでの記事表示は初めてです。さっそく内容を見てみましょう。

やってみた経緯→以前はvue.jsでやったけど、超軽いライブラリで試したかっただけ（笑）

以前はvue.jsでやったんですが、W3.JSのドキュメントを読んでいくと、似たような機能があることが確認できました。実際、w3.jsは11.5 KBと超軽いので、『これで作れたら高速化できそう』みたいな好奇心がわきます。 （結論から言うと、REST-APIにつかうにはvueのほうが良かった笑）

以下、当サイトの過去記事と、w3.js公式のドキュメントです。

（当サイト過去記事）【WordPress・REST-API＆vue.js】静的htmlファイル上で記事json取得し表示する方法
https://division-web.atelier-ss-agency.com/9150/wp-rest-api-with-vue-js-fetching-json/

W3.JS Display HTML Data（W3.JS公式）
https://www.w3schools.com/w3js/w3js_display.asp

javascriptライブラリW3.JS ＆ PHPで、WordPress・REST-APIの記事データを取ってきて、別のページで表示する方法

表示プログラム(html/js/php)＆解説

PHPで使うのは『file_get_contents（ファイル取得）』と『json_encode(エンコードしないと見れない)』です。vue&htmlのときはaxiosで行いましたが、PHPを使うとラクです。 今回も管理人のサイトSSFを利用し、記事単体のデータ（ドメイン/wp-json/wp/v2/posts/投稿id?_embed）を取りました。

ただし、そのままスクリプト内に展開しても表示しないので、javascriptの『JSON.parse』で、javascriptのオブジェクトにします。あとは、w3のファンクション『w3.displayObject』で、表示させたい要素id（ここではdiv id=”001a”）と、オブジェクトを指定します。

表示するときは{{id}}のように、2重波括弧で取りたい項目を囲みます。vueとかでも使ったかも。

表示例

表示はこのように。単純に文字列だけ表示する感じのもの（id/slug/date/linkなど）は、取ってきて表示ができます（別サイトはxammpでローカルです）。とはいえ、一部問題も。

問題点＆対策

この書き方だと、『タイトル』や『本文』は、『オブジェクトです』というようなエラーが返ってきます。特定のキーで値を取れるとよさそうです。

対処法としては 『オブジェクト展開や特定キーアクセス（javascript object 特定のキーで検索・こんどやるかも）』 『vueにする・v-htmlディレクティブで　postall.data.content.renderedみたいにアクセス』 『PHPでやる（$title = $arr[“title”][“rendered”];　みたいに）』 というところでしょうか。

w3.jsは超軽量ですが、こういう点では少し面倒なところがあったのは発見でした。

あとがき・まとめ

まとめると、こういったところでしょうか。『APIから記事データを取ってくる系はvueやPHP』『html要素操作などはw3.js』のように使い分けてもよさそうです。