REST APIを使って他のサイトの投稿などをアイキャッチ画像付きで表示するショートコードを作る方法

REST APIを使って他のサイトから単一の投稿のデータを取得し、アイキャッチ画像付きでカード表示させるショートコードの作り方を紹介します。

頑張ってカスタマイズしたのにこんなのしかできないの？とならないよう、まずは以下が今回のカスタマイズで出力できたリンクカードの表示サンプルです（本サイトでこの機能を使っていない可能性を考慮して、画像で表示しています）。

こんな感じのものでよければ、本ページを参考に取り組んでみてください。

なお、本ページは、REST APIを使ってデータの取得を行う方法と、アイキャッチ画像なしで情報表示を行うショートコードの作り方の応用として、公開しており、アイキャッチ画像のデータを取得する方法とそれを踏まえたリンクカードショートコードの作り方を紹介しています。

従って以下のページの内容がお分かりでないと、何をしているのかがほぼ分からないと思いますので、必ず参照ください。

REST APIを使って単一の投稿からデータを引き出して表示する方法

アイキャッチ画像のデータを取得する流れ

上記リンク先ページで、単一の投稿データを取得してみると分かる通り、アイキャッチ画像そのもののデータは単一投稿のデータには存在せず、その投稿に設定されているアイキャッチ画像のIDだけが取得できるようになっています。

従って、以下のようにしてアイキャッチ画像のデータは取得する必要があります。

1. 投稿のデータを取得する
2. 1の中にあるアイキャッチ画像のIDを取得する
3. 画像用のAPIを叩いて、2のIDに合致する画像データを取得する
4. 3の中から必要な情報を取得して表示させる

何段階も経てアイキャッチ画像のデータは取得できるため、投稿データと同様に、画像用の全データの取得ができるかを確認した上で、最終的にアイキャッチ画像付きのリンクカード表示までを行いたいと思います。

冒頭で紹介している投稿データの取得についてのページの内容を理解されていることを前提にしていますので、細かい説明は省いています

単一の投稿に紐づくアイキャッチ画像の全データを取得してみる

投稿データの中にあるアイキャッチ画像のIDを基に、画像用のAPIを叩いてデータを取得するという2段階のことをする必要があります。

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

/*** 投稿に紐づくアイキャッチ画像のデータを取得して表示 ***/
function pwcn_rest_api_featured_image_shortcode(){
	$home_url = 'ここにトップページのURL';//末尾の「/」は入れない
	$post_type = 'posts';//投稿は「posts」
	$slug = 'スラグ';//前後の「/」は入れない

	//URLの中に含まれがちな「/」を削除する
	$slug = ltrim($slug, '/');//左の「/」を削除
	$home_url = rtrim($home_url, '/');//右の「/」を削除

/* アイキャッチ画像のIDを取得 */
if (ctype_digit($slug)) {//スラグが数字だけの場合
	$post_url = $home_url . '/wp-json/wp/v2/' . $post_type . '/' . $slug;

	//jsonデータを取得
		$response = wp_remote_get($post_url); // wp_remote_getを使用
		$body = wp_remote_retrieve_body($response); // 本文を取得
		$data = json_decode($body, true); // JSONデータをデコード

	// アイキャッチ画像のIDを取得
		if (isset($data['featured_media'])) {
			$image_id = $data['featured_media'];
		} else {
			$image_id =  '画像が見つかりませんでした。';
		}

} else {//スラグが数字だけでない場合
	$post_url = $home_url . '/wp-json/wp/v2/' . $post_type . '?slug=' . $slug;

	//jsonデータを取得
		$json_data = file_get_contents($post_url);
		$decoded_data = json_decode($json_data, true);

	// アイキャッチ画像のIDを取得
		if (isset($decoded_data[0]['featured_media'])) {
			$image_id = $decoded_data[0]['featured_media'];
		}else{
			$image_id = '画像が見つかりませんでした';
		}
}

/*** アイキャッチ画像のjsonを取得 ***/
	//アイキャッチ画像のREST APIのURLを設定
		$featured_image_url = $home_url.'/wp-json/wp/v2/media/'.$image_id;

	//json情報の取得と整形
		$json_media_data = file_get_contents($featured_image_url);
		$decoded_media_data = json_decode($json_media_data, true);
		$formatted_media_data = 
			esc_html(
			json_encode($decoded_media_data,
						JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES
			));

/***  アイキャッチ画像のJSONデータを出力 ***/
	$result_html = '';//初期値をセット

	$result_html .= '<div class="media-json" style="overflow: scroll;">';
	$result_html .= '<h2>'.$home_url.'/'.$slug.'のアイキャッチ画像のjson</h2>';
	$result_html .= '<pre>' .$formatted_media_data . '</pre>';
	$result_html .= '</div>';
	$result_html .= '<style>.media-json a {text-decoration: none;}</style>';

	return $result_html;

}
add_shortcode('post-featured-image','pwcn_rest_api_featured_image_shortcode');

