WordPress:RSSフィードを投稿や固定ページに読み込むショートコード

ワードプレスのGutenbergエディタの編集単位――ブロック――にはたくさんの種類があります。埋め込みカテゴリーだと、使うかどうかは別として30種類以上のウェブサービスを埋め込むことができるようになっています。

RSSフィードを埋め込むには?

外部サイトの更新情報をRSSフィードを取り込んで表示するために、ワードプレスでは、RSSフィードを表示させるウィジェットが用意されています。
目的のサイトのRSSフィードのアドレスさえわかれば、簡単に更新情報を埋め込むことができます。

投稿や固定ページではフィードが埋め込めない

ところが、投稿や固定ページの中にRSSフィードを埋め込もうとすると、できそうでできません。外部のRSS/Atomフィードを埋め込むブロックが無いのでした。

ワードプレスにGutenbergエディタが導入される前のバージョンでもサイドバーなどのウィジェットにRSSフィードを埋め込むことはできましたから、簡単にブロックとして追加できるはずなのですが・・・・・
ようやくWordPress 5.2でRSSブロックが追加されるようです。

・・・・
いくつかの新しいブロックを追加しました。
RSSブロック

・・・・

WordPress 5.2 ベータ1

ショートコードでRSSフィードを埋め込もう

それまでのつなぎとして、RSSフィードをショートコードで埋め込めるようにしてみました。
functions.phpにコードを追加して、ショートコードを呼び出せるようにします。

/* RSSフィードショートコード */
function rss_func( $atts ) {
	include_once( ABSPATH . WPINC . '/feed.php' );

	$blog_rss = shortcode_atts( array(
		'url' => 'https://ja.wordpress.org/feed/',
		'num' => '5',
		'img' => 'https://s.w.org/style/images/wporg-logo.svg'),
	$atts );

	$feed_url = $blog_rss['url'];
	$feed_num = $blog_rss['num'];
	$img_url = $blog_rss['img'];
	$feed_content = '';
	$feed_contents = '';

	$rss = fetch_feed( $feed_url );
	if ( !is_wp_error( $rss ) ) :
		$maxitems = $rss->get_item_quantity( $feed_num );
		$rss_items = $rss->get_items( 0, $maxitems );

		foreach ( $rss_items as $item ) :
			$first_img = '';
			if ( preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches )) $first_img = $matches[1];
			if ( !empty( $first_img ) ) :
				$feed_img = esc_attr( $first_img );
			else:
				$feed_img = $img_url;
			endif;
			$feed_url = $item->get_permalink();
			$feed_title = $item->get_title();
			$feed_date = $item->get_date('Y.m.d');
			$feed_text = mb_substr(strip_tags($item->get_content()), 0, 160);
			
			$feed_content .= '<a rel="noopener" href="' . $feed_url . '" title="' . $feed_title . '" class="blogcard-wrap" target="_blank">';
			$feed_content .= '<div class="blogcard">';
			$feed_content .= '<figure class="blogcard-thumbnail">';
			$feed_content .= '<img src="' . $feed_img . '" class="blogcard-thumb-image" alt="">';
			$feed_content .= '</figure>';
			$feed_content .= '<div class="blogcard-content">';
			$feed_content .= '<div class="blogcard-title">' . $feed_title . '</div>';
			$feed_content .= '<div class="blogcard-abbreviation">' . $feed_text . '…</div>';
			$feed_content .= '</div>';
			$feed_content .= '<div class="blogcard-post-date">' . $feed_date . '</div>';
			$feed_content .= '</div>';
			$feed_content .= '</a>';
		endforeach;
	else:
		$feed_content = '<p>RSSフィードを取得できません</p>';
	endif;

	$feed_contents = '<div>' . $feed_content . '</div>';

return "{$feed_contents}";

}
add_shortcode( 'rss', 'rss_func' );

ショートコードは、RSSフィードのアドレス、フィードの取得数、デフォルト (フィードが画像を含んでいなかった時) の画像へのアドレスを引数として指定すると、RSSフィードを読み込んでブログカード形式で表示します。 引数を省略するとデフォルトで指定したアドレス、取得数、画像が使われます。
上記の例では
6 ’url’ => ‘https://ja.wordpress.org/feed/’,
7 ’num’ => ‘5’,
8 ’img’ => ‘https://s.w.org/style/images/wporg-logo.svg’
が使われます。
33 mb_substr(strip_tags($item->get_content()), 0, 160)
のところで本文の抜粋文字数(160文字)を指定しています。

ショートコードの呼び出し

呼び出しは、ショートコードブロックにショートコードを書き込みます。

仙台文庫e「平成最後の週末だ!」本の無料キャンペーン
平成を締めくくるささやかなプレゼント Amazon Kindleストアから販売中の電子書籍「目からウロコ! マヤマ式デザイン・レイアウト: 〜市民やNPO、みんなの情報発信をサポートするテクニックを手に入れる!〜 」(仙台文庫e) Kindle版を無料でお読みいただけます。 無料キャンペーンの期間 …
WordPress:RSSフィードを投稿や固定ページに読み込むショートコード
ワードプレスのGutenbergエディタの編集単位――ブロック――にはたくさんの種類があります。埋め込みカテゴリーだと、使うかどうかは別として30種類以上のウェブサービスを埋め込むことができるようになっています。 RSSフィードを埋め込むには? 外部サイトの更新情報をRSSフィードを取り込んで表示す…
Amazonプライムになりすますフィッシングメール
いっこうに減らないフィッシングメール。今回はAmazonプライムの更新解除を知らせるようなメールです。 件名:[緊急の通知] Amazoneプライムの自動更新設定を解除いたしましたタイトルに緊急の通知などと入れることで受信者を慌てさせようというのか・・・ 送信者:”Amazon更新する 〇 …

RSSフィード表示用スタイルシートの例

.blogcard-wrap {
    margin: 24px auto;
    padding: 0;
    width: 90%;
    background-color: #fff;
}
.blogcard {
    padding: 1.4% 2% 1.8%;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 1.3;
    position: relative;
}
.blogcard-thumbnail {
    float: left;
    margin-top: 3px;
    width: 160px;
}
.blogcard-thumbnail img {
    width: 100%;
}
.blogcard-content {
    margin-left: 170px;
    max-height: 140px;
    min-height: 100px;
    overflow: hidden;
}
.blogcard-title {
    font-weight: bold;
}
.blogcard-abbreviation {
    font-size: 0.8em;
}
.blogcard-post-date {
	text-align: right;
}