別ドメインのWordPressから記事取得！？RSS簡単設定方法

2024年7月11日

他のドメインで運営しているWordPressのサイトから記事を取得してご自身のサイトに表示させたいと考えたことはありませんか？

別ドメインの最新コンテンツを自動的に反映させることで、サイトの情報量を増やし、訪問者により価値あるコンテンツを提供することが可能です。しかし、どのように設定すればいいのか悩んでいる方も多いでしょう。

本記事では、別ドメインのWordPressから記事を取得し、ご自身のサイトに表示するための具体的な方法をわかりやすく解説します。初心者の方でも簡単に設定できる手順を紹介しますので、ぜひ参考にしてみてください。

別ドメインのWordPressから記事を取得するならRSS

別ドメインのWordPressのサイトから記事を取得するには、「RSSフィード」を活用するのが効果的な方法です。RSSフィードを利用することで、他のサイトの更新情報を自動的に取得し、ご自身のサイトに反映させることができます。ここでは、具体的な手順を紹介します。

RSSとは何か？

RSS（Really Simple Syndication）は、Webサイトの更新情報を効率的に配信するための技術です。これを利用することで、特定のWebサイトの最新情報をリアルタイムで取得できます。RSSフィードはXMLフォーマットで情報を構造化し、RSSリーダーやフィードリーダーを通じて表示されます。WordPressでは、RSSフィードが初期設定で有効になっており、特定のURL（例：/?feed=rss、/?feed=rss2）を通じてアクセスでき、訪問者は頻繁にチェックする必要はなく、効率的に最新情報を受け取ることが可能です。

RSSフィードのURLを設定する

まず、別ドメインのWordPressサイトのRSSフィードURLを確認します。通常、以下の形式でRSSフィードは表示されます。

http://example.com/feed/

このURLを取得することで、特定のカテゴリーやタグのフィードを個別に取得することも可能です。例えば、カテゴリーごとのフィードは以下のような形式です。

http://example.com/category/categoryname/feed/

タグごとのフィードは以下のような形式になります。

http://example.com/tag/tagname/feed/

使用する際は、このURLをサイトに貼り付けるだけで反映できます。これにより、特定の情報だけを取得し、ご自身のサイトに表示することが可能です。

RSSフィードの設定方法

RSSフィードは、ブログやニュースサイトなどの最新情報を効率的に収集し、表示するための便利なツールです。WordPressでは、ウィジェットやプラグインを利用して簡単にRSSフィードを設定・表示することができます。ここまで、記事を取得する方法について説明してきましたが、ここでは、RSSフィードの設定方法について詳しく説明します。

ウィジェットを使ったRSS設定方法

WordPressでは、ウィジェットを使って簡単にRSSフィードを表示することができます。具体的には、以下の手順で行います。

１. WordPressの管理画面にログインします。

２. 「外観」メニューから「ウィジェット」を選択します。

３. 「RSS」ウィジェットを探し、表示させたいウィジェットエリア（例えばサイドバーなど）にドラッグ＆ドロップします。もしくはタブで選択します。

４. ウィジェットの設定画面で、別ドメインのRSSフィードURLを入力し、「タイトル」の入力や各表示設定をして完了します。

この方法の利点は、設定が非常に簡単で、初心者でも手軽に利用できることです。ウィジェットを利用することで、サイドバーやフッターなどの任意の場所にRSSフィードを表示することができます。

プラグインを使ったRSS設定方法

より高度な設定やカスタマイズを行いたい場合は、プラグインを利用する方法が便利です。WordPressには多くのRSS関連プラグインがありますが、「WP RSS Aggregator」や「Feedzy RSS Feeds」などが人気です。これらのプラグインを使用することで、フィードの表示方法や内容を細かくカスタマイズできます。

手順

1. WordPressの管理画面で「プラグイン」メニューから「新規追加」を選択し、「RSS」もしくは「Feed」と検索します。

2. インストールしたいプラグインを見つけたら、「今すぐインストール」ボタンをクリックし、その後「有効化」ボタンを押します。

3. プラグインの設定画面に移動し、RSSフィードのURLを追加し、各表示設定をして完了です。

例えば、「WP RSS Aggregator」では、複数のRSSフィードを一括管理し、それぞれのフィードに対して異なる設定を行うことができます。このプラグインは、フィードの内容を簡単にカスタマイズできるため、特に複数のサイトのRSSフィードを集約したい場合に非常に便利です。

プラグインの設定例

フィードの追加: プラグインの設定画面で「新しいフィードを追加」を選び、取得したいRSSフィードのURLを入力します。
表示オプションの設定: 表示する記事の数、要約の長さ、画像の表示有無など、詳細なオプションを設定します。
ショートコードの使用: プラグインが提供するショートコードを使って、投稿やページにフィードを埋め込みます。

RSSフィードの活用方法

ここでは、RSSフィードの活用方法について詳しく解説します。

カスタマイズ方法

RSSフィードをカスタマイズしたい場合は、フィードの出力を調整することで、フィードの内容や表示方法を自由に調整できます。例えば、記事のカテゴリーを表示したり、記事数を変更したりすることが可能です。

カスタムテンプレートの作成例

このコードは、WordPressのテンプレートの一部で、RSSフィードを使用してWithCode Mediaの最新記事を表示しています。

