たかなblog

のんびりと色んな情報を発信していきます。

カスタマイズ

WordPressのRSSフィードにアイキャッチ画像を設定する

こんにちは、たかなです。

前回、RSSフィードを活用しよう!という記事を更新しましたが、その中で、WordPressのデフォルトの設定では、RSS情報にアイキャッチ画像は配信されていない、と書きました。

あなたのサイトのRSSフィードが、誰かのRSSリーダーに登録されたとき、表示される画像はアイキャッチではなく、記事の一番初めに使用した画像です。
それもRSS情報の記事本文から最初の画像を拾ってくるため、Wordpressの設定画面で、フィードに「抜粋のみ表示」をしていた場合、画像が拾えず画像がない状態になります。

せっかく記事のイメージとしてアイキャッチを設定しているのですから、RSS情報にもアイキャッチ画像が表示されるように設定しましょう。

WordPressの設定情報を確認する。

カスタマイズの前に、現在のWordpressの設定を確認しましょう。
管理画面の左サイドメニューから「設定」>「表示設定」を選びます。

rss

 

ここで「抜粋のみを表示」にしていることを確認してください。

全文を表示にしてしまうと、RSSで記事の内容全部がわかっちゃうので、RSSリーダーを使っている人はサイトにアクセスしなくても記事の内容が全部読めちゃうことになります。

さらに、記事情報だけをきれいな形で配信するRSSは、ミラーサイトを作るのにうってつけ。
ちょっと知識があれば、RSSを使って簡単にミラーサイトを作ることも可能になてしまいます。

せっかく頑張って書いた記事が誰かに悪用されてしまったり、サイトに訪問してもらえなかったりするのは悲しいですよね。
簡単な設定で防げるので、ここは是非はじめに確認してくださいね。

functions.phpのカスタマイズ

functions.phpに追記してアイキャッチを表示させる方法です。
以下のサイトを参考にしました。というか、ソースについてはそのまま使用しています。ありがとうございます。

WordPress RSSフィードにサムネイル(アイキャッチ)画像を表示させる方法

RSSフィードの出力内容を編集したい場合、the_excerpt_rssとthe_content_feedにフックして処理を追記します。

the_excerpt_rss関数は、RSSに対し、記事の内容から画像やらHTMLの装飾やらを取り除いたRSS用の抜粋記事を出力する関数、
the_content_feed関数は、RSS用にフォーマとされた記事の内容を出力する関数です。

それではソースコードを見ていきましょう。

[php highlight="4"]function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');[/php]

<p>タグで囲ったアイキャッチ画像を、本文の前にくっつけただけです。中身は難しくありませんね。
4行目で画像を取得していますが、ここでサイズ指定することもできます。

[php]get_the_post_thumbnail($post->ID,'thumbnail') //サムネイルのサイズ
get_the_post_thumbnail($post->ID,'medium') //中サイズ
get_the_post_thumbnail($post->ID,'large') //大サイズ
get_the_post_thumbnail($post->ID,'full') //フルサイズ
get_the_post_thumbnail($post->ID,array(250,100)) //指定サイズ[/php]

こちらも上記サイトからの丸パクリですすいませんありがとうございます。
上記加工した後の、feedlyの表示はこんな感じ。

rss4

記事本文の上にアイキャッチで指定した画像が表示されるようになりました!

また、Stinger3を使っていたりして、index画面(記事の一覧画面)で、抜粋記事の最後につく[…]を削除していない方もいらっしゃると思います。
上の画像でもしっかり表示されてますね。

こちらもfunctions.phpにコードを追記して修正します。

[php]function new_excerpt_more($post) {
return '<p><a href="'. get_permalink($post->ID) . '">' . '...続きを読む' . '</a></p>';
}
add_filter('excerpt_more', 'new_excerpt_more');[/php]

これらをfunctions.phpに追記したら、実際にフィードにアクセスして内容を確認してください。
FireFoxとかだと、WordpressのサイトのフィードはサイトURL/feed/で綺麗に見ることができますよ。

feedlyとかのフィードリーダーでは、フィードの読み込みのタイミングがあると思うのですぐに反映されないかも。
ブラウザで見るのが確実だと思いますが、ブラウザですら反映されていない場合はキャッシュの削除などを行ってみてください。

どしてもwebに登録するタイプのフィードリーダーで表示テストをしたい場合は、functions.phpに記載した後に新規で記事を書いて、表示された内容を確認するのが早いと思います。
すでにリーダーに読み込まれてしまった情報は、こちら側からは削除できないみたいなので、RSSの最適化は早めに行ったほうがいいですほんと。

というわけで、最後に設定反映後更新されたfeedlyでの表示イメージと、functions.phpに記載するソースコードの全文を載せておきますのでよければ参考にされてください。

rss5

[php]
// RSSにアイキャッチを出力
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

//[…]を...続きを読むリンクに修正
function new_excerpt_more($post) {
return '<p><a href="'. get_permalink($post->ID) . '">' . '...続きを読む' . '</a></p>';
}
add_filter('excerpt_more', 'new_excerpt_more');[/php]

feedlyでの表示について

上記設定を行い、RSSの出力情報を変更しても、feedlyでは設定の反映がなされません。
過去記事については、今まで読み込んだRSSフィードは再読み込みしてくれないようです。

ですので、変更後のRSSを読み込んだ際にfeedlyでどのように表示されるか確認したい場合は、新規記事を作成して公開してください。

また、feedlyには一覧表示(サムネイル画像と画像タイトル表示)詳細表示など、表示方法を選択することができますが、サムネイル画像についてはfeedlyが独自に記事内から記事を選抜して表示してしまうようで、アイキャッチ含め画像を複数使用している場合、どの画像が表示されるかはわかりません。

未読のフィードをクリックすると表示される詳細画面では、抜粋を指定していれば記事の一部が、全文を指定していれば全文が、今回指定したようにアイキャッチ画像の下に表示されます。

こちらについてはきちんと設定が反映されますので、上記で紹介しているように、アイキャッチ+本文抜粋+続きを読むリンクの設定をすれば、そのように反映してくれますのでご安心ください。

また、すでにfeedlyに読み込まれてしまった過去のfeedの表示方法を変更する(というよりおそらくfeedlyが持っている過去のフィードを破棄させる)方法があれば、教えていただければありがたいです。

同じく、一覧画面(Card表示でも)に表示される画像を指定する方法も、もしあれば教えていただければありがたいです。

 

-カスタマイズ
-, , , ,

おすすめ記事

1
12月目前!クリスマスグッズ、どんなものに関心が集まっているの?

今回気になってまとめてみたのは、「クリスマスの人々の関心」について。 昨年(20 ...

2
年賀状印刷、業者に委託してでオシャレに?自宅で徹底的にこだわる?

年賀状作成は、プロにお願いする時代!? 年賀状のテンプレートが簡単に手に入るよう ...

3
ハロウィン、クリスマスに!とにかく可愛いコスプレ子供服【最新版】

ハロウィンも終わり、クリスマスが楽しみな季節になりました! これからクリスマスパ ...