rssショートコードのサムネイルにアイキャッチ画像を表示する方法

はじめに

rssショートコードを使用すると、他サイトの更新情報（RSS）を、new_listショートコードと同じカード形式で表示できます（図1参照）。

ただし、RSSにはOGPとは異なりアイキャッチ画像（og:image）は含まれていません。
そのためCocoonでは、本文内の最初の画像を取得し、カードのサムネイルとして表示しています。

そこで、OGPの画像（og:image）を取得して、サムネイルとして表示します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part_args__tmp/rss-card', function ($args, $name) {
  $url = isset($args['url']) ? (string) $args['url'] : '';

  if (empty($url)) {
    return $args;
  }

  // キャッシュデータを取得
  $cache_key = 'rss_ogp_image_' . md5($url);
  $img_url = get_transient($cache_key);

  // キャッシュが存在する場合
  if ($img_url !== false) {
    $args['img'] = esc_url((string) $img_url);
    return $args;
  }

  $no_image = defined('NO_IMAGE_RSS') ? NO_IMAGE_RSS : '';

  // 自サイトのURLの場合
  if (strpos($url, home_url()) === 0) {
    $post_id = url_to_postid($url);
    $img_url = ($post_id && has_post_thumbnail($post_id)) ? get_the_post_thumbnail_url($post_id, 'medium') : $no_image;
  } else {
    // 外部サイトの場合はOGPから取得
    if (class_exists('OpenGraphGetter')) {
      $graph = OpenGraphGetter::fetch($url);
      $img_url = !empty($graph->image) ? (string) $graph->image : $no_image;
    } else {
      $img_url = $no_image;
    }
  }

  // キャッシュに保存
  $cache_minute = isset($args['cache_minute']) ? (int) $args['cache_minute'] : 60;
  set_transient($cache_key, $img_url, 60 * $cache_minute);

  $args['img'] = esc_url((string) $img_url);

  return $args;
}, 10, 2);

注意点

RSSデータの投稿時刻（<pubDate>）は UTC基準で記録されています。
そのため、実際の投稿時刻とは異なり、日本のサイトの場合は 9時間遅れて表示されます。
この影響を考慮すると、日付を非表示にするのが適切かもしれません。

また、スニペットはRSSデータの本文（<description>）から一定の文字数分を表示するため、途中で途切れてしまうことがあります。

参考：ブログカードとして表示する方法

RSSと同様に、更新情報をブログカードとして表示します。
これにより、OGP情報を利用して、サムネイルだけでなくメタディスクリプションも反映できます。
さらに、サイトのドメインを表示することで、外部サイトであることをユーザーに明示できます。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/rss-card', function ($content, $name, $args) {
  return do_shortcode('[blogcard url="' . esc_url($args['url']) . '"]');
}, 10, 3);

さいごに

今回紹介した方法を使えば、OGP情報を活用してサムネイルとメタディスクリプションを反映させることができます。
さらに、独自にog:imageを取得することで、サムネイルの画像をより魅力的に表示することができます。
これにより、ユーザーにとって視覚的にわかりやすく、魅力的な更新情報を提供できます。