Web制作

【WordPress複数運用】別WordPressの新着記事をアイキャッチ画像と一緒に表示させたい!

こんにちは。サイバーブリッジweb担当の久保田です。

複数WordPressを運用している場合、ある特定の場所に新着記事を表示させたい!ということもあると思います。

同じサーバー内ならデータベースから直接読み込む方法もありますが、この方法はちょっとハードルが高いので…

今回はWordPress初心者さんでも分かりやすいように、RSSfeedを使って簡単にWordPress(A)に、WordPress(B)の新着記事を表示させる方法を忘備録も兼ねて解説します。

ちなみにこの方法は、別々のサーバーにインストールされてる場合でも使えます。

RSSfeedとは?

RSSfeedアールエスエスフィードとは「Really Simple Syndication」、または「Rich Site Summary」「Really Simple Syndication」の頭文字をとった、Webサイトのニュースやブログなどの更新情報などを配信するため技術のことです。

WordPressにはデフォルトでフィードの機能がありますが、アイキャッチ画像を表示させる為には少しカスタマイズする必要があります。

新着記事を表示させる

例として、「コーポレートサイト(WordPress(A))のトップページに自社オウンドメディア(WordPress(B))の新着記事を6件表示させたい!」とします。

その場合、コーポレートサイトのトップページであるfront-page.phpの新着記事を表示させたい箇所に⬇︎のコードを記述します。

front-page.php

<article>
 <?php  include_once( ABSPATH . WPINC . ‘/feed.php’ );
  $feeduri = ‘◆※取得するRSSのURL(例http://ドメイン/feed/)◆’;
  $rss = fetch_feed($feeduri);
  if (!is_wp_error($rss)) {
   $maxitems = $rss->get_item_quantity(6); <!– 表示したい件数 –>
   $rss_items = $rss->get_items( 0, $maxitems );
  }
 foreach ( $rss_items as $item ) : ?>

<!– 記事へのリンク –>
 <a href=”<?php echo $item->get_permalink(); ?>”>
 <!– 記事の最初の画像を表示 –>
  <?php
   $first_img = ”;
   if ( preg_match( ‘/<img.+?src=[\'”]([^\'”]+?)[\'”].*?>/msi’, $item->get_content(), $matches ) ) {
    $first_img = $matches[1];
   }
  ?>
  <img src=”<?php echo esc_attr( $first_img ); ?>” alt=””>

<!– カテゴリーを表示 –>
  <?php
   if ( $category = $item->get_category() ) {
    echo esc_html( $category->get_label() );
   }
  ?>

<!– 記事のタイトルを表示 –>
  <?php
   $title = $item->get_title();
   if(mb_strlen( $title ) > 100 ):
  ?>
  <h2><?php echo mb_substr( $title,0,100 );?></h2>
  <?php else : ?>
  <h2><?php echo $title ;?></h2>
  <?php endif; ?>

<!– 投稿時間を表示 –>
  <?php
   $item_date = $item->get_date();
   $date = date(‘Y.m.d’,strtotime( $item_date )); ?>

  <p class=”date”><?php echo $date; ?></p>
 </a>
 <?php  endforeach;  wp_reset_postdata(); ?>
</article>

※取得するRSSのURLは、ブラウザのデベロッパーツールでも確認できます。
HTMLソースコードの<head>内に

html

<link rel=”alternate” type=”application/rss+xml” title=”サイト名 RSS Feed” href=”https://ドメイン名/feed/”>

上記のようなコードが記述されていますのでそちらを参照してくだい。

アイキャッチ画像も表示させる

ここからが重要!

上記のコードだと画像は表示されても「あれ?これ記事の最初に表示される画像だよ?アイキャッチ画像になってないじゃん!」となってしまう場合があります。

実はWordPressはデフォルトのままだと、RSSにアイキャッチ画像が含まれないのです。

記事の一番上に必ずアイキャッチ画像と同じ画像を埋め込んでいる場合は問題なく表示されますが、そうでない場合はRSSにアイキャッチ画像を含める設定をします。

RSSにアイキャッチ画像を含める設定

まず、表示したいWordPress(例で言うと自社オウンドメディア)の親テーマのfunctions.phpを子テーマにコピーし、上部のコメントアウト以外を消去して⬇︎のコードを記述します。

functions.php

<?php
 function rss_post_thumbnail($content) {
  global $post;
  if(has_post_thumbnail($post->ID)) {
   $content = ‘<p>’ . get_the_post_thumbnail($post->ID) . ‘</p>’ . $content;
  }
  return $content;
 }
 add_filter(‘the_excerpt_rss’, ‘rss_post_thumbnail’);
 add_filter(‘the_content_feed’, ‘rss_post_thumbnail’);
?>

これでアイキャッチ画像が表示されると思います。

上手く更新ができない場合の対処法

WordPressのフィードは一定時間でキャッシュされます。

新しい記事の投稿スピードとRSSフィードへのアクセス頻度を考えれば、キャッシュされても問題がないように思えますが、キャッシュ系プラグインがインストールされていると、更新情報が反映されないなどの不具合が発生します。

そんな時は、フィードのキャッシュを無効化しちゃいましょう!

まず、記事を表示させたいWordPressの親テーマにあるfunctions.phpを子テーマにコピーし⬇︎のコードを記述します。

functions.php

<?php
 function do_not_cache_feeds(&$feed) {
  $feed->enable_cache(false);
 }
 add_action( ‘wp_feed_options’, ‘do_not_cache_feeds’ );
?>

この他にも、feed-rss2.phpのコードを少しいじってキャッシュの時間を調整する方法などもありますが、その方法だと上手く行かない場合は是非こちらをお試しください。

失敗するとサイトが表示できなくなる危険性があるので、心配な方はプラグインの使用をおすすめします。

この記事を書いた人

その他記事はこちら

久保田 里佳子

Web事業部 マネージャー / デザイナー

1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。

その他記事はこちら

関連記事