コード中の「ここにトップページのURL」と「スラグ」を目的のページに合わせて入力します。

そして投稿などを作成し、post-featured-imageというショートコードを挿入します。

すると以下のような情報が得られます（サンプルとして一部を画像表示しています）。

特にREST APIの制限などをかけていなければ、上図のような形で表示されるはずです。

データの取得方法自体は投稿データと同じですので割愛します。

アイキャッチ画像を含めたリンクカードを出力するショートコードを作成する

最後に前回の「REST APIを使って単一の投稿からデータを引き出して表示する方法」を含めた集大成として、REST APIを使用して、アイキャッチ画像を含めたリンクカードを表示させてみようと思います。

以下のコードで実装できます。

/***** 単一投稿のjsonを取得してアイキャッチ画像付きで表示するショートコード *****/
function pwcn_rest_api_post_data_with_fimage_for_card_sc(){
	$home_url = 'ここにトップページのURL';//末尾の「/」は入れない
	$post_type = 'posts';//投稿は「posts」
	$slug = 'ここにスラグ';//前後の「/」は入れない

	//URLの余分な「/」を取り除く
		$slug = ltrim($slug, '/');
		$home_url = rtrim($home_url, '/');

/* 単一投稿のデータを取得 */
/* パーマリンクによって処理を変える必要があるっぽいのでそのように仕分け */
	if (ctype_digit($slug)) {// $slugが数字の場合（パーマリンク設定がIDの場合）
		//REST APIのURL(エンドポイント)を生成
		$post_url = $home_url . '/wp-json/wp/v2/' . $post_type . '/' . $slug;
		// wp_remote_getを使用してREST APIからデータを取得
		$response = wp_remote_get($post_url);
		// レスポンス本文を取得
		$body = wp_remote_retrieve_body($response);
		// JSONデータをデコード
		$data = json_decode($body, true);

		//必要な項目を変数に格納
		if(isset($data)){
			$title = $data['title']['rendered'];
			$link_url = $data['link'];
			$exerpt = $data['excerpt']['rendered'];
			$image_id =  $data['featured_media'];
		}else{
			$title = '';
			$link_url = '';
			$exerpt = '';
			$image_id =  '';
		}

	} else {// $slugが数字以外の場合（パーマリンク設定がID以外の場合）
		//REST APIのURL(エンドポイント)を生成
		$post_url = $home_url . '/wp-json/wp/v2/' . $post_type . '?slug=' . $slug;
		//jsonデータを取得
		$response_data = file_get_contents( $post_url );
		$data = json_decode($response_data, true);
		//必要な項目を変数に格納
		if(isset($data)){
			$title = $data[0]['title']['rendered'];
			$link_url = $data[0]['link'];
			$exerpt = $data[0]['excerpt']['rendered'];
			$image_id =  $data[0]['featured_media'];
		}else{
			$title = '';
			$link_url = '';
			$exerpt = '';
			$image_id = '';
		}
	}

/* アイキャッチ画像のデータを取得 */
	//アイキャッチ画像のREST APIのURLを設定
		$featured_image_url = $home_url.'/wp-json/wp/v2/media/'.$image_id;

	//json情報の取得と整形
		$json_media_data = file_get_contents($featured_image_url);
		$decoded_media_data = json_decode($json_media_data, true);

	// "medium"サイズの情報を取得
	$medium_size_info = $decoded_media_data['media_details']['sizes']['medium'];

	// "medium"サイズのURLと幅・高さを取得
    $medium_size_url = $medium_size_info['source_url'];
    $medium_size_width = $medium_size_info['width'];
    $medium_size_height = $medium_size_info['height'];

	//アイキャッチ画像のHTMLを生成
	$image_data = '<img src="'.$medium_size_url.'" width="'.$medium_size_width.'" height="'.$medium_size_height.'"  alt="REST APIを使って他のサイトの投稿などをアイキャッチ画像付きで表示するショートコードを作る方法|Personal WP Customization Notes (PWCN)">';

	//投稿へのリンクタグを生成
	$before_link = '<a href="'.$link_url.'" target="_blank">';
	$after_link = '</a>';

// 単一投稿のJSONデータをアイキャッチ画像付きで出力
	$result_html = '';//初期値をセット

	$result_html .= $before_link;
	$result_html .= '<div class="post-link-card">';
	$result_html .= '<div class="post-link-card-image">'.$image_data.'</div>';
	$result_html .= '<div class="post-link-card-content">';
	$result_html .= '<h3>'.$title.'</h3>';
	$result_html .= '<p>'.$exerpt.'</p>';
	$result_html .= '</div>';
	$result_html .= '</div>';
	$result_html .= $after_link;

	return $result_html;

}
add_shortcode('fimage-card-post-data','pwcn_rest_api_post_data_with_fimage_for_card_sc');

