WordPress｜外部サイトのRSSを読み込んで表示させる方法

外部サイトの更新情報を、自分のWordpressで表示する際に、毎回手打ちだと大変ですよね。

自分のサイトや、Wordpressサイトの更新情報なら表示は簡単ですが、Wordpress以外のサイトだとRSSを使ったものが主流です。

今回はそのRSSを利用して、Wordpress内に外部サイトのタイトルと情報を表示させるPHPを作成していきます。

注意：RSSのバージョンによって画像が表示される場合と、されない場合があります。

RSSとは

RSSとは「Really Simple Syndication」の略語で、各種Webサイトの更新情報を配信する文章フォーマットの一つです。

お気に入りのサイトをRSSをRSSリーダーに登録しておけば、わざわざそのサイトに行かなくても更新情報や新着情報チェックできます。

自分の好きなブログやサイトの更新をRSSリーダーを使って、自分好みに表示させて情報収集を効率的に行う、というものが一般的な使われ方です。

RSSのフィードを検索する

RSSフィード取得・検出ツール - BeRSS.com

berss.com

サイトのRSSを検索するには、上のサイトを使用すると簡単に見つけ出せます。

赤枠内に検索したいサイトのURLを入力して「自動検出スタート」をクリックします。

するとページ下部にRSSフィードが検出されます。

コピーしたリンクへ移動すると、RSSが表示されます。このデータを利用して、外部サイトの更新情報を表示させます。

RSSをWordpressでリスト表示させる

WordPressでリスト表示させるにはPHPを使用します。PHPを呼び出すには下のリンクを参照してください。

http://innervisions.info/wordpress/shortcord-php/

innervisions.info

以下のコードをコピペしたPHPデータを作成します。

<?php
include_once( ABSPATH . WPINC . '/feed.php' );
$rss = fetch_feed( 'http://rss_url_here/atom.xml' ); // ここにURLを入力する
if ( !is_wp_error( $rss ) ) {
$maxitems = $rss->get_item_quantity( 5 );
$rss_items = $rss->get_items( 0, $maxitems );
}
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
<?php if ($maxitems == 0) echo '<li>RSSデータがありませんでした.</li>';
else
foreach ( $rss_items as $item ) : ?>
<li>
<a href="<?php echo $item->get_permalink(); ?>">
<?php echo $item->get_title();// タイトル ?>
</a>
</li>
<li>
<span class="date">
<?php echo $item->get_date('Y.m.d');// 日付 ?>
</span>
</li>
<li>
<span class="desc">
<?php echo mb_substr(strip_tags($item->get_description()), 0, 50);// 抜粋記事の文字数を指定 ?> ...
<a href='<?php echo $item->get_permalink(); ?>' target="_blank">続きを読む</a>
</span>
</li>

<?php endforeach; ?>

</ul>
<?php endif; ?>

３行目「$rss = fetch_feed(‘ http://rss_url_here/atom.xml‘ ); 」に先程取得したRSSフィードのURLを入力します。

上記のPHPを読み込むと、画像のようにリスト化されたデータが出力されます。

記事の最初に表示される画像を取得する

リスト表示させたものだと味気ないので、画像を表示させます。

<li><!-- 記事中の1枚目の画像を取得-->
<a href="<?php echo $item->get_permalink(); ?>">
<?php
$first_img = '';
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; ?>
</a>
</li><!-- 記事中の1枚目の画像を取得終了-->

上記のコードを途中に挟んで画像を表示させます。ページの最初に表示される画像を取得します。

組み合わせたPHP

上記の１枚目の画像を表示するPHPとRSSを読み込むPHPを合体させたものが、以下のコードです。コピーペーストして、PHPを読み込んでみて下さい。

<?php
include_once( ABSPATH . WPINC . '/feed.php' );
$rss = fetch_feed( 'http://rss_url_here/atom.xml' ); // ここにURLを入力する
if ( !is_wp_error( $rss ) ) {
$maxitems = $rss->get_item_quantity( 5 );
$rss_items = $rss->get_items( 0, $maxitems );
}
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
<?php if ($maxitems == 0) echo '<li>RSSデータがありませんでした.</li>';
else
foreach ( $rss_items as $item ) : ?>
<li><!-- 記事中の1枚目の画像を取得-->
<a href="<?php echo $item->get_permalink(); ?>">
<?php
$first_img = '';
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; ?>
</a>
</li><!-- 記事中の1枚目の画像を取得終了-->
<li>
<a href="<?php echo $item->get_permalink(); ?>">
<?php echo $item->get_title();// タイトル ?>
</a>
</li>
<li>
<span class="date">
<?php echo $item->get_date('Y.m.d');// 日付 ?>
</span>
</li>
<li>
<span class="desc">
<?php echo mb_substr(strip_tags($item->get_description()), 0, 50);// 抜粋記事の文字数を指定 ?> ...
<a href='<?php echo $item->get_permalink(); ?>' target="_blank">続きを読む</a>
</span>
</li>

<?php endforeach; ?>

</ul>
<?php endif; ?>

上記のコードを使用すると、上図のようなリスト表示になります。

画像がない場合、アイコンが読み込まれることがあります。

RSSのバージョンによって画像が表示される場合と、されない場合があります。

まとめ

外部サイトの更新情報を取得するには、RSS情報を取得して表示させる方法が主流です。

紹介した方法ではリスト表示されただけなので、あまり見栄えが良くありません。

CSSのクラスを追加して、デザインしていけば色々な表示方法ができると思いますので、またご紹介したいと思います。