フィードにサムネイル画像を追加する

説明

WordPressが出力するの標準のフィードには、各投稿のサムネイル画像の情報が含まれていない。ネットで検索してみるといくつかの方法があることがわかったので、その中から2つ試してみた。

enclosure要素を使う

WordPress標準のフィード(RSS 2.0準拠)で対応する場合はenclosure要素を使う方法がある。enclosure要素は標準では使用されておらず、'rss2_item'アクションを使うことで追加できる。ソースコードは以下の通り。

add_action( 'rss2_item', 'rss2_item_thumbnail' );

function rss2_item_thumbnail() {
	if ( has_post_thumbnail() ) {
		global $post;
		$thumbnail_id = get_post_thumbnail_id( $post->ID );
		$meta         = wp_get_attachment_metadata( $thumbnail_id );
		$image_url    = wp_get_attachment_url( $thumbnail_id );
		$image_url    = str_replace( wp_basename( $image_url ), wp_basename( $meta['sizes']['thumbnail']['file'] ), $image_url );
		$image_file   = get_attached_file( $thumbnail_id );
		$image_file   = str_replace( wp_basename( $image_file ), wp_basename( $meta['sizes']['thumbnail']['file'] ), $image_file );
		$image_size   = filesize( $image_file );
?>
<enclosure url="<?php echo esc_url( $image_url ); ?>" length="<?php echo esc_attr( $image_size ); ?>" type="<?php echo esc_attr( $meta['sizes']['thumbnail']['mime-type'] ); ?>" />
<?php
	}
}

上記を適用したフィードのitem要素には、次のようなenclosure要素が追加される。

<enclosure url="http://localhost/wp-content/uploads/2022/10/img202210-150x150.jpg" length="6059" type="image/jpeg" />

enclosure要素にはurl(HTTP URL)、length(ファイルサイズ)、type(MIMEタイプ)の3属性があり、仕様上これらすべては必須である。

このフィードを読み込む側(WordPress)は、(ザックリ)次のような感じになる。

$rss = fetch_feed( 'http://localhost/feed/' );
$list_posts = [];
if ( ! is_wp_error( $rss ) ) {
	$list_posts = $rss->get_items( 0, $rss->get_item_quantity( 10 ) );
}
if ( ! empty( $list_posts ) ) {
	foreach ( $list_posts as $item ) {
		var_dump( $item->get_enclosure() );
	}
}

enclosure要素のデータはget_enclosureメソッドを使って取得できる。取得したSimplePie_Enclosureオブジェクトには多くのプロパティがあり、関連するものは次の通り(抜粋)。

object(SimplePie_Enclosure)#5121 (27) {
  ["length"]=>
  int(6059)
  ["link"]=>
  string(64) "http://localhost/wp-content/uploads/2020/05/IMG_0207-150x150.jpg"
  ["thumbnails"]=>
  NULL
  ["type"]=>
  string(10) "image/jpeg"
  :
}

linkプロパティにはurl属性値が、lengthとtypeプロパティには同名の属性値が格納されている。注意する点としては、フィード内にenclosure要素がない場合でもget_enclosureメソッドはエラーにならず、データの入っていないSimplePie_Enclosureオブジェクトを取得できる。enclosure要素の有無は、linkプロパティの値で確認する必要がある。

media:thumbnail要素を使う

今回紹介するもう1つはmedia:thumbnail要素を使う方法である。この対応には'rss2_item'アクションのほかに'rss2_ns'アクションを使用する。

add_action( 'rss2_ns', 'rss2_ns_thumbnail' );

function rss2_ns_thumbnail() {
?>
xmlns:media="http://search.yahoo.com/mrss/"
<?php
}

add_action( 'rss2_item', 'rss2_item_thumbnail' );

function rss2_item_thumbnail() {
	if ( has_post_thumbnail() ) {
		global $post;
		$thumbnail_id = get_post_thumbnail_id( $post->ID );
		$thumbnail    = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );
		if ( isset( $thumbnail[0] ) && $thumbnail[0] ) {
?>
<media:thumbnail url="<?php echo esc_url( $thumbnail[0] ); ?>" width="<?php echo esc_attr( $thumbnail[1] ); ?>" height="<?php echo esc_attr( $thumbnail[2] ); ?>" />
<?php
		}
	}
}

上記を適用したフィードのitem要素には、次のようなmedia:thumbnail要素が追加される。

<media:thumbnail url="http://localhost/wp-content/uploads/2022/10/img202210-150x150.jpg" width="150" height="150" />

media:thumbnail要素のurl属性は必須、heightとwidth属性はオプションとなる(このほかにtime属性がある)。

get_enclosureメソッドを使ってこのフィードを読み込んだ場合、linkプロパティはNULLになり、thumbnailsプロパティの配列にサムネイル画像のURLが格納される。

object(SimplePie_Enclosure)#5121 (27) {
  ["length"]=>
  NULL
  ["link"]=>
  NULL
  ["thumbnails"]=>
  array(1) {
    [0]=>
    string(64) "http://localhost/wp-content/uploads/2022/10/img202210-150x150.jpg"
  }
  ["type"]=>
  NULL
  :
}

またget_enclosureメソッドの代わりにget_thumbnailメソッドも使用できる。

foreach ( $list_posts as $item ) {
	var_dump( $item->get_thumbnail() );
}

get_thumbnailメソッドで取得した内容は次のような連想配列となる。

array(3) {
  ["url"]=>
  string(64) "http://localhost/wp-content/uploads/2022/10/img202210-150x150.jpg"
  ["width"]=>
  string(3) "150"
  ["height"]=>
  string(3) "150"
}

ご覧の通り、get_thumbnailメソッドではurl属性の値だけでなく、widthとheight属性の値も取得できている。ただし注意しなければならないのは、get_thumbnailメソッドが使用できるのはWordPress 5.5以降ということ。WordPressのバージョンに応じてget_thumbnailメソッドとget_enclosureメソッドを使い分けることになる。


今回はフィードのitem要素にenclosure要素またはmedia:thumbnail要素を追加し、サムネイル画像のURLを埋め込んでみた。description要素内に入れ込む方法もあるようだが、まあこの2つのどちらかでよいのではないだろうか。


最終更新 : 2022年11月07日 10:16


お勧め

the_modified_author(2019年10月17日 更新)

void the_modified_author()
更新者の表示名を表示する。

wp_assign_widget_to_sidebar(2021年7月29日 更新)

void wp_assign_widget_to_sidebar( string $widget_id, string $sidebar_id )
ウィジェットをサイドバーに配置する。

get_comment_ID(2018年5月27日 更新)

int get_comment_ID( )
現在のコメントのIDを取得する。

term_is_ancestor_of(2019年3月15日 更新)

bool term_is_ancestor_of( int | object $term1, int | object $term2, string $taxonomy )
タームが子孫関係か調べる。

wp_get_custom_css_post(2019年11月14日 更新)

WP_Post wp_get_custom_css_post( [ string $stylesheet = '' ] )
カスタマイザーで追加したCSS情報を取得する。