WordPressプラグインやテーマのサブメニューとして「アドオン」メニューを追加し、アドオンのページを開くと、利用可能な拡張機能の一覧が表示され、ユーザーは一覧からクリックして気になったアドオンの詳細ページに直接参照し、プラグイン(プラグイン)を入手できる仕組みを作りたいと考えていたのですが、アドオンのページで表示するアイテムの情報(プラグイン名、URL、概要、サムネイルなど)は、別途jsonデータを用意してAPI経由で取得してHTMLに落とし込んで表示させる場合、プラグインが追加されるたびにjsonデータも更新しなければいけないため面倒です。
提供中のDigiPressテーマでは、専用アドオンは以下のカテゴリーにまとめられているため、このカテゴリーページの情報を利用できれば、別途APIなど用意しなくてもプラグインを追加(記事を投稿)するだけでアドオンページの一覧も自動的に更新できそうです。
そこで思いついたのが、WordPressが出力するカテゴリーページのRSSフィードを利用することです。
RSSフィードを表示するには、パーマリンクの後に「/feed」を付けると参照できます。
例えば上記専用アドオンカテゴリーのRSSフィードのURLは、https://digipress.info/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> 要素が挿入されているのが確認できます。
<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でのチェックもパスしました！