RSS フィードにアイキャッチ画像を含めて別のサイトで表示する
カテゴリー: HTML/CSS/JS, WordPress コメント: 13 件
この記事は2019年6月12日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のサイトから RSS フィードを取得して表示する場合、RSS フィードからデフォルトで取得できる情報は、タイトル、パーマリンク、投稿日、投稿者、概要(本文)くらいで、アイキャッチ画像を取得することはできません。そもそもアイキャッチ画像は RSS フィードに含まれていないので当然です。
そこで、WordPress の RSS テンプレートを加工してアイキャッチ画像を含め、別のサイトでこの RSS フィードを取得して表示してみました。(RSS フィード発信元の WordPress サイトの管理者権限があることが前提です。)
RSS フィードにアイキャッチ画像の URL を含める
RSS フィードにアイキャッチ画像を含める方法は検索するとたくさん見つかりますが、今回は別サイトで表示することが目的なので、RSS フィードにアイキャッチ画像を表示する必要はなく、アイキャッチ画像の URL が取得できればよいわけです。
以下の記事を参考にさせていただきました。
WordPressのフィード・RSSにアイキャッチ画像を追加 RSSタグ構造のカスタマイズなど
RSS フィードのテンプレートファイルは /wp-includes/feed-rss2.php ですが、これを編集すると WordPress のアップデートの際に編集内容が消える可能性がありますので、テーマディレクトリ内にコピーし、コピーした feed-rss2.php を次のように編集します。
<guid isPermaLink="false"><?php the_guid(); ?></guid>
<?php /* ここから追加 */
if ( has_post_thumbnail() ) :
$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
$thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
?>
<image><url><?php echo $image_url[0] ; ?></url></image>
<thumb><url><?php echo $thumb_url[0] ; ?></url></thumb>
<?php endif;
/* ここまで追加 */ ?>
<?php if (get_option('rss_use_excerpt')) : ?>
<description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>
追加する位置は <item> 〜 </item> の間であればどこでもよいですが、上記は <description> の上に追加しています。また、便宜上アイキャッチ画像を large と thumbnail の2種類のサイズの URL を取得しています。
そして、この RSS テンプレートを使用することを functions.php で指定します。
remove_filter('do_feed_rss2', 'do_feed_rss2', 10);
function custom_feed_rss2(){
$template_file = '/feed-rss2.php';
load_template(get_template_directory() . $template_file);
}
add_action('do_feed_rss2', 'custom_feed_rss2', 10);
これで、アイキャッチ画像の URL を含めた RSS フィードが配信されます。
別サイトで RSS フィードを取得し、表示する
次に、この RSS フィードを別サイトで取得し、アイキャッチ画像を含めて表示する方法です。PHP を利用することができれば、静的 HTML など、WordPress で作られたサイトでなくても表示することができます。
手っ取り早く、PHP で RSS フィードを読み込むことができる「RSS & Atom Feeds for PHP」というライブラリを使用します。
GitHub – dg/rss-php: Small and easy-to-use library for consuming RSS and Atom feeds
ダウンロードした zip ファイルを解凍し、この中の rss/Feed.php を任意のディレクトリに格納します。(以下の例ではテーマディレクトリ内に保存しています。)
そして、RSS フィードを取得して表示するファイルに以下のように記述します。
以下の記事を参考にさせていただき、自分なりにカスタマイズしました。
ブログのRSSを読み込んで新着記事を表示!PHPを使ってみました | Kana-Lier カナリエ
この例は、上記で取得した2種類のサイズのアイキャッチ画像を表示し、画面サイズに応じて CSS でどちらかを表示するようにしたものです。また、取得した更新日時から7日以内の投稿に対して「New」を表示するようにしています。
<?php
require_once TEMPLATEPATH. '/inc/Feed.php'; //rss-phpライブラリを読み込み
$feed = new Feed;
$url = 'https://www.example.com/feed/'; //RSSのURL
$rss = $feed->loadRss($url);
$num = 3; //表示させたい件数
$i = 0;
$desW = 35; //詳細の文字数
if ( $desW != 0 ){
$desW = ($desW*2)+2;
}
foreach ( $rss->item as $item ){
if($i>=$num){
} else {
$title = $item->title; // タイトル
$link = $item->link; // リンク
$timestamp = strtotime( $item->pubDate ); // 更新日時
$image = $item->image->url; // アイキャッチ
$thumb = $item->thumb->url; // アイキャッチサムネイル
$description = $item->description; // 詳細
$description = strip_tags($description);
if ( $desW != 0 ){
$description = mb_strimwidth($description, 0, $desW, "…",'utf-8');
}
$eyecatch = '/images/dummy_eyecatch.jpg'; // アイキャッチがない場合の代替画像
if ( $image ){
$eyecatch = $image;
}
$thumbnail = '/images/dummy_thumbnail.jpg'; // アイキャッチサムネイルがない場合の代替画像
if ( $thumb ){
$thumbnail = $thumb;
}
$days = 7; // Newを表示する日数
$today = date('U');
$sa = date('U',($today - $timestamp))/86400;
?>
<article>
<a href="<?php echo $link; ?>">
<div class="eyecatch"><img src="<?php echo $eyecatch; ?>" alt="" /></div>
<div class="thumbnail"><img src="<?php echo $thumbnail; ?>" alt="" /></div>
<div class="date"><?php echo date( "Y年m月d日", $timestamp ); if ( $days > $sa ) { echo '<span class="new">New</span>'; } ?></div>
<div class="title"><?php echo $title; ?></div>
<div class="excerpt"><?php echo $description; ?></div>
</a>
</article>
<?php
$i++;
}
}
?>
以上で、RSS フィードにアイキャッチ画像の URL を含め、別サイトでその RSS フィードからアイキャッチ画像を表示することができました。
“RSS フィードにアイキャッチ画像を含めて別のサイトで表示する”への 13 件のコメント
りさんより:
はじめまして。
記事を参考にさせていただきましたが、自分の知識不足で
wp-content/themes/lightning_child_sample/front-page.php ファイルの123行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。
require_once(): Failed opening required ‘wp-content/themes/lightning/Feed.php’ (include_path=’.:/opt/alt/php73/usr/share/pear’)
とエラーが出てしまいます。
テーマは、Lightningで子テーマを編集しています。
Failed opening required ‘wp-content/themes/lightning/Feed.php
の部分を見ると親テーマから読み込もうとしているのかなと思いました。
知識不足で申し訳ありません。
なにか、アドバイスいただけたらとてもありがたいです。
よろしくお願いします。
石輪さんより:
コメントありがとうございます。
Lightningのテーマはわかりませんが、親テーマから読み込もうとしているのではないかとのことですので、もしかしたら、functions.php の load_template の記述が違うのかもしれません。
get_template_directory() は親テーマのディレクトリの絶対パスを取得しますので、子テーマのディレクトリの絶対パスを取得する場合は、get_stylesheet_directory() を使用することになります。
この記事の functions.php の4行目
load_template(get_template_directory() . $template_file);
を
load_template(get_stylesheet_directory() . $template_file);
に置き換えてみてください。
りさんより:
ご回答ありがとうございます。
変更してみましたが、エラーが治りませんでした。
別サイトで RSS フィードを取得し、表示するCSSの
「require_once TEMPLATEPATH. '/inc/Feed.php'; //rss-phpライブラリを読み込み」
部分でエラーが起きてます。
ちなみに、RSS フィードにアイキャッチ画像の URL を含めるCSSは、
最新記事を取得したい方に記入しますか?
それとも最新記事を表示したい方に記入しますか?
知識不足で申し訳ありませんが、ご教授願います。
また、下記私のHPです。
http://www.hobbyshtick.com/
現在は、違う方法で最新記事を読み込んでいるのでタイトルと更新記事がリンクになっているだけです。
申し訳ありませんが、よろしくお願いいたします。
石輪さんより:
RSS フィードを取得して表示する側で、Feed.php の読み込みでエラーがでているのですね。
require_once TEMPLATEPATH. ‘/inc/Feed.php’;
この記述も親テーマのディレクトリのパスを読み込みます。
子テーマのディレクトリのパスを読み込む場合は
require_once STYLESHEETPATH. ‘/inc/Feed.php’;
とする必要があります。
また、‘/inc/Feed.php’ は Feed.php をテーマディレクトリ内の 'inc' フォルダに格納した場合ですので、テーマディレクトリ直下であれば
require_once STYLESHEETPATH. ‘/Feed.php’;
となります。
RSS フィードにアイキャッチ画像の URL を含める PHP は最新記事を取得したい方(RSS フィード発信側)に記述します。
りさんより:
石輪様
ご回答ありがとうございます。
参考にさせていただき、下記のように修正しました。
loadRss($url);
$num = 3; //表示させたい件数
$i = 0;
$desW = 35; //詳細の文字数
if ( $desW != 0 ){
$desW = ($desW*2)+2;
}
foreach ( $rss->item as $item ){
if($i>=$num){
} else {
$title = $item->title; // タイトル
$link = $item->link; // リンク
$timestamp = strtotime( $item->pubDate ); // 更新日時
$image = $item->image->url; // アイキャッチ
$thumb = $item->thumb->url; // アイキャッチサムネイル
$description = $item->description; // 詳細
$description = strip_tags($description);
if ( $desW != 0 ){
$description = mb_strimwidth($description, 0, $desW, "…",'utf-8');
}
$eyecatch = '/images/dummy_eyecatch.jpg'; // アイキャッチがない場合の代替画像
if ( $image ){
$eyecatch = $image;
}
$thumbnail = '/images/dummy_thumbnail.jpg'; // アイキャッチサムネイルがない場合の代替画像
if ( $thumb ){
$thumbnail = $thumb;
}
$days = 7; // Newを表示する日数
$today = date('U');
$sa = date('U',($today – $timestamp))/86400;
?>
<a href="" rel="nofollow ugc">
<img src="" alt="" />
<img src="" alt="" />
$sa ) { echo 'New'; } ?>
</a>
しかし、また別のエラーが出ました。下記です。
wp-content/themes/lightning_child_sample/Feed.php ファイルの188行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。
Uncaught FeedException: Cannot load feed. in wp-content/themes/lightning_child_sample/Feed.php:188
Stack trace:
#0 wp-content/themes/lightning_child_sample/Feed.php(51): Feed::loadXml('https://www.hob…', NULL, NULL)
#1 wp-content/themes/lightning_child_sample/front-page.php(126): Feed::loadRss('https://www.hob…')
#2 wp-includes/template-loader.php(98): include('/home/c2800993/…')
#3 wp-blog-header.php(19): require_once('/home/c2800993/…')
#4 index.php(17): require('/home/c2800993/…')
#5 {main}
thrown
Feef.PHP自体の変更はしておりません。
知識不足で申し訳ありません。
ご教授いただけると大変ありがたいです。
石輪さんより:
RSSフィードが読み込まれてないようですが、RSSが正しく発信されていないのではないでしょうか?
/outdoor/?feed=rss2
/vehicle/?feed=rss2
これらを Firefox で表示すると「XML パースエラー: ドキュメント要素の後ろに不正な文字列があります。」と出ます。
とりあえず、テーマディレクトリにコピーした feed-rss2.php に問題がないか確認された方がよさそうです。
りさんより:
ご回答ありがとうございます。
RSSフィードが読み込まれてないようですが、RSSが正しく発信されていないのではないでしょうか?
→現在はいかがでしょうか。
また、下記は違うものですが入力するとリンクと日付、画像は表示されるのですが、本文とNEWの表示が出ません。
どこか間違っているでしょうか。
get_item_quantity(3);
$rss_items = $rss->get_items( 0, $maxitems );
}
foreach ( $rss_items as $item ) : ?>
<!– 記事へのリンクを表示 –>
<a href="get_permalink(); ? rel="nofollow ugc" rel="nofollow ugc" rel="nofollow ugc">">
<!– 記事の最初の画像を表示 –>
<?php
$first_img = '';
if ( preg_match( '//msi', $item->get_content(), $matches ) ) {
$first_img = $matches[1];
}
?>
<img src="" alt="">
<!– 記事タイトルを表示 –>
get_title();
if(mb_strlen( $title ) > 40 ):
?>
…
description; // 概要(本文)
$description = strip_tags($description);
?>
<!– 投稿日を表示 –>
get_date();
$date = date('Y/m/d',strtotime( $item_date )); ?>
</a>
最近始めたばかりで知識がゼロに近く大変申し訳ないです。
りさんより:
申し訳ありません。
下記です。
get_item_quantity(3);
$rss_items = $rss->get_items( 0, $maxitems );
}
foreach ( $rss_items as $item ) : ?>
<!– 記事へのリンクを表示 –>
<a href="get_permalink(); ? rel="nofollow ugc" rel="nofollow ugc">">
<!– 記事の最初の画像を表示 –>
<?php
$first_img = '';
if ( preg_match( '//msi', $item->get_content(), $matches ) ) {
$first_img = $matches[1];
}
?>
<img src="" alt="">
<!– 記事タイトルを表示 –>
get_title();
if(mb_strlen( $title ) > 40 ):
?>
…
description; // 概要(本文)
$description = strip_tags($description);
?>
<!– 投稿日を表示 –>
get_date();
$date = date('Y/m/d',strtotime( $item_date )); ?>
</a>
りさんより:
申し訳ありません。
コメントに記入しても上手く表示せれないです。
よろしければ、メールにてご連絡ただきたいです。
よろしくお願いいたします。
石輪さんより:
現在 RSS は正常に配信されているようです。
次のご質問ですが、この記事の内容とは異なるもののようですので、お答えはできかねます。
また、メール等での個別のサポートはいたしておりません。
私もサイトを構築する中で様々な問題に遭遇し、その度にいろいろな方のブログ記事等を参考にさせてもらいながら、試行錯誤して日々コーディングを行っています。
全てを熟知しているわけではありませんので、ご了承ください。
ララさんより:
はじめまして、こんにちは。
こちらの記事を参考にコーディングをしているのですが、RSSのURLが複数ある場合は、どのような書き方をすれば宜しいのでしょうか。
アドバイス等頂けましたら幸いです。
よろしくお願い致します。
石輪さんより:
コメントありがとうございます。
この記事で紹介しているコードでは、複数の RSS には対応できないと思います。
調べてみましたら、下記の記事で Feed.php を使用して複数の RSS から書き出す方法が紹介されていますので、参考にされてみてはいかがでしょうか。
「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する – lesson me
http://www.lesson5.info/?p=392
ララさんより:
ご回答、ありがとうございます!
教えて頂いたサイトを参考にさせて頂きます。