なんにもない日の頭の中はこんなもんだったりする

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

【WordPress】別サイトにアイキャッチ画像付きの新着記事を表示する(RSSフィードで簡単に)
きのこさん
別のサイトに新着記事を掲載したいのですが、アイキャッチ画像が表示されないですー
きのこさん
なるほどなるほど、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』を使用します。(簡単なのでおすすめです)

▽ライブラリを以下からダウンロードできます。

GitHub – 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 design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月13日
11月12日