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文字)を指定しています。

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

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

初夏のメディアデザイン講座:電子書籍を作ってみよう
AmazonのKindle(キンドル)ダイレクトパブリッシングで個人出版するには? ネットショッピング最大手のアマゾンが行う「Kindleダイレクトパブリッシング」 では、だれでも自分で作った本(電子書籍)を本を出版することができます。この講座では、どうすれば簡単に電子書籍を作ることができるのか、その基…
初夏のメディアデザイン講座:POP作りの基本
スーパーやディスカウントストア、本屋さんや雑貨屋さんの店頭などで目にするPOPは「Point of purchase advertising」の略で、店頭に来たお客さんへの広告媒体です。商品の機能や優れている点、使い方などをわかりやすく、一目で伝わるように作らなくてはなりません。 POPにはさまざまな種類があ…
初夏のメディアデザイン講座:パワーポイントでチラシを作る
プレゼン用ソフトで有名なPowerPoint(パワーポイント)の作図機能はかな~り強力で、上手に使えばグラフィックソフト顔負けの表現ができます。 また、デザインの自由度がワードよりも高いので、パワーポイントを活用することで、デザインソフトのイラストレーターみたいな使い方をすることもできます。 印刷物のデザ…

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;
}