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 フィードからアイキャッチ画像を表示することができました。