WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示

2014/04/032021/06/21

現在、dmgadget(ディーエムガジェット）ではRSS/Atomフィードでの各投稿の表示は「抜粋のみを表示」にしています。

「全文を表示」だと画像など問題なく全部表示されますが、「抜粋のみを表示」にした場合、画像は一切表示されず、抜粋された文章だけの表示になってしまいます。今回「抜粋のみを表示」にしていてもアイキャッチ画像がRSSフィードに表示されるように設定する備忘録を残したいと思います。

[adsense]

必要な方はfunctions.phpをバックアップ

よくfunctions.phpの編集を失敗してブログが真っ白になって表示されなくなる経験を持つ自分ですが、自分のようにまだ編集になれてない方は必ず「functions.php」のバックアップを取ってください。

functions.phpを編集します

Stinger3のテーマフォルダの中に入っている「functions.php」を開いてください。管理画面　→　外観　→　テーマ編集　子テーマをお使いの方は親テーマの中に「functions.php」が入っています。

自分はtransmitで編集を行っているので以下こちらで説明をしていきます。

「functions.php」を開いて一番下の方にはこのような表記になっていると思います。

ここの２１１行目に下記のコードをコピペしてください。

//RSSフィードにアイキャッチ画像を追加
function rss_thumbnail($content) {
 global $post;
 if (has_post_thumbnail($post->ID)) {
 $content = '<p>' . get_the_post_thumbnail($post->ID,'full') .'</p>' . $content;
 }
 return $content;
}
add_filter( 'the_excerpt_rss', 'rss_thumbnail');
add_filter( 'the_content_feed', 'rss_thumbnail');

わかりやすく改行したりもしていますが、下記のような表記になっていると思います。

[adsense]

現状サムネルのサイズ指定は「get_the_post_thumbnail($post->ID,’full’)」「full」にしていますが、Stinger以外のテーマをお使いの方やカスタマイズしている方でサイズを変更したい方は「full」と書かれている部分を下記の

get_the_post_thumbnail($post->ID,'thumbnail')        //サムネイルのサイズ
get_the_post_thumbnail($post->ID,'medium')       //中サイズ
get_the_post_thumbnail($post->ID,'large')        //大サイズ
get_the_post_thumbnail($post->ID,'full')         //フルサイズ
get_the_post_thumbnail($post->ID,array(250,100)) //サイズ指定

任意の文字に変更してお使いください。Stingerをお使いの方は現状「full」のままで問題ありません。

完成！表示を確認してみましょう

feedlyだと更新が上手く出来なかったので他のRSSリーダーで確認してみました。使ったのはこちら、

アプリケーション内でRSSを登録して閲覧出来る「Shrook」と云うMAC用アプリケーションです。こちらを使ってdmgadget（ディーエムガジェット）のfeedの表示を確認してみます。

問題なくアイキャッチ画像が表示されました。何となく気になってしまいましたが、赤で囲った部分の「 […] 」

続きの文章があります的な表示ですが、ここには分かりやすく「続きを読む」と表示させるため先程編集した「functions.php」の中にコードをもう一つ足します。

//続きを読むを追加
function new_excerpt_more($more) {
     return ' ... <a class="more" href="'. get_permalink() . '">続きを読む</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

こちらのコードを先程の「functions.php」の一番下にコピペします。ペースト後このような感じの表記になっていると思います。

「続きを読む」を追加したのでもう一度フィードを登録し直して表示を確認します

フィードをもう一度確認するため先程、

に登録したフィードを一旦削除して再登録して再読み込みさせます。

読み込み後確認すると「続きを読む」に正しく変更されています。こちらの方がかなり分かりやすいですね。「続きを読む」をクリックするとブログの記事への飛ぶようになリンク設定になっています。

RSSエラー「XMLパースエラー」

dmgadget(ディーエムガジェット)のfunctions.phpを変更した時には特に問題なくアイキャッチを表示出来たのですが、管理ページのfunctions.phpを変更後feedの表記確認をしようと「//dmtriathlon.info/feed/」にアクセスすると、、、

This page contains the following errors:

error on line 2 at column 6: XML declaration allowed only at the start of the document
Below is a rendering of the page up to the first error.

とエラーが出てしまいました。意味が分からなかったのでググってみると

XMLファイルの先頭に余分な改行、スペースが入ってしまっているため、各種ブラウザにてエラーが発生。

との事。自分はGoogle Chromeを使っているので上記のエラーメッセージだったのですが、他のブラウザだと

Firefoxでフィードを表示した場合

XML パースエラー: 実体の初めに XML またはテキスト宣言がありません。
URL: //kngy.net/feed/
行番号: 2, 列番号: 1:

Internet Explorerでフィードを表示した場合

Internet Explorer ではこのフィードを表示できません
このフィードにはコード上のエラーが含まれています。

詳細情報
無効な XML 宣言です。
行: 2 文字: 3
＜?xml version=”1.0″ encoding=”UTF-8″?＞

このようなエラーが表記されるみたいです。

[adsense]

パースエラーを修正する

お使いのWordPressのルートディレクトリ内にある「wp-includes」の中の　「feed-rss2.php」と「feed-rss2-comments.php」を編集します。

transmitや

同じく有名なCyberduckのようなFTPクライアント

でWordpressがインストールされているルートディレクトリに接続します。「wp-includes」の中の　「feed-rss2.php」から編集していいきます。

「feed-rss2.php」を開いて、

二行目に「ob_end_clean();」を足します。

そして「feed-rss2.php」にも同じように「ob_end_clean();」を足します。

修正後、ブラウザのキャッシュをクリア

エラーの修正方法の参考にさせていただいた、kngy.netさんに書いてあった

少なくともFirefoxとGoogle Chromeでは、変更が反映されていても、キャッシュが原因で、リロードしてもエラー表示のままという現象を確認しております。変更を行ってもだめだったと他の方法を探す前に、ブラウザの設定でキャッシュをクリアし、今一度確認を行うことをおすすめします。

こちらの注意点、自分もキャッシュをクリアしていなくてエラーが直らずに「なんでだー」と原因を掴むまでに時間を費やしてしまいましたが、こちらで解決出来ました。

Google Chromeのキャッシュをクリアする

自分は英語バージョンでChromeを使っているので英語表記での説明になってしまいますが、

上のメニューバーの一番左「CHROME」から　「Clear Browsing Data…」をクリックします。

「Cached images and files」にチェックマークを入れて右下の「Clear browsing data」をクリックしてキャッシュを消去します。削除後、先程までエラーが出ていたfeedのURLに飛ぶと問題なく表示されるように修正されているはずです。

完成

RSSフィードにアイキャッチ画像が表示されるようになりました！読んで頂いてありがとうございました。