jQuery.ajax()を使ってクリックイベントで投稿を取得。WP REST APIを試してみました。

JSON形式のデータを取得できるWP REST APIというWordPressプラグインを使ってクリックイベントでWordPressの投稿を取ってくるサンプルコードを作成しました。

このプラグインを使ってサイトのホームのurl+/wp-json/wp/v2にアクセスするとJSON形式のデータが返却される機能が提供されます。更にパラメータを追加してWP_Queryのように投稿を取得することもできます。このデータを利用して、以下の様な記述で投稿を取得できました。

demo

JavasScript(jQuery)

//最新の投稿6件を取得するスクリプト
jQuery(function() {
 
//jsonデータが返却されるurl
var APIurl = 'https://stella-design.biz/wp-json/wp/v2/posts/?filter[posts_per_page]=6';
 
//投稿データ表示
jQuery('.btn-api-load').on('click', function(){
	jQuery('.api').empty().removeClass('fade-in');
	jQuery('.loading').removeClass('hidden');
	setTimeout(function(){
		ajaxGetPost();
	},2000);
});
 
//投稿データ取得 
function ajaxGetPost(){
	jQuery.ajax({
		type: "GET",
		url: APIurl,
		dataType: "json"
	})
	.then(
		function(json){
			for(var i in json){
				jQuery('.api').append('
  • ' + json[i].title.rendered + '
  • '); } }, function(){ alert("データをロードできませんでした。"); } ); jQuery(document).ajaxStop(function(){ jQuery('.loading').addClass('hidden'); jQuery('.api').addClass('fade-in'); }); } });//jQuery end

    html

    
    <button class="sd-btn btn-api-load">click</button>
    <div class="develop-block">
        <ul class="ul api"></ul>
        <div class="loading hidden">loading</div>
    </div>
    

    css

    
    @-webkit-keyframes ani-opa {
    	0% {
    		opacity: 0;
    	}
    	50% {
    		opacity: 1;
    	}
    	100% {
    		opacity: 0;
    	}
    }
    @keyframes ani-opa {
    	0% {
    		opacity: 0;
    	}
    	50% {
    		opacity: 1;
    	}
    	100% {
    		opacity: 0;
    	}
    }
     
    .loading {
    	margin: 15px 0;
    	-webkit-animation: ani-opa 1s infinite;
    	animation: ani-opa 1s infinite;
    }
     
    .hidden {
      visibility: hidden;
    }
     
    .api {
    	opacity: 0;
    	-webkit-transition-property: opacity;
    		  transition-property: opacity;
    	-webkit-transition-duration: 2s;
    		  transition-duration: 2s;
    	-webkit-transition-timing-function: ease;
    		  transition-timing-function: ease;
    	-webkit-transition-delay: 0.1s;
    		  transition-delay: 0.1s;
    }
     
    .fade-in {
    	opacity: 1;
    }
    
    .btn-api-load{
    	margin-top: 15px;
    }
    
    .develop-block{
    	padding: 30px 0;
    }
    

    昨年春のマット・マレンウェッグ氏のイベントによると、WP REST APIがWordPressのコアにマージされる時期が近づいているようです。

    JavaScriptを使ってスマートフォンネイティブアプリに近いUIを備えたwebサイトは今後ますます増えていくと個人的には思っています。その流れに対応できるよう、今年は昨年以上にがっちりJavaScriptに取り組んで行く予定です。

    しかしながら、JavaScriptをやればやるほど、サーバーサイドスクリプトの知識の必要性を感じるようになりますね。両方出来たほうがよりよいものが作れる。ひとまずはPHPももっとがんばって、WEBサービス的なものを作れるようになれたらいいな、と思い始めています。

    コメントをどうぞ!