WPの記事をJSONで返しそれをAjaxで取得してHandlebars.jsで処理する

このブログの情報を別サイトで表示するのに、タイトルのような事をしたいなと思いました。昔、普通に記事をwhileで回しつつthe_post()した後にJSON形式に出力してたけど面倒なので、もっと楽な方法は無いかと調べると、WPでJSONの出力は、

• WordPressの新着記事をJSON形式で取得し外部サイトで表示する方法のようなプラグインを作る方法
• [WordPress] 記事を JSON で出力する API ページを作るのように、get_posts();を使う方法

という２通りの方法が良くでてきます。

プラグインを増やしすぎるのもあれなので、後者の方法で作成することにしました。
サムネイルも使いたかったので、元記事のコードに、サムネイルの画像パス付与の処理も追加しています。

<?php
/*
Template Name: API Page
*/

$args = array(
  'numberposts' => 9,
  'orderby'     => 'post_date',
  'order'       => 'DESC',
);
$posts = get_posts($args);

if($posts): foreach($posts as $post):
	// サムネイルがある時は、記事データにサムネイル画像のURLを追加する
	if(has_post_thumbnail()) {
		$image_id = get_post_thumbnail_id($post->ID);
		$image_url = wp_get_attachment_image_src($image_id, true);
		$post->thumb = $image_url;
	}
	setup_postdata($post);
	$json[] = $post;
endforeach; endif;

header("Content-Type: application/json; charset=utf-8");
echo json_encode($json);

固定ページ（ここでは、/blog/api/というURLの固定ページ）を作成して、JSONが取得できるようになったら、別サイト側から、jQueryの$.ajaxで取得して、それをhandlebars.jsに渡します。今回は、同じドメイン内のサイトだったので良いですが、別ドメインとかだと、JSONPにしないと読み込めないかもしれません。

$.ajax({
	type: "GET",
	url: "/blog/api/",
	dataType:'json'
}).done(function(data) {
	var templateData = {
		results : data
	};
	// テンプレート元を取得
	var source = $("#template-blog").html();
	// テンプレート元をコンパイル
	var template = Handlebars.compile(source);
	// コンパイルしたテンプレートにデータを入力
	var html = template(templateData);
	// 出来上がったHTMLを該当箇所に追加
	$("#blog-list-template").html(html);
}).fail(function(data) {
	console.error("failed to get json");
});

ajaxで取得したdataをresultsをキーにしてtemplateDataに追加しているのは、dataが配列（Array）なのでテンプレート内で{{#each }}を回すのに良い値の渡し方が分からなかったからです（良い方法があればご教授頂きたいところです！）。以下がテンプレート元ですが、{{#each results}}とすることで、ループが使えます。

<script type="text/x-handlebars-template" id="template-blog">
	{{#each results}}
	<a href="{{guid}}" data-type="" data="" target="_blank">
		<div style="background-image: url(thumb.[0]);"></div>
		<div>
			<p class="title">{{post_title}}</p>
			<p class="description">{{post_content}}</p>
		</div>
	</a>
	{{/each}}
</script>

これでWPの記事データを取得して、handlebars.jsで表示できるようになりました。

現場でかならず使われているWordPressデザインのメソッド［アップデート版］

posted with amazlet at 17.03.18

エムディエヌコーポレーション（MdN） (2016-09-02)
売り上げランキング: 60,019

Amazon.co.jpで詳細を見る