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

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

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

まずは処理結果

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

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

    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に弱い、表示遅延、システム化を複雑にしている。

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

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

    要は適材適所、ですね。

    関連リンク

    技術情報/ツールのご紹介(サービス一覧)

    株式会社エン・PCサービスで開発したツール類や技術情報のご紹介。ウェブ開発を行う中で頻繁に使うものをツール化し、情報整理したものをまとめました。開発事業者様の補助ツールとしてご利用下さい。

    サブスク型IT相談役サービスのご紹介

    ITについてなんでも相談に乗ってしまおう、というサービスを始めました。社内エンジニアの育成や情報システムの適切な管理の仕方、など。なんでもご相談ください。

    Reverse-Proxy先をWordPressに‥

    Reverse-ProxyとWordPressでオウンドンメディアだけ別サーバーで動かす、という話です。実際に構築してハマった事とその解決方法をご紹介しています。

    開発プロセスとは何?開発にあたり知っておく事とは

    スクラッチ開発で、発注者と業者、それぞれが気を付けなければいけない事をお伝えしていき、いかにして開発を成功させるかを開発プロセスという観点からご紹介しています。