HTMLサイトにWordPressの新着記事を埋め込む方法｜REST APIとRSSで実装

WordPress(ワードプレス)

2025.08.26

この記事は約5分で読めます。

外部のHTMLサイトにWordPressの新着記事一覧を自動表示したい。そんな時に役立つのが「REST API」と「RSSフィード」です。どちらもWordPressに標準の仕組みなので、追加プラグインなしで実現できます。本記事では、それぞれの方法を具体的なコード例付きで解説します。

なぜHTMLサイトにWordPressの新着記事を流し込むのか？
方法1｜REST APIを利用する
方法2｜RSSフィードを利用する
実装のポイント
まとめ

なぜHTMLサイトにWordPressの新着記事を流し込むのか？

静的HTMLサイトにブログ機能を追加したい
コーポレートサイトのトップページに新着情報だけ表示したい
別ドメインのLPにWordPressの最新記事を連携したい

こうしたニーズに応えるために、外部サイトからWordPressの最新記事を呼び出す仕組みが役立ちます。

方法1｜REST APIを利用する

WordPressは標準でREST APIを提供しており、記事をJSON形式で取得できます。

エンドポイント例：

https://example.com/wp-json/wp/v2/posts?per_page=5&_embed=1

per_page=5：取得件数
_embed=1：アイキャッチ画像やカテゴリ情報も取得

HTMLサイトに設置するサンプルコード：

<div id="wp-latest"></div>

<script>
const API = "https://example.com/wp-json/wp/v2/posts?per_page=5&_embed=1";

fetch(API)
  .then(res => res.json())
  .then(posts => {
    let html = "";
    posts.forEach(p => {
      const title = p.title.rendered;
      const url = p.link;
      const date = new Date(p.date).toLocaleDateString();
      const thumb = p._embedded["wp:featuredmedia"] 
        ? p._embedded["wp:featuredmedia"][0].source_url 
        : "";

      html += `
        <article>
          <a href="${url}" target="_blank" rel="noopener">
            ${thumb ? `<img src="${thumb}" alt="">` : ""}
            <h3>${title}</h3>
            <time>${date}</time>
          </a>
        </article>
      `;
    });
    document.getElementById("wp-latest").innerHTML = html;
  });
</script>

これで最新記事がHTMLサイトに自動表示されます。

方法2｜RSSフィードを利用する

WordPressは標準でRSSフィードを出力しています。

URL例：

https://example.com/feed/

PHPを使う場合のコード例：

<?php
$rss = simplexml_load_file("https://example.com/feed/");
$items = array_slice($rss->channel->item, 0, 5);

foreach($items as $item){
  $title = $item->title;
  $link = $item->link;
  $date = date("Y.m.d", strtotime($item->pubDate));

  echo "<article>
          <a href='{$link}' target='_blank' rel='noopener'>
            <h3>{$title}</h3>
            <time>{$date}</time>
          </a>
        </article>";
}
?>

RSS方式はCORSの影響を受けにくく、外部サイトでも安定して動作します。