Nov 4 2013

【簡単・確実】プラグインだけで WordPress の RSS にアイキャッチ画像を含める方法

By gyoza manner On 2013/11/04 In WordPress

Version : WordPress 3.7.1, SB RSS Feed plus 1.3.5

Wordpress の RSS 送信にアイキャッチ（サムネイル）画像を簡単かつ確実に含める方法です。いろいろググった結果これに落ち着きました。基本的にはプラグインのインストールだけですが、よりいい感じに見えるために簡単なカスタマイズを行っています。

Pocket

[`evernote` not found]

アイキャッチ画像って？

WordPress にはアイキャッチ画像という、投稿の一覧や投稿の先頭につけられる代表画像を設定することができます。サムネイルとも言われているやつです。ブログを更新した時に RSS として投稿記事がまとめられますが、デフォルトではどうやらアイキャッチ画像は含まれないようです。

記事を書くときにはいつもアイキャッチ画像をどうしようかとても迷います。既成の画像ではよい絵がないなーというときには、フリーの素材同士を組み合わせてそれなりにレタッチして作成することも多々あります。そんな思い入れのある画像を RSS にも含めたい。そう思いませんか？

って、このブログを RSS 登録している人は、、、ゴニョゴニョ人しかしないのでたいして目に触れないわけですが。。。

ググってみたものの

けっこういろいろとググってみたのですが、結論から言うとどれもうまくいきませんでした。

WordPress記事のRSSにサムネイル（アイキャッチ）画像を表示する方法 *Ateitexe

上のページをはじめ多くのページで見られたのが、テーマフォルダの下にある functions.php に関数を追加するというもの。

僕が使っているテーマでは残念ながらうまくいきませんでした（何も表示されない）。さらに抜粋だけ RSS に送信したいのに全文が送信されてしまうという意図しない結果になりました。テーマがもともと持っているソースコードとバッティングしているのかもしれませんが、テーマを書き換えるとあとあとアップデートがあったときにメンテし直さなくてはならないのでやりたくありません。

無いと思っていたWordpressのフィードに画像を追加するプラグインを発見！ | Tipstour

この方も僕と同様に functions.php を書き換えても表示されなかったそうで、代わりにプラグインが紹介されています。おお！これだ〜と思って入れてみたのですが、、、残念ながら僕の環境では RSS に画像がつくことはありませんでした。

やはり、僕の使ってるテーマは曲者なのか？　でも気に入っているからやめられないんだよなぁ。

答えはもっとシンプルだった

WordPress のプラグインをいくつか探して試したところ、ほぼ満足させてくれるものが見つかりました！

それは、SB RSS Feed+ というプラグイン。WordPress のプラグイン検索から検索してインストールすればおしまいです。RSS にアイキャッチ画像を含めたいだけなら何も必要ありません。最新版の WordPress 3.7.1 でも問題ないです。

ただ、僕の場合はちょっと見栄えを良くするための設定をしました。

WordPress の RSS 設定

RSS には全文を流すのではなく、アイキャッチ画像があれば文章の最初だけを流すほうが目次的で見やすいです。その設定は WordPress の表示設定で行います。

「抜粋のみを表示」を選びます。

プラグインの編集

SB RSS Feed+ そのままでもよいのですがそのままだと大きい（画面の横幅 90% で表示されます）、僕のブログのアイキャッチは小さめの画像で表示をしたいので少々設定を変更しました。

下図のようにプラグインの「編集」メニューを押すとプラグインのソースコードが表示されます。

ソースコード（SB-RSS_feed-plus.php）の最後の方に feed_update_content() という関数があります。そこを少し変えることでカスタマイズすることができます。本当はプラグインの設定メニューにあって欲しいのですが残念ながら用意されていないようです。

feed_update_content() 関数の中にサムネイルをどの位置にどの大きさで表示するかを決めている部分があるのでそこを変えればオッケーです。オリジナルでは画面幅の 90% の大きさで表示するようになっているところを、150px として小さめのサムネイルにしています。また、margin の設定もいじってサムネイルが左上に来るようにしました。

	public function feed_update_content($content) {
		global $post;

		$content_new = '';

		if(has_post_thumbnail($post->ID)) {
			$image = $this->feed_getImage();
// オリジナル : $content_new .= '<div style="margin: 5px 5% 10px 5%;"><img src="' . $image[0] . '" width="90%" /></div>';
// 書き換えた
			$content_new .= '<div style="margin: 5px 5px 10px 5px;"><img src="' . $image[0] . '" width="150px" /></div>';
		}

public function feed_update_content($content) {

global $post;

$content_new = '';

if(has_post_thumbnail($post->ID)) {

$image = $this->feed_getImage();

// オリジナル : $content_new .= '<div style="margin: 5px 5% 10px 5%;"><img src="' . $image[0] . '" width="90%" /></div>';

// 書き換えた

$content_new .= '<div style="margin: 5px 5px 10px 5px;"><img src="' . $image[0] . '" width="150px" /></div>';

}

結果はこのようになりました。狙い通りです。ヤッター！

アイキャッチの留意点

とりあえずうまくいきましたが、まだまだ難しい問題というか悩ましい問題があります。どうしようもないので放っとくけど。

Feedly には無力

ポスト Google Reader で人気の Feedly ですが、Feedly は RSS に入っているサムネイル画像はガン無視します。独自の哲学と実装でどうやらブログの中から勝手に画像をピックアップするようです。なので意図しない画像がサムネイルに使われてしまいます。詳しいアルゴリズムはわからないですが、経験上単に一番大きい画像が使われるような気がします。アイキャッチ画像のサイズを大きくすればよいのかもしれません。（それでも僕が使っている Green Chilli はアイキャッチ画像を特別な扱いにしているので無理なのですが）