WordPressの新着記事をJSON形式で取得しサイトで表示する方法

サイトの下部に、ブログの新着記事を設置した。
やり方は簡単。

jQuaryを読み込んだら下記を読み込ませるだけ。

上から説明していくと、
まず
https://www.g-u-k.jp/take_log/wp-json/wp/v2/posts?per_page=9&_embed
にアクセスし、JSONを取得してくる。

パラメータの?per_page=9&_embedの部分は
per_pageが記事数
_embedが画像などの埋め込んだ情報も取得する
というオプション。

$.getJSON( “https://www.g-u-k.jp/take_log/wp-json/wp/v2/posts?per_page=9&_embed”, function(results)
で、取得したJSONの中身をresultに入れる。という意味。

しかし、これで取得したJSON情報はそれだけだとわかりにくいため、記事ごとに整形していく。

$.eachは配列やオブジェクトに対する繰り返しを行う。

$.each(results, function(i, item)
というのは、resultの中身から、0から順番に、i個目のitem（記事の内容）の中を取得するという意味。

var date_data = new Date(item.date);
などで、わかりやすいようにそれぞれのitem内の.dateを一旦date_dataに格納。

var title = item.title.rendered;
であれば、i個目のitem（記事内容の）タイトルをtitleに格納。

こうやってほしいデータitemの中から格納していき、

最後に

という部分でHTMLに吐き出す。

おまけの

は、HTML表示時の調整用。

上の場合、9つの記事を取得しているので、0からはじまり、8で終わるため
iが8になった場合、clear:both;を追加している。

これでサイトの一番下を見ると、
記事が追加されている。

PHPでもできるが、ファイルがindex.htmlだったので、jQuaryバージョンで。