<section id="media" class="media">
  <div class="media-wrap inner-n">
    <h2 class="ttl">WithCode Media</h2>
    <p class="sub-ttl">WithCode Mediaでは、専門知識を持つプロフェッショナルたちが日々記事を投稿中。</p>
      <div class="media-wrap__con">
        <ul class="media-wrap__con__list">
          <?php
              include_once( ABSPATH . WPINC . '/feed.php' );
              $feeduri = 'https://withcode.tech/media/feed/';
              $rss = fetch_feed($feeduri);

              if (!is_wp_error($rss)) {
                  $maxitems = $rss->get_item_quantity(5);
                  $rss_items = $rss->get_items( 0, $maxitems );
              }

              foreach ( $rss_items as $item ) :
              ?>
              <li class="media-wrap__con__list__item">
                <a href="<?php echo esc_url( $item->get_permalink() ); ?>" target="_blank" rel="noopener noreferrer">
                  <div class="media-wrap__con__list__item__img">
                    <?php
                      $first_img = '';
                      if ( preg_match( '/<img.+?src="([^"]+)".*?>/msi', $item->get_content(), $matches ) ) {
                          $first_img = $matches[1];
                      }
                      if ( $first_img ) {
                          echo '<img src="' . esc_url( $first_img ) . '" alt="記事画像">';
                      } else {
                          // 画像がない場合はデフォルトの画像を表示
                          echo '<img src="' . get_template_directory_uri() . '/img/eyecatch.png" alt="デフォルト画像">';
                      }
                      ?>
                  </div>
                  <div class="media-wrap__con__list__item__txt">
                    <p class="media-ttl">
                      <?php
                      $title = $item->get_title();
                      if ( mb_strlen( $title ) > 30 ) {
                          echo mb_substr( $title, 0, 30 ) . '...';
                      } else {
                          echo esc_html( $title );
                      }
                      ?>
                    </p>
                    <p class="media-category">
                      <i class="fa-solid fa-folder"></i>
                      <?php
                        // カテゴリーを取得して表示
                        if ($item->get_categories()) {
                            $categories = array();
                            foreach ($item->get_categories() as $category) {
                                $categories[] = esc_html($category->get_label());
                            }
                            echo implode(', ', $categories);
                        }
                      ?>
                    </p>
                    <?php 
                    $item_date = $item->get_date( 'Y/m/d' );
                    ?>
                    <p class="media-date">
                      <i class="fa-regular fa-clock"></i>
                      <?php echo esc_html( $item_date ); ?>
                    </p>
                  </div>
                </a>
              </li>
              <?php
              endforeach;
              ?>
          </ul>
          <div class="btn">
            <a href="https://withcode.tech/media/" target="_blank" rel="noopener noreferrer">
              <p>メディアを確認する</p>
              <img src="<?php echo get_template_directory_uri(); ?>/img/arrow.png" alt="矢印画像">
            </a>
          </div>
        </div>
    </div>
</section>

このコードは、WordPressのテンプレートの一部で、RSSフィードを使用してWithCode Mediaの最新記事を表示しています。RSSフィードのカスタマイズについて、以下のポイントを説明します。

フィードの取得

$feeduri = 'https://withcode.tech/media/feed/';
$rss = fetch_feed($feeduri);

これらの行でRSSフィードのURLを指定し、フィードを取得しています。

2. 表示する記事数の制限

$maxitems = $rss->get_item_quantity(5);
$rss_items = $rss->get_items( 0, $maxitems );

ここでは最新の5記事を取得しています。この数字を変更することで、表示する記事数を調整できます。

3. 記事情報の表示

foreach ( $rss_items as $item ) :

...

<?php 
  $item_date = $item->get_date( 'Y/m/d' );
?>
<p class="media-date">
  <i class="fa-regular fa-clock"></i>
  <?php echo esc_html( $item_date ); ?>
</p>

...

<?php
  endforeach;
?>

フィードの各項目（記事）について、タイトル、日付を表示しています。

4. タイトルの文字数制限

if ( mb_strlen( $title ) > 30 ) { 
  echo mb_substr( $title, 0, 30 ) . '...'; 
}

タイトルが30文字を超える場合、30文字で切り取って「…」を追加しています。

5. 画像の取得

<div class="media-wrap__con__list__item__img">
  <?php
    $first_img = '';
    if ( preg_match( '/<img.+?src="([^"]+)".*?>/msi', $item->get_content(), $matches ) ) {
       $first_img = $matches[1];
    }
    if ( $first_img ) {
       echo '<img src="' . esc_url( $first_img ) . '" alt="記事画像">';
    } else {
       // 画像がない場合はデフォルトの画像を表示
       echo '<img src="' . get_template_directory_uri() . '/img/eyecatch.png" alt="デフォルト画像">';
    }
  ?>
</div>

記事の本文から最初の画像を抽出しています。画像がない場合はデフォルト画像を使用しています。

6. カテゴリーの表示

<?php
  // カテゴリーを取得して表示
  if ($item->get_categories()) {
    $categories = array();
    foreach ($item->get_categories() as $category) {
      $categories[] = esc_html($category->get_label());
    }
    echo implode(', ', $categories);
  }
?>

記事のカテゴリーを取得して表示しています。

これらの変更を適用する際は、元のデザインや機能を損なわないよう注意してください。また、変更後はテストを行い、正しく動作することを確認してください。

WordPressで使用するPHP基礎文法がわからないという方は、まずはこちらの記事から学習してみましょう。