WordPressで別ドメインから記事取得！？カテゴリー選択まで実装方法

2024年7月15日

WordPressで別ドメインのサイトから記事を取得したい、更にカテゴリー選択機能を実装したいと思ったことはありませんか？一見難しそうに思えるかもしれません。しかし、適切な方法を知れば、簡単に作成することができます。

本記事では、WordPressの fetch_feed 関数を中心に、安全かつ効率的に記事を取得する方法と、JavaScriptを使用した動的なカテゴリーフィルタリングの実装方法を詳しく解説します。

この記事を通じて、複数のWordPressサイトを連携させた高機能なWebサイトの構築方法を学びましょう。SEO対策やユーザー体験の向上にも役立つ、実践的な知識が身につきます。

WordPressでのPHPの基礎文法から抑えたい方はこちらの記事をご参照ください。

別ドメインから記事を取得するメリット

別ドメインから記事を取得することで、以下のようなメリットがあります。

コンテンツの充実：ご自身サイトのコンテンツを簡単に増やせます。
情報の集約：複数のサイトの情報を一箇所で閲覧できるようになります。
SEOの向上：定期的に更新されるコンテンツは、検索エンジンから好まれます。

それでは、具体的な実装方法を見ていきましょう。

fetch_feed を使用した記事取得

WordPressには fetch_feed という便利な関数があります。これを使うことで、安全かつ簡単にRSSフィードを取得できます。

RSSフィードの設定

まず、RSSフィードを取得するためのコードを見てみましょう。

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 );
}

このコードでは、WordPressの内部関数を使用して、指定したURLからRSSフィードを取得しています。$feeduri変数に取得したいフィードのURLを指定し、fetch_feed()関数でフィードを取得します。エラーがなければ、最新の5件の記事を$rss_itemsに格納します。

カテゴリーの取得と表示

次に、各記事のカテゴリーを取得し表示する方法を見てみましょう。

if ($item->get_categories()) {
  $categories = array();
  foreach ($item->get_categories() as $category) {
    $categories[] = esc_html($category->get_label());
  }
  echo implode(', ', $categories);
}

この部分では、各記事（$item）からカテゴリー情報を取得し、配列に格納しています。esc_html()関数を使用してセキュリティ対策を行い、最後にimplode()関数で配列を文字列に変換して表示しています。

これらのコードを使用することで、別ドメインの記事をご自身のWordPressサイトに表示し、さらにカテゴリー情報も合わせて表示することができます。この方法は、複数のブログを運営している場合や、提携サイトの最新情報をご自身のサイトに表示したい場合などに非常に有効です。

記事取得の実践例

以下は、fetch_feedを使用したRSSフィードを取得する実装です。

このコードは、WordPressテーマのテンプレート部分で、WithCodeの卒業生の声の部分を例に、RSSフィードを取得して表示しています。

<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>

コードの解説

このコードは、外部のRSSフィードを取得し、その内容（タイトル、画像、カテゴリー、日付）をスタイリングされたリストとして表示するものです。セキュリティ面では、esc_urlやesc_html関数を使用してデータをエスケープし、XSS攻撃を防いでいます。

1. RSSフィードの取得

WordPressのフィード関連の関数を読み込み、指定されたURLからRSSフィードを取得します。

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

2. フィードアイテムの取得

エラーがなければ、最新の5件のアイテムを取得します。

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

3. フィードアイテムのループ処理

取得したアイテムを順に処理します。

foreach ( $rss_items as $item ) :

4. 記事画像の取得

記事本文から最初の画像のURLを正規表現で抽出します。

if ( preg_match( '/<img.+?src="([^"]+)".*?>/msi', $item->get_content(), $matches ) ) {
 $first_img = $matches[1];
}

5. タイトルの表示

タイトルが30文字を超える場合は省略して表示します。

$title = $item->get_title();
if ( mb_strlen( $title ) > 30 ) {
  echo mb_substr( $title, 0, 30 ) . '...';
} else {
  echo esc_html( $title );
}

6. カテゴリーの表示

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

if ($item->get_categories()) {
  $categories = array();
  foreach ($item->get_categories() as $category) {
    $categories[] = esc_html($category->get_label());
  }
    echo implode(', ', $categories);
}

7. 日付の表示

記事の日付を指定のフォーマットで取得して表示します。

$item_date = $item->get_date( 'Y/m/d' );

fetch_feedの公式リファレンスはこちらをご参照ください。

非同期でのコンテンツ読み込み

JavaScriptを使用して、カテゴリー選択時に非同期で記事を読み込む機能を実装します。

非同期で記事を読み込む方法

カテゴリーが選択されたときに、ページ全体をリロードせずに記事を更新できれば、ユーザー体験が大幅に向上します。そこで、JavaScriptを使用して非同期で記事を読み込む機能を実装しましょう。

function loadPosts(category = '') {
    fetch(`get_posts.php?category=${encodeURIComponent(category)}`)
        .then(response => response.text())
        .then(html => {
            document.getElementById('posts-container').innerHTML = html;
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

document.getElementById('category-select').addEventListener('change', function() {
    loadPosts(this.value);
});

コードの解説

loadPosts() 関数: 選択されたカテゴリーに基づいて記事を非同期で読み込みます。
fetch(): 選択されたカテゴリーをパラメータとして get_posts.php にリクエストを送信します。
encodeURIComponent(): カテゴリー名を適切にエンコードし、URLの安全性を確保します。
イベントリスナー: カテゴリーが選択されたときに loadPosts() 関数を呼び出します。

この JavaScript コードは、カテゴリーが選択されるたびに loadPosts() 関数を呼び出し、選択されたカテゴリーに応じた記事を非同期で読み込みます。encodeURIComponent() 関数を使用してカテゴリー名をエンコードすることで、特殊文字を含むカテゴリー名でも安全に扱えるようになっています。