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

      2021/12/08   1854文字

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

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

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

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

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は超軽量ですが、こういう点では少し面倒なところがあったのは発見でした。

あとがき・まとめ

  • W3.JSでは、w3.displayObjectでオブジェクト内容をhtmlに表示できる
  • ファイル取得にはphp
  • オブジェクトが入れ子になっているときは、ちょっと工夫が必要

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - javascript/jQuery、その他
【タグ】 - ,

  関連記事