ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

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

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

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

スポンサーリンク

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

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

functions.phpを編集します

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

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

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

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

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

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

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

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

スポンサーリンク

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

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

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

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

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

Shrook
カテゴリ: ニュース
現在の価格: 無料

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

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

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

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

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

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

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

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

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

Shrook
カテゴリ: ニュース
現在の価格: 無料

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

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

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

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

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

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

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: http://kngy.net/feed/
行番号: 2, 列番号: 1:

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

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

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

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

スポンサーリンク

パースエラーを修正する

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

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

transmitや

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

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

Cyberduck
カテゴリ: 仕事効率化
現在の価格: ¥2,400

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

完成

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

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
wordpress人気テーマSTINGER3の広告を2つ並べるカスタマイズ
WordPress[Stinger3] 広告を2つ並べるカスタマイズ
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置