最近、ショッピングサイトは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 entryDate = new Date(entry.publishedDate); //日付を取得（以下二桁処理）
var entryYear = entryDate.getYear();
if (entryYear < 2000){
entryYear += 1900;
}
var entryMonth = entryDate.getMonth() + 1;
if (entryMonth < 10) {
entryMonth = "0" + entryMonth;
}
var entryDay = entryDate.getDate();
if (entryDay < 10) {
entryDay = "0" + entryDay;
}
var date = entryYear + "/" + entryMonth + "/" + entryDay + "";
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>';
}
var linkBlank = container.getElementsByTagName('a'); // リンクに'_blank'を設定
for (var j = 0, l = linkBlank.length; j < l; j++) {
linkBlank[j].target = '_blank';
} //target'_blank'ここまで
}
}
}
google.setOnLoadCallback(initialize);
5、HTMLに出力
<div id="feed"></div>
ECーCUBEであれば、新規ブロックを作成して<div id="feed"></div>と記入。
4、CSSで見栄えを整える
HTMLへの出力は
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>';
の部分なのでclass属性を追加してあげるといいですよ。
entryImg・・・画像
entry.title ・・・タイトル
date・・・日付
entry.contentSnippet.substring(0,120)・・・抜粋本文
entry.link・・・記事へのURL
サンプル）画像のみ左へ、他本文は右へ、であれば
container.innerHTML += '<div class="left">' + entryImg +'</div>'
+ '<div class=right><h3><a href="' + entry.link + '">'
+ entry.title + '</a></h3>'
+ '<p>'+ date + '<br /><br />'
+ entry.contentSnippet.substring(0,120)
+ '<a href="' + entry.link + '">・・・続きを見る</a></p></div><div class=clear></div>';
＜ｃｓｓ＞
#feed{
width:300px;
}
#feed h3{
margin: 0;
}
#feed img{
width:100px;
}
.left{
float:left;
width:100px;
height:100px;
overflow:hidden;
}
.right{
float:right;
width:200px;
height:100px;
padding:0 0 20px 10px;
}
.clear{ clear:both; border-bottom:1px solid #FF9;}
いろいろな書き方を試してみたけど、これが一番安定してますね。
※試しているのはWPだけ
本日のメモでした(*^_^*)