「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を御覧ください（英語です）。

ドメインを跨ぐ場合は要注意！

最後に注意点ですが、今回のサンプルのようにJavaScriptのAjaxを利用する場合は「ドメインを跨いで利用すること」がデフォルトではできません。

これはSame origin Policyによるもので、セキュリティ上デフォルトではNGとなっています。

そのためECカートASPとWordPressが別のドメインで運用されている場合は、PHPなどのサーバーサイドプログラムを利用する必要がありますのでご注意下さい。

最後に

WordPressは現在「アプリケーションプラットフォームとして利用できるCMS」を目指している傾向が強く見られます。

今後のECサービスは、商品・顧客情報などはショッピングカートASP、コンテンツデータはWordPress、そして表示はWebComponentsといった「役割分担」が重要になるかもしれません。

役割分担を行うことでコーディング作業とコンテンツ作成作業を分離させることで、コーディング知識がなくともより簡単にECサイトの運用が行えるようになるのではないかと思います。

岡本