【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』を使用します。(簡単なのでおすすめです)

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

▽手順。

  • ダウンロードした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件ずつを取得しています。

さいごに

なんだか甘いパンが食べたくなりましたー
クリームパン買いに行きましょう―
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

11

/

21

2024

Googleさんの
おすすめ

11

/

21

2024

デザインの記事

水色デザイン
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集