【Cocoonカスタマイズ】rssショートコードをスライド表示にする方法

はじめに
完成イメージ
使用方法
実装手順
さいごに

はじめに

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

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

完成イメージ

漫画家ちばてつやさん死去 87歳「あしたのジョー」 | NHKニュース

【悲報】東京新聞、ロシア侵略賛成派の一水会信者を擁護してしまう【はてなからもそっぽ向かれる】

「ヨーロッパでは💦という絵文字を使わないようにしましょう」日本同様ちょいちょい使っていたけど理由を今知って顔が死にました…結構生々しい性的興奮を意味するらしい

年齢差恋愛問題、潜在的に炎上する漫画三銃士を連れてきたよ（鈴木先生、PとJK、女子校のこひー先生） - INVISIBLE Dojo.　ーQUIET & COLORFUL PLACE-

使用方法

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の既存の仕組みを有効活用するため、サイト全体のデザイン統一も容易です。