【WordPress】別サイトにアイキャッチ画像付きの新着記事を表示する(RSSフィードで簡単に)
- 2019.10.23
- WordPress


別のサイトに新着記事を掲載したいのですが、アイキャッチ画像が表示されないですー

なるほどなるほど、RSSフィードを取得する方法がシンプルでおすすめですよー
デフォルト(標準)で出力されるフィードは?
ワードプレスのRSSフィードのデフォルトをまとめてみました。
- タイトル
- 概要(本文)
- カテゴリー
- タグ
- 投稿者
- サイトのコメント
- 各投稿のコメント
- 検索結果

あ、アイキャッチ画像が入ってないです―

そうなんですよー。
なので、テンプレートファイルに追加しましょうー
なので、テンプレートファイルに追加しましょうー
RSSフィードにアイキャッチ画像を追加する
追加方法は以下の手順で、
- RSSフィードのテンプレートファイル『/wp-includes/feed-rss2.php』をコピーする。
※ 元ファイルは編集NG。アップデート時に消える可能性あり。 - テーマディレクトリ内にコピーした『feed-rss2.php』を置く。
- テーマディレクトリ内に置いた『feed-rss2.php』に以下を追加する。
▽追加記述
<?php /*?>ここから追加<?php */?> <?php if ( has_post_thumbnail() ) : $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium_large'); $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail'); ?> <image><url><?php echo $image_url[0] ; ?></url></image> <thumb><url><?php echo $thumb_url[0] ; ?></url></thumb> <?php endif; ?> <?php /*?>ここまで追加<?php */?>
- 追加する場所は <item>と</item> の間であればどこでもオッケー。
▽『feed-rss2.php』(こんな感じに)
<item> <title><?php the_title_rss(); ?></title> <link><?php the_permalink_rss(); ?></link> <?php if ( get_comments_number() || comments_open() ) : ?> <comments><?php comments_link_feed(); ?></comments> <?php endif; ?> <pubDate><?php echo mysql2date( 'D, d M Y H:i:s +0000', get_post_time( 'Y-m-d H:i:s', true ), false ); ?></pubDate> <dc:creator><![CDATA[<?php the_author(); ?>]]></dc:creator> <?php the_category_rss( 'rss2' ); ?> <guid isPermaLink="false"><?php the_guid(); ?></guid> <?php /*?>ここから追加<?php */?> <?php if ( has_post_thumbnail() ) : $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium_large'); // ※ 画像サイズは自由に設定できる。『medium_large』サイズを追加。 $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail'); // ※ 画像サイズは自由に設定できる。『thumbnail』サイズも追加してみる。 ?> <image><url><?php echo $image_url[0] ; ?></url></image> <thumb><url><?php echo $thumb_url[0] ; ?></url></thumb> <?php endif; ?> <?php /*?>ここまで追加<?php */?> <?php if ( get_option( 'rss_use_excerpt' ) ) : ?> <description><![CDATA[<?php the_excerpt_rss(); ?>]]></description> <?php else : ?>
- 次に、テーマディレクトリ内に置いた『feed-rss2.php』を使用するので『functions.php』に以下を追加。
▽『functions.php』
// テーマディレクトリ内に置いた『feed-rss2.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);

あ、アイキャッチ画像がRSSに追加されましたー

よかったですー、お次が今回の本題ですー
別サイトにアイキャッチ画像付きの新着記事を表示する
次に、この RSSフィードを別サイトで取得し、アイキャッチ画像を含めて表示する方法です。
※ PHPであればWordPress以外のサイトでも使用オッケーです。
今回は、とっても便利なライブラリ『rss-php』を使用します。(簡単なのでおすすめです)
▽ライブラリを以下からダウンロードできます。
▽手順。
- ダウンロードしたzipファイルを解凍する。
- 解凍したファイル『Feed.php』をテーマディレクトリ内に格納する。
- 表示したい場所(ファイル)に以下を記述する。
▽不要なものは削除してオッケーです。
<?php require_once TEMPLATEPATH. '/inc/Feed.php'; // 解凍したファイル『rss/Feed.php』をテーマディレクトリ内に格納する。 $feed = new Feed; $url = 'https://www.example.com/feed'; // RSSのURL $rss = $feed->loadRss($url); $num = 4; //表示させたい件数 $i = 0; $desW = 40; //概要(本文)の文字数 if ( $desW != 0 ){ $desW = ($desW*2)+2; } foreach ( $rss->item as $item ){ if($i>=$num){ } else { $site_name = $rss->title; // サイト名 $site_link = $rss->link; // サイトリンク $site_description = $rss->description; // サイトディスクリプション $title = $item->title; // 記事タイトル $link = $item->link; // 記事リンク $timestamp = strtotime( $item->pubDate ); // 更新日時 $image = $item->image->url; // アイキャッチ $description = $item->description; // 概要(本文) $description = strip_tags($description); if ( $desW != 0 ){ $description = mb_strimwidth($description, 0, $desW, "…",'utf-8'); // 概要(本文)の文字数が超えたら『…』が付く } $eyecatch = '/img/no-image.png'; // アイキャッチ画像がない場合の代替画像 if ( $image ){ $eyecatch = $image; } $days = 7; // 『New』を表示する日数 $today = date('U'); // 今日って $sa = date('U',($today - $timestamp)) / 86400; // timestamp()の引数に86400を指定 ?> <div class="other_list"> <div class="imgBox"><a href="<?php echo $link; ?>" target="_blank"><img src="<?php echo $eyecatch; ?>" alt="<?php echo $title; ?>"></a></div> <div class="textBox"> <ul> <li class="date"><?php echo date( "Y.m.d", $timestamp ); if ( $days > $sa ) { echo '<span class="new">New</span>'; } ?></li> <li class="title"><a href="<?php echo $link; ?>" target="_blank"><?php echo $title; ?></a></li> <li class="description"><?php echo $site_description; ?></li> <li class="site_name"><a href="<?php echo $site_link; ?>" target="_blank"><?php echo $site_name; ?></a></li> </ul> </div> </div> <?php $i++; } } ?>

別のサイトにアイキャッチ画像付きの新着記事が掲載できましたー

よかったですー
サンプルページ
簡単なサンプルページを作りました。2つの外部サイトから新着記事2件ずつを取得しています。
さいごに

なんだか甘いパンが食べたくなりましたー

クリームパン買いに行きましょう―
おすすめ
かんれん
- web / 2023.2.23
- 【CSS】『shape-outside』でテキストの回り込みを円形にしてみる
- web / 2020.10.27
- 【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
- web / 2018.9.19
- 【CSS】transform(トランスフォーム)の基点(原点)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。