WordPressのRSSフィードに画像を追加する方法【初心者向け】

IT・WEB
WordPressのRSSフィードは、デフォルトでは記事のテキストしか配信されません。そのため、RSSリーダーやフィード連携サービスで記事を見たときに「画像がない・見栄えが悪い」と感じることがあります。 この記事では、RSSフィードに画像を追加する方法を4つ解説します。コードなしで対応できるプラグイン方法から、より細かく制御できる functions.php を使った方法まで、初心者の方でもわかるよう丁寧に説明します。
この記事でわかること：
  • RSSフィードに画像が表示されない理由
  • アイキャッチ画像をRSSに追加する方法（コード／プラグイン）
  • 本文内の最初の画像をRSSに追加する方法
  • 各方法の違いと選び方

そもそもRSSフィードに画像が出ない理由

WordPressが出力するRSSフィードは、標準では記事のテキスト（本文）だけを含む仕様になっています。アイキャッチ画像や本文内の画像は、デフォルトでは含まれません。 そのため、以下のようなサービスと連携するときに画像が表示されず、クリック率が下がることがあります。
  • Feedly などのRSSリーダー
  • SNS自動投稿ツール（Zapier・IFTTTなど）
  • 外部サイトへのフィード連携
これを解決するために、RSSフィードに画像タグを追加する必要があります。

方法①：functions.php でアイキャッチ画像を追加する（推奨）

子テーマの functions.php にコードを追記することで、RSSフィードにアイキャッチ画像を自動で追加できます。プラグインを増やしたくない方にとくにおすすめです。

functions.php とは？

WordPressテーマに含まれるPHPファイルで、テーマの動作をカスタマイズするためのコードを書く場所です。必ず子テーマの functions.php に追記してください。親テーマに書くと、テーマ更新時に上書きされてしまいます。

追記するコード

子テーマの functions.php の末尾に以下をコピー＆ペーストしてください。 
add_filter('the_excerpt_rss', 'add_thumbnail_to_rss');
add_filter('the_content_feed', 'add_thumbnail_to_rss');

function add_thumbnail_to_rss($content) {
    global $post;
    if (has_post_thumbnail($post->ID)) {
        $thumbnail = get_the_post_thumbnail(
            $post->ID,
            'medium',  // ← 画像サイズ（large / full なども指定可）
            ['style' => 'display:block;margin-bottom:1em;max-width:100%;']
        );
        $content = $thumbnail . $content;
    }
    return $content;
}

コードの解説

  • add_filter：WordPressの「フィルターフック」という仕組みで、RSSの出力内容に処理を追加します
  • the_excerpt_rss：抜粋モードのRSSに適用するフック
  • the_content_feed：全文モードのRSSに適用するフック（両方に書くことで確実に反映されます）
  • get_the_post_thumbnail()：アイキャッチ画像のHTMLを取得する関数
  • 'medium'の部分を 'large' や 'full' に変えると、画像サイズを変更できます
コードを貼り付けたあとは、/feed/ にアクセスして画像タグが出力されていることを確認しましょう（例：https://example.com/feed/）。

方法②：functions.php で本文内の最初の画像を追加する

アイキャッチ画像を設定していない記事にも対応したい場合は、本文内の最初の画像をRSSに追加する方法が有効です。 
add_filter('the_excerpt_rss', 'add_first_image_to_rss');
add_filter('the_content_feed', 'add_first_image_to_rss');

function add_first_image_to_rss($content) {
    global $post;

    // まずアイキャッチ画像を優先
    if (has_post_thumbnail($post->ID)) {
        $img = get_the_post_thumbnail(
            $post->ID, 'medium',
            ['style' => 'display:block;margin-bottom:1em;max-width:100%;']
        );
        return $img . $content;
    }

    // アイキャッチがなければ本文内の最初の img タグを取得
    preg_match('/<img[^>]+>/i', $post->post_content, $matches);
    if (!empty($matches[0])) {
        $img = $matches[0];
        return $img . $content;
    }

    return $content;
}

コードの解説

  • アイキャッチ画像がある場合はそちらを優先して使います
  • アイキャッチがない場合は preg_match（正規表現）で本文内の最初の <img> タグを取り出します
  • どちらもない記事はそのまま画像なしで出力されます
注意：方法①と方法②のコードは同時に使わないでください。フックが重複して画像が2枚表示される場合があります。どちらか一方を採用してください。

方法③：プラグインで追加する（ノーコード）

コードを書かずに対応したい場合は、プラグインを使うのが手軽です。

おすすめプラグイン

プラグイン名 特徴
Featured Image in RSS & Mailchimp アイキャッチ画像をRSSに追加。画像サイズや位置（上下）も設定できる。導入が簡単で日本語サイトでも広く使われている
WP RSS Aggregator RSS全般を管理・カスタマイズできる多機能プラグイン。フィードの出力だけでなく外部フィードの取り込みにも対応

「Featured Image in RSS & Mailchimp」の設定手順

  1. WordPress管理画面 →「プラグイン」→「新規追加」から検索してインストール
  2. 「有効化」をクリック
  3. 「設定」→「RSS & Email Images」を開く
  4. 画像サイズ・表示位置（記事の前 or 後）を選択して「変更を保存」
注意：プラグイン導入前には必ずバックアップを取ってください。functions.phpのコード（方法①②）と同時に使うと画像が重複する場合があります。どちらか一方に統一してください。

まとめ：どの方法を選べばいい？

方法 難易度 画像ソース おすすめな人
① functions.php（アイキャッチ） ★★☆ アイキャッチ画像 シンプルに確実に対応したい方
② functions.php（本文内画像も対応） ★★☆ アイキャッチ → 本文内画像 アイキャッチ未設定の記事も多い方
③ プラグイン ★☆☆ アイキャッチ画像 コード不要・手軽に済ませたい方
コードを少し触れる方であれば、プラグインを増やさずに済む方法①がもっともおすすめです。アイキャッチを設定していない記事が多い場合は方法②を使いましょう。「とにかく手軽に」という方は方法③（プラグイン）で問題ありません。 設定後は必ず https://あなたのサイト/feed/ にアクセスし、<img> タグが出力されていることを確認してください。

コメント

タイトルとURLをコピーしました