ECCUBEなどにWordPress等の新着記事を表示(画像有)

最近、ショッピングサイトはEC-CUBE制作、
サイト内の新着情報はWordPressで構成していくことが多くなってきました。

EC-CUBEはショッピングサイトとしての使い勝手は良いけれど、新着情報などをブログ感覚でやりたい人にはちょっとだけ不向き。
新着情報編集PHPのエディタ部分にプラグインを入れてもいいけど、育成される新着情報ページはシンプルすぎて
件数が多くなればとってもとっても見にくいです(笑)
かといって、新着ページをWPのような見栄えに制作・追加となると、触らなきゃいけないファイルが・・・最低4つかな？それにDBも。
結構大変なのです(笑)
なので、商品部分と新着情報（ブログ）は切り離して管理したほうが効率もよくてグッドなのです。

ということで、WPの新着情報（RSS）を取得して表示する方法をご紹介

試行錯誤し、やっと安定してくれましたよ。

1、表示したいページの<head>内にhttps://www.google.com/jsapiを読み込む

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

2、以下スクリプトを<head>内に記入、もしくは外部JSで読み込む

※ファイルの保存形式はUTF-8にしないと、文字化けしてしまうので、ご注意！

＜ココから＞
google.setOnLoadCallback(initialize);

google.load("feeds", "1"); //APIを読み込む

function initialize(){

var feed = new google.feeds.Feed("読み込みたいRSSのURL");
var noPhoto = ("<img src='画像がなかった場合のNo-Image画像URL' />");

feed.setNumEntries(5); //読み込む件数を設定
feed.load(dispfeed);

function dispfeed(result){

if(!result.error){
var container = document.getElementById("feed"); //HTMLに書き出す対象のIDを指定

for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

    var entryImg = "";
    var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェック（拡張子はここで増やす）
    if(imgCheck){
     entryImg += '<img ' + imgCheck[0] + '">';
     } else {
      entryImg += noPhoto;
    }

    container.innerHTML += entryImg
    + '<h3><a href="' + entry.link + '">'
    + entry.title + '</a></h3>'
    + '<p>'+ date + '</p>'
    + '<p>' + entry.contentSnippet.substring(0,120)
    + '<a href="' + entry.link + '">・・・続きを見る</a></p></div>';
   }

WEBlo-気ままにあれこれ

WEB＆デザイン

こちらでは気ままにメモ＆ブログを書いてます。
WPネタが多いかも
（なんでもっと早くしなかったんだろ・・・；；）

ECCUBEなどにWordPress等の新着記事を表示(画像有)