DigiPress

Highly Flexible WordPress Theme

メニュー

WordPressのRSSフィードに投稿サムネイルをXML要素として追加する方法

WordPressのRSSフィードに投稿サムネイルをXML要素として追加する方法

WordPressプラグインやテーマのサブメニューとして「アドオン」メニューを追加し、アドオンのページを開くと、利用可能な拡張機能の一覧が表示され、ユーザーは一覧からクリックして気になったアドオンの詳細ページに直接参照し、プラグイン(プラグイン)を入手できる仕組みを作りたいと考えていたのですが、アドオンのページで表示するアイテムの情報(プラグイン名、URL、概要、サムネイルなど)は、別途jsonデータを用意してAPI経由で取得してHTMLに落とし込んで表示させる場合、プラグインが追加されるたびにjsonデータも更新しなければいけないため面倒です。

提供中のDigiPressテーマでは、専用アドオンは以下のカテゴリーにまとめられているため、このカテゴリーページの情報を利用できれば、別途APIなど用意しなくてもプラグインを追加(記事を投稿)するだけでアドオンページの一覧も自動的に更新できそうです。

そこで思いついたのが、WordPressが出力するカテゴリーページのRSSフィードを利用することです。
RSSフィードを表示するには、パーマリンクの後に「/feed」を付けると参照できます。

例えば上記専用アドオンカテゴリーのRSSフィードのURLは、https://digipress.digi-state.com/extensions/feed/ となります。

しかし、WordPressが出力するこのRSSフィードには、投稿サムネイル(アイキャッチ画像)のデータがありません。
Webで適当に調べてみると、<description> の中に img タグを強引に挿入する方法は多数ありましたが、これでは画像URLをXMLの要素として取得できず、RSSの構文的にも問題がありそうです。

そこで、このRSSフィードの各記事アイテム(<item>)内に投稿サムネイルのXML要素を追加する方法を考えてみます。

RSSの仕様では、<image> 要素は <channel> 要素内にしか定義できないため、各記事コンテンツの情報が入る <item> 要素には含めることができません。

調べてみると、<item> 要素内には、<media:content> 要素を追加すれば、投稿に関するメディアの情報を持たせることができそうです。

Media RSS のネームスペースは、http://search.yahoo.com/mrss/ で定義されているので、xmlns:media=”http://search.yahoo.com/mrss/” という属性を加えるようにします。

これらを考慮して、WordPressのRSSフィードに各投稿のアイキャッチ画像をXML要素として追加するには、テーマの function.php に以下のコードを追加します。

RSSに投稿サムネイルの要素を追加するコード

function insert_thumbnail_element_to_feed(){
	global $post;

	if ( !has_post_thumbnail( $post->ID ) ) return;

	$thumbnail_ID = get_post_thumbnail_id( $post->ID );
	$thumbnail = wp_get_attachment_image_src( $thumbnail_ID, 'medium' );  // 第2引数は取得するサムネイルサイズ(thumbnail, medium, large, full)
	$output = '<media:content xmlns:media="http://search.yahoo.com/mrss/" medium="image" type="image/jpeg"';
	$output .= ' url="'. $thumbnail[0] .'"';
	$output .= ' width="'. $thumbnail[1] .'"';
	$output .= ' height="'. $thumbnail[2] .'"';
	$output .= ' />';

	echo $output;
}
add_action('rss2_item', 'insert_thumbnail_element_to_feed');

RSSフィードの item 要素にオリジナルの要素を追加するには、rss2_item というアクションフック名を利用します。

これで、RSSフィードを参照すると、item 要素に <media:content> 要素が挿入されているのが確認できます。

RSSフィード出力例

<item>
<title>記事タイトル</title>
<link>https://記事のURL</link>
<pubDate>Thu, 1 Sep 2018 12:00:00 +0000</pubDate>
<dc:creator><![CDATA[寄稿者名]]></dc:creator>
<category><![CDATA[タグ]]></category>
<guid isPermaLink="false">http://ネイティブパーマリンク</guid>
<description><![CDATA[記事の概要...]]></description>
<media:content medium="image" type="image/jpeg" url="https://投稿サムネイル画像のURL.jpg" width="630" height="345" xmlns:media="http://search.yahoo.com/mrss/"/>
</item>

W3CのFeed Validationでのチェックもパスしました!

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly