Web制作についてのメモブログimmature design

先日、自分がいいと思ったサイトを掲載していくサイトW-Clipを公開しました。
そのサイトからRSSをこのブログに表示する際に、画像も表示するようにしたメモです。

WordPressのRSSに画像を追加

functions.phpに下記を追加

function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

これでサイトのRSSに画像が追加されます。
W-Clipでは、画像はアイキャッチを使用しています。

RSSの取得と出力

次に、RSSを取得します。

<?php // RSS取得
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('rssを取得したいサイトのfeedURL');
if (!is_wp_error( $rss ) ) : 
    $maxitems = $rss->get_item_quantity(5); 
    $rss_items = $rss->get_items(0, $maxitems); 
endif;
?>
 
<ul>
    <?php if ($maxitems == 0) echo '<li>No items.</li>';//RSSデータが取得できない時
    else
    foreach ( $rss_items as $item ) : ?>// RSSデータ配列
    <li>
        <a href='<?php echo $item->get_permalink(); ?>'><?php echo $item->get_title(); ?></a>
    </li>
    <?php endforeach; ?>
</ul>

画像の取得と出力

上記でRSSを表示すると、タイトルのみが表示されていると思います。
ここに画像を追加のは、記事の中の1枚目の画像をひろっています。

<?php
$first_img = '';
if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches ) ) {
$first_img = $matches[1];
}
?>

上記のコードをまとめるとこのような感じです。

<?php
include_once(ABSPATH . WPINC . '/feed.php');

$rss = fetch_feed('rssを取得したいサイトのfeedURL');
if (!is_wp_error( $rss ) ) : 
$maxitems = $rss->get_item_quantity(5); 
$rss_items = $rss->get_items(0, $maxitems); 
endif;
?>

<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
foreach ( $rss_items as $item ) : ?>
<a href='<?php echo $item->get_permalink(); ?>'><?php echo $item->get_title(); ?></a>
<?php
$first_img = '';
if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches ) ) {
$first_img = $matches[1];
}
?>
<?php if ( !empty( $first_img ) ) : ?><img src="<?php echo esc_attr( $first_img ); ?>" alt="" style="width:300px;height:auto;"><?php endif; ?>
<?php endforeach; ?>

細かなコードは省いていますが、これにこのブログでは、以前紹介しました、「CarouFredSel」を使用して表示しています。
参考サイト:Show Post Thumbnails in Feeds

ページTOPへ