[WordPress] RSSフィードにアイキャッチ画像を出力する

2019/09/15WordPress本体

最近ではあまり利用されていない気もするRSSですが、Firefoxでもサポートしなくなっちゃいましたし私もTwitterとFacebookに更新情報を流すだけで十分かなと思うところもあって今まで気にした事がありませんでした。

ところが先日ある事情でRSSフィードの内容を確認する機会があって、その時にサムネイルが表示されているサイトとされないサイト、表示されてはいるもののアイキャッチでは無く本文中の画像だったりと結果がバラバラだったので「何が何だか分からない…」という事で調べてみたのが始まりです。

RSSフィードを抜粋のみにすると画像が無くなる

WordPressのデフォルトではRSSフィードにアイキャッチ画像は出力されないはず（ですよね？）なので、サムネイルが表示されている場合は恐らくRSSフィードが全文表示で本文中の最初の画像が設定されているからだと思われます。

ですが、RSSフィードが抜粋のみの場合は本文中にどれだけ画像があろうと文章だけになってしまうので、RSSにサムネイルが表示されない原因はほとんどがこの理由によるものでしょう。

media:thumbnailでは表示してくれない場合も

当サイトで絶賛利用中の無料WordPressテーマ Luxeritasでは、RSSフィードを抜粋のみに設定していてもmedia:thumbnailタグでアイキャッチを150×150のアイコン画像として出力してくれますが、RSSビューアによってはこの画像を表示出来ない場合もあるようです。

RSSにアイキャッチ画像を出力する

という事で、WordPressでRSSにアイキャッチ画像を出力する方法になります。

プラグインを使って設定する方法もありますが、あまりインストールするプラグインの数を増やしたくありませんし、functions.phpにちょちょいと書くだけで出来るので今回はプラグインに頼らない方法で実装する事にしました。

とは言っても失敗すると真っ白画面になる可能性があるファイルなので、慣れていない方はそれなりに注意して作業して下さいね？

方法① get_the_post_thumbnailで取得

サムネイルにフルサイズの画像は要らないだろうという事で、このサンプルではmediumを設定していますが必要に応じて変更していただいて構いません。

/* RSSフィードにアイキャッチ画像を出力する */
function add_rss_thumbnail( $content ) {
	if ( has_post_thumbnail() === true ) {
		global $post;
		$content = '<p>' . get_the_post_thumbnail( $post->ID, 'medium' ) . '</p>' . $content;
	}
	return $content;
}
add_filter( 'the_excerpt_rss', 'add_rss_thumbnail' );

Feedlyにも画像を追加する場合

Feedlyでは普通にサムネイルが表示されるのでここではあえて何もしていませんが、Feedlyにも同様にアイキャッチ画像を出力したい場合は以下のコードを追加して下さい。

/* Feedlyにアイキャッチ画像を追加する */
add_filter( 'the_content_feed', 'add_rss_thumbnail' );

後述するget_the_post_thumbnail_urlを使用する方法でも同様です。

get_the_post_thumbnailの問題点

問題はget_the_post_thumbnailを使うと、imgタグにsrcsetやらsizesといったRSSフィードには不要と思われる属性がやたらとついて長ったらしくなるんですよね…一応これを削除する方法もあるにはあるようなんですが。

/* imgタグのsrcsetとsizesを出力しない */
add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

確かにこれでimgタグからsrcsetとsizesは消えますがサイト全体に影響しますし、それでもまだ不要な属性が残る場合があるので正直この方法はあまりお薦めしません。

方法② get_the_post_thumbnail_urlで取得

こちらはアイキャッチ画像のURLだけ取得して、imgタグには必要最低限の属性しかセットしない方法になります。

基本的にRSSビューアはRSSフィードから拾った情報を元に独自のテンプレートで表示している事が多いと思うので、余分なクラスや属性は無くても特に問題は無いでしょう。とか言って大いに問題ありだったらすいません…

/* RSSフィードにアイキャッチ画像を出力する */
function add_rss_thumbnail( $content ) {
	if ( has_post_thumbnail() === true ) {
		global $post;
		$content = '<p><img src="' . get_the_post_thumbnail_url( $post->ID, 'medium' ) . '" /></p>' . $content;
	}
	return $content;
}
add_filter( 'the_excerpt_rss', 'add_rss_thumbnail' );

このサンプルではimgタグにwidthやheightもなければalt属性もつけてませんので、必要だと思えばお好きなように追加して下さい。

Luxeritas用サンプル

これは私の個人的なカスタマイズ用のコードですが、サムネイルのアスペクト比によって高さがバラバラになるのを防ぐ為、Luxeritasが独自に定義している320×180の横長サムネイル（thumb320）というサイズを設定しています。画像がクロップ（切り取り）されているので確実にそのサイズになるのがグッドです。

あとはついでにwidthとheightを固定値で、altにはエントリー名とサイト名を設定するようにしてみました。出力内容はこんな感じになります。

<img src="アイキャッチ画像のURL" width="320" height="180" alt="エントリー名 | サイト名" />

コードはこちらになりますが、正直あまり自信が無い部分もあるのでご利用の際は自己責任かつ出力結果を執拗なくらい確認した上でお願いしますね？

/* RSSフィードにアイキャッチ画像を出力する */
function add_rss_thumbnail( $content ) {
	if ( has_post_thumbnail() === true ) {
		global $post;
		$content = '<p><img src="' . get_the_post_thumbnail_url( $post->ID, 'thumb320' ) . '" width="320" height="180" alt="' . the_title_attribute( 'echo=0' ) . ' | ' . get_bloginfo() . '" /></p>' . $content;
	}
	return $content;
}
add_filter( 'the_excerpt_rss', 'add_rss_thumbnail' );

RSSにもサムネイルはあった方がいい

RSSフィードを全文表示にしないのは記事の内容を全てまるっとコピペされるリスクがあるというのが主な理由かと思いますが、これを抜粋のみにする事でRSSフィードがテキストだけの味気ないものになっていたとは思いもしませんでした。と言うか今まで本当に気にした事無かったですからね…何年ブログ書いてんのよって話ですけど。

それはまぁいいとして、実は当エントリーの内容はあるトラブルシューティング（トラブルってほどでも無いかも）の解決に繋がるカスタマイズだったんですが、それに関しては次の機会にあらためて書いてみたいと思います。

WordPress本体カスタマイズ,PHP,Luxeritas