M.
開発ツール WordPress

Rssemble Cards for RSS Feeds

複数RSSフィードをOGP画像付きカードグリッドで表示するWordPressプラグイン。外部サービス依存なし。

Rssemble Cards for RSS Feeds

複数のRSSフィードから記事を集め、OGP画像付きのカードとして一覧表示するWordPressプラグイン。自分が運営している別ブログやnote、YouTubeの新着などを、WordPressサイトの好きな場所にまとめて表示できる。WordPress.orgの公式プラグインディレクトリで公開しており、管理画面からそのまま検索してインストールできる。

こんな場面で使える

  • 複数のブログやメディアで発信していて、新着記事をメインサイトに集約したいとき
  • 関連サイトやおすすめサイトの更新情報を、見栄えの良いカードで紹介したいとき
  • 外部のウィジェットサービスに頼らず、WordPressだけで完結させたいとき

主な機能

  • 複数フィードの集約: 登録した複数のRSSフィードをまとめて取得し、同じURLの記事は重複を除いて新しいものを採用する。
  • OGP画像の自動取得: RSSに画像がない場合は記事ページのog:imageを取りに行き、それもなければデフォルト画像を表示する。
  • 8種類のレイアウト: グリッド、リスト、縦型リスト、テキスト、1行テキスト、画像のみ、カルーセル、ポップアップグリッドから選べる。
  • レスポンシブ対応: PCでは指定した列数、タブレットでは2列、スマホでは1列に自動で切り替わる。
  • テーマ色への追従: ブロックテーマ(FSE)のカラー設定を読み取り、サイトのデザインになじむ配色で表示する。
  • ライブプレビュー付き管理画面: 設定を変えると、PC・タブレット・スマホ幅のプレビューがその場で更新される。

使い方

  1. WordPressの「プラグイン > 新規追加」で「Rssemble Cards for RSS Feeds」を検索してインストール・有効化する。
  2. 「設定 > Rssemble Cards」でフィードのURLや表示件数、レイアウトを設定する。
  3. 表示したい場所にショートコード[rssecafo]を貼る。[rssecafo type="carousel" columns="3"]のように、場所ごとにレイアウトを変えることもできる。

WordPressがなくても全レイアウトを試せるデモページも用意している。

技術構成

PHPで実装し、WordPressに組み込まれているSimplePie(RSS解析)・トランジェント(キャッシュ)・DOMDocument(HTML解析)だけを使っている。OGP画像の取得はcurl_multiで並列化し、WordPressのプロキシ設定やSSL検証にも従う。テストはPHPUnitに依存しない独自のテストランナーで実行している。

工夫した点

RSSの表示で一番遅くなるのは、記事ごとのOGP画像の取得だ。これを並列化したうえで、結果をトランジェントにキャッシュし、WP-Cronに頼らずアクセス時に更新する仕組みにした。キャッシュ期間は12時間から1か月まで選べ、フィードの取得に失敗したときは古いキャッシュを表示し続けるので、相手サイトが落ちていても表示が空にならない。外部サービスを一切使わないので、利用者の情報を第三者に送ることもない。

よくある質問

無料で使えますか?

WordPress.orgの公式プラグインディレクトリで公開している無料のプラグインで、追加料金もない。

どんなフィードに対応していますか?

WordPressに組み込まれたSimplePieでフィードを読み込むので、一般的なRSSやAtomのフィードに対応している。ブログやnote、YouTubeチャンネルなどのフィードURLを登録できる。

新しい記事がすぐに表示されないのはなぜ?

表示を速くするため、取得した記事をキャッシュしている。キャッシュ期間は12時間から1か月まで選べ、期限が切れたあとのアクセスで新しい記事に更新される。

同じカテゴリの制作物

gh-like-diff
開発ツール CLI / npm

gh-like-diff

git差分をGitHub風の自己完結HTMLで出力するCLI/JSライブラリ。シンタックスハイライト・コマンドパレット・ミニマップ搭載。

  • #TypeScript
  • #Node.js
  • #CLI