常常有人詬病Wordpress很大包，小編這邊無法反駁這點，畢竟整包檔案是真的滿大的，但一套系統有基本完整的功能(後台管理、使用者管理、文章管理、媒體庫管理)想不大包都很難呀，特別是它連API都幫你開好了!
其實Wordpress這套CMS系統有API已經是好幾年前的事了，目前整體的API架構已經來到第二版，官方文件檔也清楚列出所有接口，有興趣串接的使用者不妨花些時間閱讀一下有哪些接口是你可以使用的：http://v2.wp-api.org/。
所以現在也有網站是單純將wordpress來做後台，前端網頁呈現部分透過wordpress系統本身所提供的API來抓取資料，如此操作的話可以很簡單地將後台網址設定為：admin.xyz.com，而前台主網站 xyz.com 就可以使用開發者所習慣的前端框架來做撰寫，不管是喜歡angular, react or vue 可以輕鬆地打造出一個有後台且前端可輕易打造介面的網站。
下面簡單示範如何透過ajax來載入由wordpress json API所開放的資訊，舉 Inside.com 硬塞科技網路新聞網站為例：(標準的Wordpress CMS，每個月sessions就有300萬，所以看看這個例子可以再次證明網站能否承載巨大流量跟Wordpress的關係實在不大阿)
根據wordpress API官方文件記載，以posts為例，基本外層的API網址架構為：/wp-json/wp/v2/posts，應用在Inside的話，網址就是：https://www.inside.com.tw/wp-json/wp/v2/posts，點擊連結即可看到所吐出之json data。
方便起見，前端css使用bulma.css(本於flexbox layout的CSS框架)，非常好用，有興趣的開發者也可以看看這個新的框架，Ajax的部分簡單透過jQuery的方式，下篇再示範若是使用Vue.js的時候應如何實作：
HTML的部分我們簡單的放一個container，準備放載入後的資料，
<div class="container"> </div>
CSS因為先簡單的透過bulma的基本樣式，所以不另外多做。
Javascript抓取json data後放過我們指定的頁面容器中：
$.ajax({
url: 'https://www.inside.com.tw/wp-json/wp/v2/posts',
method: 'GET',
}).done(function(data){
// console.log(data);
$.each(data, function(i, val){
var template = '<div class="column"><div class="card"><a href="'+val.link+'" target="_blank"><div class="card-image"><figure class="image is-4by3"><img id="'+val.featured_media+'" src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"></figure></div><div class="card-content"><div class="media"><div class="media-content"><p class="title is-4">'+val.title.rendered+'</p></div></div><div class="content">'+val.excerpt.rendered+'<time datetime="'+val.date+'">'+val.date+'</time></div></div></a></div></div>';
if( i%4===0 ){
$('.container').append('<div class="columns">'+template+'</div>');
}
else{
$('.container .columns').last().append(template);
}
//get image url
$.ajax({
url: 'https://www.inside.com.tw/wp-json/wp/v2/media/'+val.featured_media,
method: 'GET',
}).done(function(image){
$('#'+val.featured_media+'').attr('src',image.source_url);
});
});
}).fail(function(){
console.log('failed');
});
bulma的columns是裡面有幾個column就會幾等分，所以此範例為每四個一排，最後一排由於一次是吐十筆資料，所以會是兩個並排的卡片呈現。
將結果透過codepen來呈現，請參考下方：
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OOdEOo” default_tab=”result” user=”matrixki”]See the Pen <a href=’https://codepen.io/matrixki/full/OOdEOo/’>extract wordpress posts</a> by Mike (<a href=’https://codepen.io/matrixki’>@matrixki</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
下篇再繼續跟大家分享若是使用改用Vue.js來寫的話應該怎麼操作。
