WP REST APIでの記事の取得と表示[PHP版 / JS版]

2017/11/22

WEB DEV

#WordPress

WordPress 4.7から正式に導入されたWP REST API。
今回はこのWP REST APIで投稿記事の取得と表示をまとめてみた。

WP REST APIを使った投稿記事の取得

http://sample.net/wp-json/wp/v2/posts

http://sample.netを取得したい記事のドメインに変えてアクセスしたらJSON形式でデータが取れる。

こんな感じになったらOK。これで取得は完了。

激楽。

後ろのパラメータを変えるといろいろ取れるのでちょっと載っけておく。

特定の記事だけ取得

http://sample.net/wp-json/wp/v2/posts/記事ID

記事5件取得

http://sample.net/wp-json/wp/v2/post?per_page=5

アイキャッチ付きJSON取得

http://sample.net/wp-json/wp/v2/post?_embed

アイキャッチ付きJSONを5件取得

http://sample.net/wp-json/wp/v2/post?per_page=5&_embed

とまぁこんな感じで取得ができます。
アイキャッチはデフォルトでは取得できないので_embedを後ろにパラメータとして持たせてあげてください。これでアイキャッチも取れるようになります。

では次は表示。PHPバージョンとJavaScriptバージョン両方書いたので好きな方使っておくんなせ。

PHPバージョン

php

<?php
  $url = "http://sample.net/wp-json/wp/v2/posts?_embed";
  $json = file_get_contents($url);
  $arr = json_decode($json,true);
?>
<ul>
  foreach ($arr as $data):
    $title = $data["title"]["rendered"];
    $date = date('Y年n月j日', strtotime($data["date"]));
    $link = $data["link"];
    $thum = $data["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["medium"]["source_url"];
?>
  <li>
    <img src="<?php echo $thum; ?>">
    <p><?php echo $date; ?></p>
    <a href="<?php echo $link; ?>"><?php echo $title; ?></a>
  </li>
  <?php endforeach; ?>
</ul>

JavaScriptバージョン

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WP REST API</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $.getJSON( "http://sample.net/wp-json/wp/v2/posts?_embed", function(results) {
      $.each(results, function(i, item) {
        var date_data = new Date(item.date);
        var year = date_data.getFullYear();
        var month = date_data.getMonth() + 1;
        var day = date_data.getDate();

        var title = item.title.rendered;
        var link = item.link;
        var date = year + '年' + month + '月' + day + '日';
        var thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.medium.source_url
        $('.wp-post').append("<li><img src='" + thum + "'><p>" + date + "</p><a href='" + link + "'><p>" + title + "</p></li>");
      });
    });
  </script>
</head>
<body>
  <ul class="wp-post"></ul>
</body>
</html>

まとめ

WP REST API、思ったより簡単に取得できましたよね。WP REST APIは投稿もできるのでいろんな使い方ができそう。

WP REST APIを使った投稿記事の取得

PHPバージョン

JavaScriptバージョン

まとめ

お問い合わせ・ご相談CONTACT