4月 2016 - うぇぶのきわみ

私自信はWordpressでアイキャッチ画像をFeedで出力するように設定していたのですが、 Feedlyの更新情報を見てもなぜだか空欄ばかり。 今回はFeedlyでWordpressの画像がうまく表示されない時の対処方法を調べたので記載しておきます。 結論を先に言うと、Feedlyに安定して画像を表示するには幅450px以上の画像を表示させるしかないようです。 Wordpressのfunctions.phpに表示する方法は色々なサイトで紹介されているのでそこでは書かれていない部分を紹介したいと思います。 ちなみに結論をはじめに言うと、どんな方法であれ画像サイズが幅450px以上なければ、Feedlyの画像として表示されない可能性が高いです。 （どういうアルゴリズムか分かりませんが、たまーーーに表示されるみたいです。） Feedlyに関するブログを発見したのですが、色々と対応する方法があるようです。 Feedly will associate a featured image with each story. This image is used when we show an preview of the story to the reader. Here are the set of rules we use to pick the featured visual: If the content of the story in the feed has an img element with a webfeedsFeaturedVisual classname, that image will be selected as the featured image. If the first img in the story has a height and width > 450 pixel, that first image will be selected as the featured image. If not, feedly will try to pick the largest image in the story. If the feed is partial, the feedly poller will look up in the web page and see if the webpage include open graph or twitter card metadata and use that as the featured visual. Having a great featured image associated with your post is one of the most important aspects of increasing engagement with your readership. A great visual will draw the user into your story. 公式ブログより ちょーざっくりと要点をまとめると、以下のような要領で画像を取得しているようです。 ・class「webfeedsFeaturedVisual」が指定されているimgタグがあれば、その画像を使う。 ・コンテンツの最初の画像のサイズが幅450pxより大きければ、その画像を使う。もしそのサイズより大きくなければ、コンテンツで一番大きい画像を選ぶように試みる。 （→つまり使われないこともある） ・feedが不完全であれば、Open GraphかTwitterのメタデータを参照し、その画像を使う。 だそうです。 よく他のブログで紹介されているfunctions.phpでアイキャッチ画像をRSSにフィードを表示する方法だけだと、画像サイズの問題でうまく取得されないことがあるようです。実際私が運営する一つのサイトではそうでした。 私のサイトでは一番最初の画像は450px以下をいつも使っていました。 そこで上のブログを参考にfunctions.phpを以下のように変更してみました。 //RSSフィードにアイキャッチ画像を追加 function rss_thumbnail($content) { global $post; if (has_post_thumbnail($post->ID)) { $content = ' ' . get_the_post_thumbnail($post->ID,'large') .'

' . $content; } return $content; } add_filter( 'the_excerpt_rss', 'rss_thumbnail'); add_filter( 'the_content_feed', 'rss_thumbnail'); 注目は get_the_post_thumbnail($post->ID,'large') です。 ここをlargeにするとアイキャッチ画像の大きさが最大 640px x 640px となり条件になるかなーと思って実際に試してみましたが、 原画像のサイズが小さいとその画像が出力されるようです。（当たり前） 次に、コンテンツで表示したい画像に のようにクラスを追加してみました。 しかし、これも結果はNG・・・。どうやら画像サイズは450px以上ないとだめなんかもしれません。 次に画像サイズについて'large'の代わりにarray( 460, 230 )のように画像のサイズを指定してみました。 その場合は get_the_post_thumbnail($post->ID,array( 460, 230 )) のように記載します。 しかし、やはりこれも結果はNG。。。サイズ指定を大きく設定しても、元画像のサイズ以上には大きく表示されないっぽいです。 試しに、450px以上の画像を一枚貼ると。。うまく表示された。。 結論： Feedlyに安定して画像を表示させるには450px以上の画像を貼るしかない！！ 参考： テンプレートタグ/get the post thumbnail これ以外にもFeed情報として出力するXMLに といったような情報を付与して出力する方法も紹介されていますね。これをやるにはFeedを出力する部分をいじらないといけないので、修正がかなり面倒くさそうです。 どなたか試してみて欲しいですね。 それでは。

うぇぶのきわみ

月: 2016年4月

FeedlyでうまくRSSの画像が表示されない時の対処方法