WordPressで外部のフィードを表示する方法と、そこにサムネイルを表示する方法

以前、WordPressで外部のフィードを表示する方法として「WordPressで外部RSSフィードを取得し表示する方法」という記事を書きましたが、この記事で紹介している「wp_rss」、「get_rss」は既に非推奨となっています。

今でも前述の記事にはアクセスがあるようなのですが、非推奨の関数を使った方法をずっと紹介しておくのもなんなので、現在のWordPressで外部のフィードを表示する方法をご紹介します。

fetch_feedを使う

「wp_rss」、「get_rss」は非推奨の関数となっており、現在は「fetch_feed」という関数を使用することになっています。サンプルコードとしてオフィシャルのリファレンスから引用します。

<h2><?php _e('Recent news from Some-Other Blog:'); ?></h2>
<?php // RSS フィードを取得します。
include_once(ABSPATH . WPINC . '/feed.php');

// 以下で、指定されたフィードから SimplePie のオブジェクトを取得します。
// つまり、「http://example.com/rss/feed/goes/here」部分に取得したいフィードを入力すると、SimplePieによってRSSが表示されます。
// なお、この部分について array 関数を使い、配列にすれば、複数の RSS フィードを同時に取得して、複数の RSS フィードを１つにまとめて時系列に並べて表示することもできます。
$rss = fetch_feed('http://example.com/rss/feed/goes/here');
if (!is_wp_error( $rss ) ) : // ちゃんとフィードが生成されているかをチェックします。
    // すべてのフィードから最新５件を出力します。
    $maxitems = $rss->get_item_quantity(5); 

    // 0件から始めて指定した件数までの配列を生成します。
    $rss_items = $rss->get_items(0, $maxitems); 
endif;
?>

<ul>
    <?php if ($maxitems == 0) echo '<li>No items.</li>';
    else
    // 取得できた RSS フィードが0件の時は「No items.」と表示します。
    // 取得できた RSS フィードが1件以上あった時は、以下のように RSS のデータを繰り返します。
    // なお、取得したい RSS のデータは、$itemにあるデータであれば、他のデータも表示させることができます。
    // 以下では、取得してきた外部の RSS フィードの記事タイトルを表示して、その記事へのリンクを実現しています。
    foreach ( $rss_items as $item ) : ?>
    <li>
        <a href='<?php echo $item->get_permalink(); ?>'
        title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
        <?php echo $item->get_title(); ?></a>
    </li>
    <?php endforeach; ?>
</ul>

fetch_feed関数は「SimplePie」というフィード解析ライブラリを使用しているそうです。

サムネイル画像を表示する

前述のサンプルコードで外部のフィードを解析し、ページ上に表示することができるのですが、記事のサムネイルを表示させる方法がわからず悩みました。結局、スマートに記事のサムネイルを表示させる方法がわからなかったので、記事中の1枚目の画像をサムネイルとして表示するようにしました。下記のコードは、サムネイルとタイトルにリンクを貼った5件のリストを表示するサンプルです。

include_once( ABSPATH . WPINC . '/feed.php' );
$rss = fetch_feed ( 'http://example.com/rss/feed/goes/here' );
if ( !is_wp_error( $rss ) ) {
	$maxitems = $rss->get_item_quantity( 5 );
	$rss_items = $rss->get_items( 0, $maxitems );
}
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
	<?php foreach ( $rss_items as $item ) : ?>
	<li>
		<a href="<?php echo $item->get_permalink(); ?>">
			<?php
			$first_img = '';
			// 記事中の1枚目の画像を取得
			if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches ) ) {
				$first_img = $matches[1];
			}
			?>
			<?php if ( !empty( $first_img ) ) : ?>
			<span class="thumbnail">
				<img src="<?php echo esc_attr( $first_img ); ?>" alt="" />
			</span>
			<?php endif; ?>
			<?php echo $item->get_title(); ?>
		</a>
	</li>
	<?php endforeach; ?>
</ul>
<?php endif; ?>

よくよく考えればフィード中にサムネイルを示す要素が入っていないと、サムネイル画像を取得できないよなと…。入っていたとしても取得する方法があるのかはわかりませんが。

記事中の1枚目の画像ということで、サムネイルにするには大きすぎる画像が普通に返ってくるので、CSSなどで上手くデザインを調整する必要があります。