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

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

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

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

    要は適材適所、ですね。

    OUR MISSION

    理念

    「ITで人を豊かにする」

    私たちが開発したシステムやサービスを通じ、物心両面から豊かになってもらう。そして人生を楽しんでもらう。そこに私たちが存在する理由があります。
    日々新たな製品・サービスを開発・ご提供し、最後まで誠意をもって取り組んで成果を出す。
    ご縁を頂いた方やその先の人達に安心と満足をご提供出来る様、誠心誠意取り組んで参ります。

    CONTACT

    お問い合わせはこちらから。

    pageTop