
最近、クライアントからこんな依頼を受けました。
「複数のWordPressブログの投稿を一覧で表示して、しかも「日付」「画像」「サイト名」「記事タイトル」をすべて新着順に並べたい」というもの。
正直、これには少し手こずりました。
RSSフィードを使って他のWordPressサイトの記事を読み込む経験はありましたが、これだけ多くの要素を一括表示し、かつ整ったレイアウトにまとめるとなると話は別です。
特に“サイト名”の取得でハマりました。ネットで調べても情報が少なく、英語の開発フォーラムを探し回ってようやく辿り着いた方法です。
今回はそのときに実装したPHPコードと、構築時に注意すべきポイントを備忘録として整理しておきます。
複数ブログの日付・画像・サイト名・タイトルを取得する方法
必要な準備と前提
- WordPress環境でPHPが編集できる(例:テーマファイルやカスタムテンプレート)
- 対象のブログがRSS2.0形式のフィードを出力している
- SimplePieを利用できる(WordPressのfetch_feed()関数)
実装サンプルコード(PHP)
以下は、複数RSSフィードを読み込み、日付順に並べて「日付・画像・サイト名・記事タイトル」を表示するコードです。
<?php
include_once(ABSPATH . WPINC . '/rss.php');
define('MAGPIE_OUTPUT_ENCODING' , 'UTF-8');
define('MAGPIE_CACHE_DIR' , './cache');
define('MAGPIE_FETCH_TIME_OUT', 30);
define('MAGPIE_CACHE_AGE', 60*60);
//フィードのURI
$rss_arr = array(
'https://www.webernote.net/?feed=rss2',
'https://www.webernote2.net/?feed=rss2',
'https://www.webernote3.net/?feed=rss2'
);
$rss = fetch_feed($rss_arr);
if (!is_wp_error( $rss ) ) :
// すべてのフィードから最新5件を出力
$maxitems = $rss->get_item_quantity(5);
// 0件から始めて指定した件数までの配列を生成
$rss_items = $rss->get_items(0, $maxitems);
endif;
?>
<ol class="clearfix">
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
//RSSフィードが0件の時は「No items.」と表示
//RSSフィードが1件以上ある時は、以下のようにRSSのデータを繰り返し
//取得RSSのデータは、$itemにあるデータであれば、他のデータも表示可
foreach ( $rss_items as $item ) : ?>
<li class="clearfix">
<?php
// ブログの画像を取得
$first_img = '';
if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches ) ) {
$first_img = $matches[1];
}
?>
<?php if ( !empty( $first_img ) ) : ?>
<a href='<?php echo $item->get_permalink(); ?>' class="image" target="_blank">
<img src="<?php echo esc_attr( $first_img ); ?>" alt="" style="width:80px;height:60px;object-fit:cover;">
</a>
<?php else : ?>
<span class="image">
<img src="<?php echo esc_url ( get_template_directory_uri() ); ?>/img/noimg.png" alt="no image">
</span>
<?php endif; ?>
<div class="info">
<p class="date"><?php echo $item->get_date("Y.n.j"); // 日付 ?></p>
<h4 class="title"><a href='<?php echo $item->get_permalink(); ?>' target="_blank">
[<?php echo $item->get_feed()->get_title(); // サイト名 ?>] <?php echo $item->get_title(); // 記事タイトル ?></a></h4>
</div>
</li>
<?php endforeach; ?>
</ol>
サイト名の表示方法がググっても全然出てこなくて地味に苦労しました(汗)クラス名は私が使ったコードのままなので、適宜変更してください。
参考サイト:WordPressで複数RSSを日付順に表示する
RSSフィードのキャッシュを無効化する方法
WordPressで生成されたRSSフィードは一定時間キャッシュされるため、ブラウザの更新をしてもすぐに反映されません。キャッシュを無効化するとサーバーの負荷や表示スピードに影響が出るので、通常はそのままでもいいと思いますが、動作確認時には無効にした方が便利です。
RSSフィードのキャッシュを無効化するにはfunctions.phpに下記のフィルタ用コードを挿入します。
function do_not_cache_feeds(&$feed) {
$feed->enable_cache(false);
}
add_action( 'wp_feed_options', 'do_not_cache_feeds' );
functions.phpはゴミが入ったり記述を間違えると、サイト全体が表示されなくなる場合がありますでご注意ください。
複数ブログの新着投稿を一括表示する方法術
複数のWordPressサイトの新着情報を一画面で一覧表示する——一見すると難しそうな仕組みですが、RSSフィードを活用すれば、思いのほかシンプルに実現できます。
しかも「日付」「画像」「サイト名」「記事タイトル」といった情報まで一括で引き出せるため、ニュースポータルや企業グループ内メディアの統合など、さまざまな場面で応用可能です。
今回紹介したコードは、構成の自由度も高く、CSSを工夫すれば見た目も整えられます。必要に応じて、カテゴリやタグでフィルタリングしたり、件数を増減したり、Ajax化するなどの拡張も可能です。
WordPressの柔軟性とPHPの実行力を組み合わせれば、「やってみたら意外とできた」が叶います。ぜひ案件や自社サイトの改善に活かしてみてください。
はじめまして。
初めてコードで画像RSSリンクのカスタマイズをお見かけしたのでお声がけさせていただきました。
質問なのですが
この画像付きRSSリンクをコテリンや忍者レコメンドのような見た目で使うにはどのようにすればよろしいでしょうか?
ワードプレスでヘッダーやフッター部分に設置してみたいのですが
なかなか上手くいかなくて…
こんにちは。
コテリン?や忍者レコメンドは使ったことがないので詳しくはわかりませんが、見た目の変更であれば吐き出されたソースを見ながらCSSで整形するのが一般的でしょうか。