ECオーナー必見！WP-APIでWordPressのデータを外部サイトに表示する方法

1. 「WordPressの情報を他でも使いたい！」
2. WordPressをAPI化する、WP-API(JSON REST API)
3. JavaScriptがかけるところなら大体OKです！
4. 最後に

「WordPressの情報を他でも使いたい！」

Googleの検索エンジンが進化するにつれて、「自前のコンテンツを用意すること」がより重要になってきました。

ECサイトを運営されている方には、ECサイトを運営するASPとは別に、WordPressでコンテンツを運用されている方も多いのではないでしょうか？

そしてショッピングカートのASPとWordPressの２つを運用しているとどうしても実現したくなるのが、「ECカートASP側にWordPressの投稿を表示させたい」ということです。

多くの場合はGoogle Feed APIを読み込んで、RSSから投稿を取得されているのではないかと思います。

この場合、ページのbody直下または/body直上に以下のような長いスクリプトを書く必要があります。

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = ["http://feeds.feedburner.com/aiship/knowhow","feed-MFML"];

var setNum = 10;    //表示件数
google.load("feeds", "1");

function initialize() {
    for(var k = 0; k < xmlUrl.length; k++){
        feedAdd(xmlUrl[k][0],xmlUrl[k][1]);
    }

}

function feedAdd(rssUrl, rssID) {
    var feed = new google.feeds.Feed(rssUrl);
    var html = '';
    feed.setNumEntries(setNum);
    feed.load(function(result) {
        if (!result.error) {
            for (var i = 0; i < setNum - 1; i++) {
                if (!result.feed.entries[i]) {break;};
                var entry = result.feed.entries[i];
                var title = entry.title;    //記事タイトル取得
                var link = entry.link;      //記事のリンクを取得
                //日付を取得し年月日を整形
                var publishedDate = entry.publishedDate;
                var pubDD = new Date(publishedDate);
                yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
                mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
                var pubDate = yy +'年'+ mm +'月'+ dd +'日';
                //カテゴリ要素がある場合は取得
                for (var j = 0; j < entry.categories.length; j++) {
                    var categorie = entry.categories[j];
                }
                if (!categorie) {categorie = '';};
                //表示する部分を整形
                html += '<li><a href="' + link + '" target="_blank">'+ title +'</a> - ' + categorie + '（' + pubDate + '）</li>';
            }
            //フィードの出力
            var container = document.getElementById(rssID);
            container.innerHTML = html;
        }
    });
}
google.setOnLoadCallback(initialize);
</script>

実は外部ライブラリを使用せずとも、もっと簡単にWordPressの情報を取得する方法があるのをご存知でしょうか？

WordPressをAPI化する、WP-API(JSON REST API)

RSSよりも簡単にWordPressの投稿を取得できるのが、「WP-API」というWordPress本体に今後実装予定のRESTfulAPIです。

これはWordPressをアプリケーションプラットフォームとして利用するために開発されたAPIで、WordPressの投稿や固定ページ・更にはメディアの情報まで、様々なデータを取得することが可能となるひっじょーに便利なAPIです。

実装予定とはいえすでにプラグインとして配布は行われており、プラグインをインストールするだけで簡単にWordPressにWP-APIを実装することができます。

では実際に使ってみましょう。

JavaScriptがかけるところなら大体OKです！

WP-APIのデータをフロントで取得するとすれば、jQueryを使用するのがおそらく一番お手軽です。

ajax関数を使用して、以下の様に書くことで先ほどのRSSとほとんど同じ結果を得られることができます。

<div class="ajax"></div>
<script>
    $.ajax({
        type: 'GET',
        url: 'blog/wp-json/posts',
        dataType: 'json'
    }).done(function(json){
            var len = json.length;
            for(var i=0; i < len; i++){
              var title = json[i].title;
              var link = json[i].link;
              var category = '';

              for (var j = json[i].terms.category.length - 1; j >= 0; j--) {
                  category += json[i].terms.category[j].name;
              };
              var pubDD = new Date(json[i].date);
              yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
              mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
              var pubDate = yy +'年'+ mm +'月'+ dd +'日';
              var html = '<li><a href="' + link + '" target="_blank">'+ title +'</a> - ' + category + '（' + pubDate + '）</li>';
              $('.ajax').append(html);
            }
    }).fail(function(json){
            $('.ajax').append("読み込みませんでした。");
    });
</script>

RSSと比較してコードの量が約半分、更にはデータを取得できなかった場合の処理まで設定できるようになりました。

固定ページやメディアのお手の物！

そしてWP-APIならではのポイントの１つが「固定ページやメディアファイルも取得可能」ということです。

先程は「wp-json/posts」というURLからデータを取得しましたが、これを書き換えるだけで様々なデータを取得することが可能となります。

例えば・・・

メディアを取得したい: /wp-json/media
固定ページを取得したい: /wp-json/pages
タグを取得したい: /wp-json/taxonomies

絞り込みにももちろん対応しています

そしてAPIを名乗るからにはもちろんデータの絞り込みも可能です。

例えば「最も古い投稿を１つ取得する」であれば/wp-json/posts?filter[order]=ASC&filter[orderby]=date&filter[post_per_page]=1、「花火というキーワードを含む固定ページを5件取得する」であれば/wp-json/pages?filter[s]=花火&filter[post_per_page]=5のように記述できます。

URLにfilterパラメータを渡すだけですので、今までと比較するとかなり手軽に欲しい記事だけを取得できるようになるのではないかと思います。

絞りこみ方法などについて詳しく知りたい方はWP API Documentationを御覧ください（英語です）。