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サービス的なものを作れるようになれたらいいな、と思い始めています。