WordPress外で投稿データを取得し、Ajaxでjsonを受けてHTMLで表示する

Javascriptでウェブサイト上のコンテンツを動的に生成している場合に、どういう仕組みでそれを実現しているのかを実例を挙げて説明しています。
ウェブチェッカーでこれに関するお問い合わせがあるため、その動作を理解していただくために作りました。

ここでは、WordPress投稿データをWordPress外から取得し、それをAjaxでjson形式データを受けてHTMLで表示するサンプルプログラムを作っています。

まずは処理結果

弊社ブログ( https://www.en-pc.jp/blog/ ) の最新１０件を取得して一覧にしています。

全体の流れについてざっくり説明

1.ブラウザー側からJavascriptが動いて、Ajaxにて指定されたURLにアクセスする。そのURLで動く処理が以下の2と3。
2.WordPressシステム外部からWordPressの投稿データを取得する。
3.投稿データをJSONに変換し返す。
4.Ajaxにて受け取ったJSONを、HTMLに変換して表示する。

Ajaxで指定されたURLにアクセスし、受け取ったJSONをHTMLに変換して表示する(フロントエンドのJavascript)

上の1.と4.に相当する部分です。

このページ上部にある「まずは処理結果」の次にある <ul id=”list”></ul>の部分に、ここで生成されたHTMLが入る動きです。

$(function(){
	target = $('#list');
	$.ajax({
		type     : 'get' ,
		url      : "./ajax_json_get.php", 
		cache    : false,
		dataType : 'json' ,
		success  : function(data,status){
			for(var n in data) {
				var text = '<li>';
				if (data[n].url){
					text = text + '<a href="'+data[n].url+'" target="_blank"><span>'+data[n].post_title+'</span></a>';
				}else{
					text = text + '<i><span>'+data[n].post_title+'</span></i>';
				}
				text = text + '<br><span>' + data[n].post_date + '</span></li>';
				$(target).append(text);
			}
		}
	});
});

WordPressシステム外部からWordPressの投稿データを取得し、JSONで返す処理(バックエンドのPHP)

上の2.と3.に相当する部分です。

上のJavascript で言うと、 “/ajax_json_get.php” で呼び出されてサーバー側で動く部分に相当します。

<?php
require_once( $_SERVER['DOCUMENT_ROOT']. '/blog/wp-load.php' );
$args = array(
	'post_type'      => 'post',
	'post_status'    => 'publish',
	'posts_per_page' => 10,
	'orderby'        => 'date',
	'order'          => 'DESC'
);
$list = array();
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		
		$list[] = array(
			'post_date'  => $post->post_date ,
			'post_title' => $post->post_title,
			'url'        => $post->guid,
		);
	}
}
header('Content-type: application/json');
echo json_encode($list);

これが出来たからどうした

はい、このようなサンプルの場合は、はっきり言って何の役にも立ちません。最初からHTMLの中にお知らせに関する情報を入れておきなさい、と言います。

SEOに弱い、表示遅延、システム化を複雑にしている。

このように、良いところがありませんから。

もちろん、ページ表示後にどんどん外部から更新された内容をここにも反映していくような、そういう表現を行いたいのであればこのかたちは役に立ちます。

要は適材適所、ですね。

関連リンク