WP REST API v2 WordPressの新着記事をアイキャッチ画像付きで取得する方法

2016-05-29 WordPress

当サイトの過去記事WordPressの新着記事をJSON形式で取得し外部サイトで表示する方法のWP REST API v2バージョンです。JSONデータ取得、表示はPHPにて行います。

執筆時点(2016/05/29)でREST API v2はまだベータ版です。今後も変更される可能性があるのでご注意ください。現時点では最新のREST APIはプラグインで提供されています。WordPress本体にはVer4.7にてマージされるとのことです。

確認環境

WordPress Ver4.5.2
WP REST API Ver 2.0-beta13.1

プラグインのインストール

WP REST API v2を公式サイトからダウンロードしてインストールします。管理画面のプラグイン検索だと、大量に別のものが出てくるのでダウンロードしてアップロードしたほうが早いです。

インストールできたら有効化してください。

動作確認

お持ちのWordPressサイトのトップページURLに/wp-json/と付けてアクセスしてみてください。JSONデータが表示されれば正常に動作しています。

表示されない場合、プラグインが有効化されているか確認してください。その後、管理画面のパーマリンク設定を開き、何も変えずに「変更を保存」ボタンで更新してみてください。

当サイトの場合、https://webtatan.com/blog/wp-json/にて表示されます。

JSONデータ取得方法

PHPでJSONデータを取得するためのソースです。

//該当WordPressのURLを指定（新着記事5件取得）
$url = 'https://webtatan.com/blog/wp-json/wp/v2/posts?_embed&filter[posts_per_page]=5';
//ファイルの内容の読み込み
$json = file_get_contents($url);
//連想配列にする
$arr_json = json_decode($json,true);

//該当WordPressのURLを指定（新着記事5件取得）

$url = 'https://webtatan.com/blog/wp-json/wp/v2/posts?_embed&filter[posts_per_page]=5';

//ファイルの内容の読み込み

$json = file_get_contents($url);

//連想配列にする

$arr_json = json_decode($json,true);

https://webtatan.com/blog/wp-json/wp/v2/は固定で、posts?_embed&filter[posts_per_page]=5が取得したい内容によって変わる場所です。

取得したJSONデータを表示する方法

こちらもPHPです。$arr_jsonにJSONデータが格納されています。

foreach ($arr_json as $json) {
    $arrLink += array($json["link"] => array(
        'title' => $json["title"]["rendered"],
        'excerpt' => mb_substr($json["excerpt"]["rendered"],0,90,'UTF-8'),
        'thumb' => $json["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"];)
      );
}

foreach ($arr_json as $json) {

$arrLink += array($json["link"] => array(

'title' => $json["title"]["rendered"],

'excerpt' => mb_substr($json["excerpt"]["rendered"],0,90,'UTF-8'),

'thumb' => $json["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"];)

);

}

記事URL、タイトル、本文抜粋、アイキャッチ画像を表示する処理の一部です。表示したい情報をJSON[“キー名”]で指定します。表示したい情報とJSON[“キー名”]の対応を見ていきます。

記事のURL：$json[“link”]
タイトル：$json[“title”][“rendered”]
本文抜粋：$json[“excerpt”][“rendered”]
アイキャッチ画像：$json[“_embedded”][“wp:featuredmedia”][0][“media_details”][“sizes”][“full”][“source_url”]

アイキャッチ画像の[“full”]はフルサイズです。他にも

thumbnail
medium
medium_large
post-thumbnail

が指定できます。必要なサイズを指定してください。

表示したい箇所で格納した配列の中身をechoしてください。

WP REST API v1との変更点

元々の記事ではプラグインVer1を使ってましたが、今回Ver2にしたことでいくつか変更点がありましたので記載します。

JSON取得URL

//Ver1
'https://webtatan.com/blog/wp-json/posts?filter[posts_per_page]=5'
//Ver2
'https://webtatan.com/blog/wp-json/wp/v2/posts?_embed&filter[posts_per_page]=5'

//Ver1

'https://webtatan.com/blog/wp-json/posts?filter[posts_per_page]=5'

//Ver2

'https://webtatan.com/blog/wp-json/wp/v2/posts?_embed&filter[posts_per_page]=5'

Ver2では_embedを付けないと、アイキャッチ画像が取得できません。

JSON[“キー名”]

//Ver1
$json["title"]    //タイトル
$json["excerpt"]  //記事抜粋
$json["featured_image"]["guid"] //アイキャッチ

//Ver2
$json["title"]["rendered"]
$json["excerpt"]["rendered"]
$json["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"]