カラーミーに外部RSSをサムネイル付きで読み込む【WordPressのRSSを読み込む】2020/08

2020.08.24

WEB

クライアントから「カラーミーショップ」に、外部のWordPressで書かれたRSS記事を「サムネイル付き」で読み込んでほしいとの依頼がきたので、ちゃちゃっと作業しようとしたら、思わぬところで躓いたのでメモ。

全体の流れ

01 WordPressを動かしているサーバにfeed用のphpファイルを設置
02 WordPressのRSSに画像を追加
03 カラーミーにJavaScriptとHTML追加

こんな感じの流れになります。
それでは始めていきます。
参考にさせていただいたサイトはこちら「 naeco 」

01 サーバへfeed用phpを設置

まず、カラーミー以外のサーバ（WordPressを動かしているサーバでOK）にfeed用のPHPファイルを設置します。
PHPが動くサーバである必要がありますので、サーバ会社をよく調べておいてください。（だいたいどこも動きますが。）
設置するPHPは以下。

＜rss-feed.php＞

<?php
define ('MAX_NUM',3); //表示させたい件数 今回は3件
$rss = simplexml_load_file('https://domain.com/feed/', 'SimpleXMLElement', LIBXML_NOCDATA); //WordPressのfeedURL
$i = 0;

foreach($rss->channel->item as $item) {
if($i >= MAX_NUM) {break;}
$title = $item->title; //記事タイトルを読み込む
$link = $item->link; //記事リンク先URL読み込む
$date = date("Y/m/d", strtotime($item->pubDate)); //日時を読み込む
$description = $item->description ; // 詳細を読み込む
$description = str_replace("[","",$description);
$description = str_replace("]","",$description);

if ( preg_match_all( '/<img([\s\S]+?)>/is', $item->description, $matches) ) {
$matches = str_replace("src =","src=",$matches);
foreach($matches[0] as $img) {
if($img === reset($matches[0])) {//最初の画像にマッチしたもの
if(preg_match('/src=[\'"](.+?(jpe?g|png|gif))[\'"]/', $img, $m) ) {
$thumb = $m[1]; //サムネイル画像URLを読み込む
}
}
}
}
//出力するHTMLの書き出し
$outdata.='<div><a href="'.$link.'"><img  src="'.$thumb.'" alt="" />
<h3>'.$title.'</h3>
</a></div>';
$i++;
}

//出力用配列にセット
$output = array(
'out' => $outdata
);

//エンコードをカラーミー用にECU-JPへ変換
header( 'Content-Type: text/javascript; charset=ECU-JP' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

上記は、ほぼ「 naeco 」さんのものを使用させていただいておりますが、naecoさんのコードではエラーが出てしまうので、修正してあります。もしそれでもわからないという方は「 naeco 」さんのところで設置依頼ができますので、相談してみてください。

読み込むfeedのURLは、読み込みたいRSSのWordPressURLに「/feed/」を追加すると表示されるかと思います。（例 https://domain.com/feed/ パーマリンク設定によっては異なります。）
※ すべてのURLがSSL対応じゃないと動かないかもしれません。

02 WordPressのRSSに画像を追加

WordPressのRSSには画像の書き出しが無いので、プラグインで簡単に画像を書き出してもらいます。
プラグイン以外にも直接function.phpに書き込む方法もありますが、今回クライアントさんのWordPressが直接functionに書き込めない状態でしたのでプラグインにしました。

使うプラグインはどれでも良いです、RSSに画像を吐き出すプラグインは主に2つあります。
1：「RSS Image Feed」（プラグイン検索で出てこないので、作者である「 Stefan Crämer 」を検索すると出てきます。）
2：「SB-RSS_feed-plus」
このどちらかを使っていけば問題なく表示します。今回は「 RSS Image Feed 」を使っていきます。

有効化しますと「プラグイン」のところに「 RSS Image Feed 」が追加されますので、こちらをクリックしてカスタマイズ。
大きくは最初の2ヶ所だけ。
最初の項目は画像サイズの指定。レスポンシブならば大きめに。
2つめは「画像サイズを相対的にしますか？」というものなので、一応チェック。CSSで調整してある場合はチェック入れなくてもいいような気もしますが。

これで最初に設置した＜rss-feed.php＞ファイルをブラウザで読み込んでみます。（例：https://domain.com/php/rss-feed.php ）
その画面でエラーが出ていなければOKです。エラーが出ている場合は何行目のエラーなのかなどを確認して間違いを探します。
画像のURLが拾えてない場合は、他のプラグインが邪魔している可能性があるので、一旦他のプラグインを外して確認します。

03 カラーミーにJavaScriptとHTML追加

今度はRSSを読み込んで吐き出したPHPファイルをカラーミーに表示させるためのJavaScriptとHTMLコードを書きます。
今回はカラーミーサイトのトップページに表示させるので、管理画面の「ショップ作成」→「デザイン」から「TOP」の「HTML・CSS編集」を開きます。

設置したい該当の箇所に以下のコード（JavaScriptとHTML）を書きます。

<script>
$.getJSONP = function(url,callback,param) {
return $.ajax({
url: url,
scriptCharset: "utf-8",
dataType: "jsonp",
success: callback
})
}
$.getJSONP("https://domain.com/assets/php/rss-feed.php", onDataHandler) //rss-feed.phpを設置したURLを書きます。
function onDataHandler(response) {
if(response.out != null){
$("#news-rss").append(response.out);
}
}
</script>

<div id="news-rss"></div> //出力したい場所にこれを記載。

これで表示できるようになっているはずです。
あとはHTMLとCSSで整形してあげれば完成です。

エラー！RSSの画像が表示されない！

今回トラブったのは、画像のURLはRSSで吐き出しているのに、うまくURLを取得してくれなくて数時間時間を無駄にしました。
原因は他のプラグインだったのですが、そういうデメリットもあるのかとちょっと勉強になったのでメモしておきます。

今回の直接原因だったのは「 Jetpack 」のプラグインでした。
JetpackではCDNで画像を読み込む「画像の最適化」があります。この機能がONになっていると画像のURLが別ドメインからの画像に切り替わります。
Feedの中身を見てみたらCDNのURLだったため、ひょっとしてこれが原因で表示できないのではないか？と思いJetpackを外してみたら見事ビンゴ。
いやぁ5時間くらい悩んでたんですけど、ほんと便利なのか不便なのかCDNもちょっと頭に入れておかないといけないですね。。。