rssショートコードをスライド表示にする方法

はじめに

「新着記事」などの横並び表示を実現するために、ライブラリ「Swiper.js」を利用してスライド表示を行っています。
そこで、rssショートコードにもhorizontalオプションを追加し、スライド表示するようにします。

この記事では、この方法について説明します。

完成イメージ

えをみる（ewomiru）

えをみる（ewomiru）

2026-10-26

テレビに絵を流しっぱなしにして文化資本の格差を減らすアプリ「えをみる」を作った - 山下泰平の趣味の方法

テレビに絵を流しっぱなしにして文化資本の格差を減らすアプリ「えをみる」を作った - 山下泰平の趣味の方法テレビに絵を流しっぱなしにして文化資本の格差を減らすアプリ「えをみる」を作った テレビにパブリックドメインの絵を流しっぱなしにするアプリ...

2026-10-26

中国紙が「VIVANT」を批判　「中国を中傷、脅威論を誇張」 | 毎日新聞

中国紙が「VIVANT」を批判　「中国を中傷、脅威論を誇張」 | 毎日新聞TBS系ドラマ「VIVANT（ヴィヴァン）」を批判する中国紙「環球時報」の記事＝北京で2026年10月26日、畠山哲郎撮影 中国紙「環球時報」は26日、中国のインター...

2026-10-26

美術品ガチャ — Gacha Gallery

美術品ガチャ — Gacha Gallery美術館をゆったり歩いて、ランダムに作品と出会う。Walk a virtual museum and meet artworks at random.

2026-10-26

Apple、iPad miniに史上最大のアップデートを導入

Apple、iPad miniに史上最大のアップデートを導入一段と薄く、一段と軽量なデザインに美しいOLEDディスプレイを搭載し、飛躍的に進化したパフォーマンス、より高速なワイヤレス接続、耐水性能と防塵性能を備えています カリフォルニア州ク...

2026-10-26

使用方法

horizontalオプションを追加します。

[rss url="https://example.com/feed/" horizontal=1]

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('do_shortcode_tag', function ($output, $tag, $attr) {
  if ($tag !== 'rss' || empty($attr['horizontal'])) {
    return $output;
  }

  global $_IS_SWIPER_ENABLE;
  $_IS_SWIPER_ENABLE = true;

  $rules = [
    [
      'search'  => '/a-wrap/',
      'replace' => 'a-wrap swiper-slide',
    ],
    [
      'search'  => '#^(<div[^>]*>)(.*)(</div>)$#s',
      'replace' => '$1<div class="swiper-wrapper">$2</div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>$3',
    ],
    [
      'search'  => '/rss-entry-cards/',
      'replace' => 'rss-entry-cards swiper is-list-horizontal',
    ],
  ];

  foreach ($rules as $rule) {
    $output = preg_replace($rule['search'], $rule['replace'], $output);
  }

  return $output;
}, 10, 3);

さいごに

今回紹介した方法を使えば、RSS表示を簡単に魅力的なスライダー形式へとアップグレードできます。
Swiper.jsの既存の仕組みを有効活用するため、サイト全体のデザイン統一も容易です。