MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


WordPressのフィード・RSSに画像を含めたり、タグ構造をカスタマイズするのに必要な作業まとめ

WordPressには元々フィードがありますが、アイキャッチ画像を加えたり、タグの構造を変更するにはカスタマイズが必要です。

今回アプリに配信するため、これまであまり触れてこなかったfeedのテンプレートをカスタマイズする必要があったので色々と調べました。

feed RSSにアイキャッチ画像を追加する方法
feed RSSのタグ構造を変更する方法

の参考になればと思います。

RSS feed フィードって?

ウェブサイト、などのコンテンツを配信用に加工した文書のことで、RSSやAtomがあります。

フィードを読み込むにはフィードリーダーが必要で、独立型のソフトだったり、ブラウザの拡張機能だったり、Webサービスだったりと、形は様々ですね。feedlyなどを利用している方も多いのではないでしょうか。

WordPressはデフォルトでフィードの機能を持っています。

WordPressのフィードは?

URLにアクセスすれば、ブラウザでfeedを確認できます。

example.com/?feed=rss
example.com/?feed=rss2
example.com/?feed=rdf
example.com/?feed=atom

パーマリンクを変更しているなら

example.com/feed/
example.com/feed/rss/
example.com/feed/rss2/
example.com/feed/rdf/
example.com/feed/atom/

といったURLで確認できます。

詳しくは、Codex WordPress_フィード配信も確認しましょう。

WordPressのフィードにアイキャッチ画像を含める

「フィードにアイキャッチを含めて下さい」という内容。

WordPressのフィードにアイキャッチ画像を含めるのは意外に簡単で、テーマフォルダのfunctions.phpにコードを追加するだけです。

http://netaone.com/wp/wordpress-feedreader/

https://ateitexe.com/rss-thumbnails/

色々なサイトを見ても、コードに大きな差はありません。


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');

画像のURLだけ利用したい場合

タグを変更したい・タグに画像のURLのみ含めたいといった場合は関数の応用なので

