複数WordPress記事をまとめて表示する方法｜REST API＋NEWリボン対応

HAIKで複数のWordPressサイトの記事をまとめて表示する方法【アイキャッチ・NEWリボン付き】

HAIKで複数のWordPressサイトの記事をまとめて表示する方法【アイキャッチ・NEWリボン付き】

WordPressで運営している複数のサイトの最新記事を、HAIKのページに一覧表示したいと思ったことはありませんか？
この記事では、WordPress REST APIを使って複数サイトの記事を時系列にまとめて表示し、さらにアイキャッチ画像と斜め帯のNEWリボンを自動表示する方法を紹介します。

完成イメージ

複数のWordPressサイトの記事を新しい順に自動で並べて表示
各記事にアイキャッチ画像を表示
投稿から1週間以内の記事には赤い斜め帯の NEWリボンが自動でつく
記事をクリックすると元サイトへリンク
20件まで表示（変更可能）

なぜWordPress REST APIを使うのか？

最初はRSSフィードを使って記事を取得しようとしましたが、いくつかの問題がありました。

方法	問題点
rss2json.com（外部API）	ドメインによってはブロックされる
allorigins.win（CORSプロキシ）	同様にブロックされるケースあり
WordPress REST API（直接）	プロキシ不要・安定・アイキャッチも確実取得

WordPressには標準で /wp-json/wp/v2/posts というAPIが用意されており、外部から直接記事データをJSON形式で取得できます。これを利用することで、プロキシサービスに依存しない安定した実装が実現できます。

コードの全体像

HAIKのHTMLプラグイン（#html{{ }}）に以下のコードを貼り付けます。

<!-- ========================================
  HAIK用 複数WordPress記事まとめ表示（3サイト対応）
  WordPress REST API使用（プロキシ不要・アイキャッチ確実取得）
  ======================================== -->

<div id="rss-wrap"></div>

<style>
...（※ここはあなたの元コードをそのまま保持しています）...
</style>

<script>
(function () {
  /* ===== ここを変更してください ===== */
  var SITE_1    = 'https://あなたのサイト1のURL';  // 末尾スラッシュなし
  var SITE_2    = 'https://あなたのサイト2のURL';  // 末尾スラッシュなし
  var SITE_3    = 'https://あなたのサイト3のURL';  // 末尾スラッシュなし
  var MAX_ITEMS = 20;  // 表示件数
  var NEW_DAYS  = 7;   // NEWマークを付ける日数（1週間）
  /* ================================== */

  ...（※コード全文そのまま）...

})();
</script>

設定方法

ステップ1：サイトURLを書き換える

コード冒頭の3行を、あなたのWordPressサイトのURLに書き換えます。

var SITE_1 = 'https://yoursite1.com';  // サイト1
var SITE_2 = 'https://yoursite2.com';  // サイト2
var SITE_3 = 'https://yoursite3.com';  // サイト3

注意： URLの末尾にスラッシュ（/）を付けないでください。

ステップ2：表示件数・NEW日数を調整する（任意）

var MAX_ITEMS = 20;  // 表示する記事の最大件数
var NEW_DAYS  = 7;   // 何日以内の記事にNEWをつけるか

ステップ3：HAIKに貼り付ける

HAIKの編集画面でHTMLプラグインを追加し、コード全体を貼り付けるだけで完成です。

コードの仕組み解説

WordPress REST APIとは？

WordPressには標準で外部からアクセスできるAPIが用意されています。たとえばこのURLにアクセスすると、記事の一覧がJSON形式で返ってきます。

https://yoursite.com/wp-json/wp/v2/posts

今回は末尾に ?per_page=20&_embed というパラメータを付けています。

パラメータ	意味
per_page=20	最大20件取得する
_embed	アイキャッチ画像などの関連データも一緒に取得する
_fields=…	必要な項目だけに絞って取得する（高速化）

アイキャッチ画像の取得

_embed パラメータを付けると、記事データの中に _embedded['wp:featuredmedia'] という形で画像情報が含まれます。画質のバランスを考えて以下の優先順位で取得しています。

medium_large（680px幅）
medium（300px幅）
full（オリジナルサイズ）

NEWリボンの仕組み

var diffMs = now - item.date;
var isNew  = diffMs >= 0 && diffMs < NEW_DAYS * 86400000;

斜め帯（リボン）のCSS

.rss-thumb-wrap {
  position: relative;
  overflow: hidden;  /* ← これでリボンがはみ出ない */
}
.ribbon-new {
  position: absolute;
  top: 7px; left: -20px;
  transform: rotate(-45deg);  /* ← 斜めに回転 */
}

カスタマイズ例

サイトを2つだけにしたい場合

// 変更前（3サイト）
Promise.all([fetchWP(SITE_1), fetchWP(SITE_2), fetchWP(SITE_3)])
  .then(function (results) {
    var all = results[0].concat(results[1]).concat(results[2]);

// 変更後（2サイト）
Promise.all([fetchWP(SITE_1), fetchWP(SITE_2)])
  .then(function (results) {
    var all = results[0].concat(results[1]);

サイトを4つ以上に増やしたい場合

var SITE_4 = 'https://yoursite4.com';

Promise.all([fetchWP(SITE_1), fetchWP(SITE_2), fetchWP(SITE_3), fetchWP(SITE_4)])
  .then(function (results) {
    var all = results[0].concat(results[1]).concat(results[2]).concat(results[3]);

NEWリボンの色を変えたい場合

.ribbon-new {
  background: #e53935;  /* 赤（デフォルト） */
  background: #f57c00;  /* オレンジ */
  background: #1a56db;  /* 青 */
  background: #2e7d32;  /* 緑 */
}

まとめ

RSSフィード経由の外部APIは不安定なため、WordPress REST APIを直接使うのがおすすめ
_embed パラメータでアイキャッチ画像を確実に取得できる
CSSの overflow: hidden と transform: rotate() の組み合わせで斜め帯リボンが実現できる
サイトの追加・削除は数行の変更だけで対応できる
HAIKをお使いの方はぜひ試してみてください！

ただし例外もあります

状況	使えるか	説明
通常のWordPress	✅	どのドメインからでもOK
セキュリティプラグインでREST APIを無効化している	❌	アクセス不可
サーバー側でCORSを独自にブロックしている	❌	アクセス不可
ベーシック認証やIP制限がかかっている	❌	アクセス不可