【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

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

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

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

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

そしてショッピングカートのASPとWordPressの2つを運用しているとどうしても実現したくなるのが、「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です。

スクリーンショット_031615_050534_PM

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

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

スクリーンショット_031615_050332_PM

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

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ならではのポイントの1つが「固定ページやメディアファイルも取得可能」ということです。

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

例えば・・・

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

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

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

例えば「最も古い投稿を1つ取得する」であれば/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サイトの運用が行えるようになるのではないかと思います。

岡本

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+