function post_thumbnail_in_feeds($content) {
global $post;
$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
if(has_post_thumbnail($post->ID)) {
  $content = '<image><url>' . $image_url[0] . '</url></image>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'post_thumbnail_in_feeds');
add_filter('the_content_feed', 'post_thumbnail_in_feeds');

のような形で可能でした。カスタマイズ後にフィード(/feed)を確認すると、

<description>
<![CDATA[
<image><url>http://example.com/wp/wp-content/uploads/sample-300x200.jpg</url></image>抜粋内容
]]>
</description>

となります。
get_post_thumbnail_id($post->ID), ‘medium’)
のmediumは

‘thumbnail’ // サムネイル
‘medium’ // 中サイズ
‘large’ // 大サイズ
‘full’ // フルサイズ
に変更することができます。(実際のサイズは 設定>メディア で設定した数値に準じます。)

wordpress-feed-rss-thumbnail-02

RSSのdescriptionタグの中身以外をカスタマイズしたい

しかし、さらなる要望で、「descriptionとimageは同階層で」という指定がありました。

つまり、

<description>
<![CDATA[
抜粋内容
]]>
</description>
<image>
  <url>http://example.com/wp/wp-content/uploads/sample-300x200.jpg</url>
</image>

のような形ですね。
the_excerpt_rss
the_content_feed
で変更できるのはあくまでdescriptionの中なので、テンプレート自体を変更する必要がありました。

WordPressのfeedテンプレートをカスタマイズ

RSS2のdescriptionタグの外側に手を加えたい場合、

1.テーマの中にフィード用のテンプレートを作る
2.functions.phpでフィードのテンプレートを指定する
という工程が必要です。

「wordpress feed カスタマイズ」等で検索しましょう。有用なサイトがたくさんあります。

参考サイト
http://webimemo.com/wordpress/8473
http://webshufu.com/customizing-feed-templates/
http://qiita.com/pman-maru/items/f582f48ad3ee9ae41704

おかげで解決できました。ありがとうございます。

includesフォルダからテーマフォルダにfeedテンプレートをコピー

feedのテンプレートはincludesフォルダの中にあります。includes内のファイルを直接編集するのはよろしくないので、テーマフォルダ内に任意のfeedテンプレートをコピーしてきましょう。

includesディレクトリにfeedのテンプレがある

includesディレクトリにfeedのテンプレがある

feed-rss2.phpをカスタマイズする

feedの配信設定は、設定 > 表示設定で確認しておきましょう。

wordpress-feed-rss-thumbnail

descriptionタグを検索し、変更を加えていきます。

<?php if (get_option('rss_use_excerpt')) : ?>
  // line92~ 表示設定が「抜粋のみを表示」の場合
  <description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>

  /* ここから追加コード */
  <?php
  if ( has_post_thumbnail() ) :
    $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
  ?>
  <image>
    <url><?php echo $image_url[0] ; ?></url>
  </image>
  <?php endif; ?>
  /* ここまで追加コード */

<?php else : ?>
  // 以降、全文を表示 の場合の処理
  <description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>

feed-rss2.phpをテーマフォルダにアップする

カスタマイズしたfeed-rss2.phpテンプレートを、テーマフォルダにアップします。

テーマの中に持ってくる

テーマフォルダの中にコピーする

このままでは、カスタムしたテンプレートを読み込んでくれません。functions.phpに、以下のコードを張り付けてファイルを指定する必要があります。

カスタマイズしたfeedテンプレートを指定する(functions.php)

参考にさせて頂いたコードはこちらです。

remove_filter('do_feed_rss2', 'do_feed_rss2', 10);
function custom_feed_rss2(){
$template_file = '/feed-rss2.php';
load_template(get_template_directory() . $template_file);
}
add_action('do_feed_rss2', 'custom_feed_rss2', 10);

子テーマを利用している環境なので
get_template_directory()

get_stylesheet_directory()
に変更しました。

カスタムしたfeedの確認

/feed/にアクセスして、反映されているか確認しましょう。

<description>
  <![CDATA[
  抜粋文
  ]]>
</description>
<image>
  <url>
    http://example.com/wp/wp-content/uploads/sample-300x200.jpg
  </url>
</image>

となっていることを確認しました。

任意の記事をRSS feedから除外する方法

更に、任意の記事をRSSフィードから除外する方法についても将来的に実装するかもしれないということで、簡単な調査を行いました。

こちらは、Advanced Custom Fields のようなカスタムフィールどでフラグを与え、該当した場合に除外する形でできそうですね。

Advanced Custom Fields 設定例

Advanced Custom Fields
設定例

このような形で投稿のメタボックスにRSSに表示するか否かのチェックを追加します。

投稿のメタボックス

投稿のメタボックス

あとはチェックが入っていたらRSSに表示しない・・・という条件を加えればOKです。

前項、feed-rss2.phpのwhile文の中にif文を追加

// ~line 83 RSSテンプレート内のwhile開始
while( have_posts()) : the_post();
?>
  <?php if( get_field('hiddenRSS') ): ?>
  <item>
    feedのテンプレート
  </item>
  <?php endif; ?>
<?php endwhile; ?>

ちなみに、get_fieldというのはAdvanced Custom Fields独自の関数なので、上記コードだとACFを停止するとエラーが出る点に注意です。他の方法でカスタムフィールドを追加した場合は以下のような形で可能でした。(若しくはfunction_existsでget_fieldが定義されているかを判定する?)

// ~line 83 RSSテンプレート内のwhile開始
while( have_posts()) : the_post();
?>
  <?php $rssflag = get_post_meta($post->ID, 'hiddenRSS', true);?>
  <?php if(empty($rssflag)):?>
  <item>
    feedのテンプレート
  </item>
  <?php endif; ?>
<?php endwhile; ?>

WordPress feed RSS カスタマイズまとめ

feedに画像を含める
feedのタグ構造を変更する
要件によって、こうも作業内容が変わってくるとは思いませんでした。

テーマのカスタマイズはよくやりますが、feedのカスタマイズは初めてだったので勉強になりました。おかげで今後feedのカスタマイズ案件があっても対応できそうです。

参考にさせて頂いた皆さま、ありがとうございました。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA