WordPress(ワードプレス)の新着記事をJSON形式で取得しサイトで表示する方法

2019.10.18

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バージョンで。



このエントリーをはてなブックマークに追加
ツイート


人気記事





「仕事」カテゴリの他の記事




« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント( まだありません )

コメント募集中