コードをコピーしたら、「ここにトップページのURL」と「ここにスラグ」の部分を設定し、新規に投稿などを作成し、「fimage-card-post-data」ショートコードを挿入すると取得した情報が表示されるはずです。

以下が簡単なコードの構造と流れです。

1. 取得するページ情報の設定
2. ページ情報から、投稿用のデータを抽出
3. 投稿用のデータのアイキャッチ画像のIDを基に、画像用のjsonから中サイズの画像情報を取得
4. ショートコードで取得した情報をHTMLとして出力

このままでは、単純に取得した情報が表示されるだけでカード表示にはなっていません。

以下のスタイルコードなどをテーマのstyle.cssなどへ追加すれば下図のような感じに表示できると思います。

【スタイルコードの例】

あくまでも例ですので自身で調整ください

.post-link-card {
    display: flex;
    gap: 12px;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.post-link-card:after{
	display:block;
}

.post-link-card a{
	text-decoration:none;
}

.post-link-card h3 {
    margin-top: 0;
    font-size: 1.3rem;
}

.post-link-card p {
    font-size: 0.8rem;
}

リンクカードの表示例（画像）

※画像で挿入していますので、クリックしても何も起こりません

ひとまずアイキャッチ画像、タイトル、抜粋を表示させています。その他の情報を表示させたい場合は、ここまでの内容を読んでいれば簡単ですね。

また、以下のように発展させて、このショートコードをより便利に使えるようにもできますね。

1. ショートコードパラメーターを追加して、ホームURLや投稿タイプ、スラグをショートコードごとに設定できるようにする
2. ショートコードをパターンに登録して、簡単に呼び出せるようにする

最後に

今回はREST APIを使用して（APIを叩いて）取得した情報をカード形式で表示するという方法について紹介しました。そして本ページは私自身がREST APIの使い方を知る目的も兼ねています。

最後にはしごを外すようで申し訳ないのですが、この方法はあくまでもWordPressで運営しているサイトの情報をREST APIを使って取得してリンクカード表示させるというものであり、当サイトのようにREST APIに対する接続制限を行っているサイトのページは、情報を取得できないため、カード表示できません。

また、運よく情報が取得できたとしても、そのサイトが永遠に制限をかけないとは限らないため、いつの間にか表示できなくなるということも想像できます。

安定的に埋め込み表示を行うには、段落ブロックの先頭からURLを入れると埋め込みカード表示を行うWordPressの機能を使うか、WordPressで運営していないサイトでも一般的に出力されている、OGP(SNSへの埋め込み用のタグ)から取得して表示したほうが無難かも知れません。