WordPressでRSSフィードをカスタマイズしてAdvanced Custom Fieldsの値を出力させる

クライアントから以前Google Feed Apiを使ってワードプレスの更新情報を表示させていたんだけど使えなくなったのでなんとかしてーとの相談が。
要件はこんな感じ。

1. Google Feed Apiの代わりになる
2. 投稿内の画像を取得
3. それが無ければAdvanced Custom Fieldsで入れた画像を取得。
4. それも無ければno-image画像を表示

ということで早速解決していきましょう。

まずはWordPressのRSSフィードでAdvanced Custom Fieldsで入力した画像情報を取得出来るようにする

RSSテンプレートの作成

一から作成出来る技量はないので既存のテンプレートをお借りします。
wp-includesフォルダ内の『feed-rss2.php』というファイルをコピー、現在使用しているテーマディレクトリにペーストしてください。

functions.phpでRSSテンプレートを指定

コピーしたテンプレートを読み込むためにfunctions.phpに以下の記述を追加。
これで先ほどコピーしたテンプレートを読み込めます。

functions.php

//---------------------------------------------------------------------------
//	RSSをテーマ内から読み込む
//---------------------------------------------------------------------------
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);

RSSテンプレートのカスタマイズ

今回はAdvanced Custom Fieldsの画像を取得、それが無ければno-image画像を表示させる記述を追加します。
出力内容は<item>タグの中で制御しているので、その中に欲しい情報を出力させるコードを追加します。
詳しい説明は省きますがこちらのサイトに詳しく載ってます。
WordPressのフィード・RSSに画像を含めたり、タグ構造をカスタマイズするのに必要な作業まとめ

先ほど作成したfeed-rss2.phpの<item></item>の内側に

<?php /*?>Advanced Custom Fieldsの任意の項目が存在するかどうか<?php */?>
<?php if( have_rows('繰り返し項目のフィールド名',$post_id) ): ?>

	<?php while( have_rows('繰り返し項目のフィールド名',$post_id) ): the_row();
		$img = get_sub_field('フィールド名');
	?>
	
		<?php /*?>フィールドが空の場合にno-image画像を出力<?php */?>
		<?php if(empty($img)):?>
			<url>no-image画像のパス</url>
			
		<?php /*?>フィールドに値がある場合に画像のurlを出力<?php */?>
		<?php else:?>
			<url><?php echo $img; ?></url>
			
		<?php endif;?>

	<?php endwhile; ?>
	
<?php /*?>フィールドがそもそも存在しなければno-image画像を出力<?php */?>
<?php else:?>
	<url>no-image画像のパス</url>

<?php endif; ?>

今回のケースでは<url>no-image画像のパス</url>などと自分でわかりやすいように任意のタグで囲ってます。
これでRSSフィードに欲しかった情報が追記されました。

RSSフィードを取得するjsを準備する

次に更新されたフィードの情報を成形して出力させるjsを準備しましょう。
ちょっと長いですが、コピペ出来るようにまとめて貼り付けておきます。

feed.js（任意のファイル名）

<script type="text/javascript">
$(function() {
    var setURL = 'feedのURLが入ります'; //feedのURL
    var setNUM = 10; //表示件数
    var setID = 'feed'; //表示させる箇所のID
    xmlLoad(setURL,setID,setNUM);
});
function xmlLoad(_xmlUrl,_id,_num){
    DD = new Date();HH = DD.getHours();MM = DD.getMinutes();SS = DD.getSeconds();
    var xmlUrl = _xmlUrl+"?"+HH+MM+SS;  //キャッシュ対策のクエリを付与
    var main = this;
    $.ajax({
    url: xmlUrl,
    type: 'GET',
    dataType: 'xml',
    timeout: 10000,
    error: function(){
        _msg = 'error';
        xmlOpen(_msg,_id,_num);
    },
    success: function(_xml){
        main.xml = _xml;
        _msg = 'load';
        xmlOpen(_msg,_id,_num);
    }
    });
    return;
}
var xmlOpen = function(_msg,_id,_num){
    var main = this;
    var html = '';
    var ID = _id;
    var Num = _num;
    var userAgent = window.navigator.userAgent.toLowerCase();
    if(_msg == 'load'){
        xml = main.xml;
        var channelData = $(xml).find('channel')[0];
        $(channelData).find('item').each(function(i){
            if(i < Num){
            postTitle = $(this).find('title').text();//記事タイトル取得
            postLink = $(this).find('link').text();  //記事リンク取得
            //日付の取得
            publishedDate = $(this).find('pubDate').text();
            var pdate = new Date(publishedDate); //Dateクラス
            var pyear = pdate.getFullYear();   //年
            var pmonth = pdate.getMonth() + 1; //月
            var pday = pdate.getDate();        //日
            //日付を2桁表示に変更
            if (pyear < 2000) pyear += 1900;
            if (pmonth < 10) {pmonth = "0" + pmonth;}
            if (pday < 10) {pday = "0" + pday;}
            var postDate = pyear + "." + pmonth + "." + pday + " ";
            //投稿内の画像取得
            var description = $(this).find('description')[0].firstChild.nodeValue;
            var thumbnails = description.match(/<img[^>]+>/gi);
						//代替画像（Advanced Custom Fieldsの画像またはダミー画像
						var subimage = $(this).find('url').text();
						// 投稿内に画像がない場合、カスタムフィールドの画像表示、それもなければno-image画像を表示
						if (thumbnails == null) { thumbnails = '<img src="' + subimage + '">'; }
						

			html += '<div class="hoge">';		
			html += '<a href="' + postLink + '" target=_blank>' + thumbnails + '</a>';
			html += '<span>' + pyear + '年' + pmonth + '月' + pday + '日' + '</span>';
			html += '<a href="' + postLink + '" target=_blank>' + postTitle + '</a>';
			html += '</div>';
            }
        });     
    }else{
        //エラー時の表示
        html += '<li>通信エラー</li>';
    }
    $("#"+ID).html(html);
}
</script>

ポイントは53~59行目ですね。
フィードのdescriptionからimgタグを取得。
それが取得できなかった(nullの場合）、カスタムフィールドの画像、またはno-image画像のurlを取得。
html += 〜の部分で出力内容を成形しています。
このあたりは必要な内容に書き換えてください。

出力させる場所に設定したIDを含むタグを記述。

今回の内容では以下のコードを出力させる場所に記述します。
先ほど作成したfeed.js。こちらも忘れずに読み込ませましょう。
じゃないと出力されません。

<div id="feed"></div>

もっとスマートなやり方もあるとは思いますが、これで要望自体は無事解決したので良しとします。
こんなやり方があるよってご存知の方はぜひ教えていただきたいものです。