SWELLで記事スライダーを自由に実装する方法

カードの高さを均一にするためのCSSコードを1行追加しました。通常目に見えない部分ですが、追加しておくとデザインの整合性を高めることができます。詳細については、「CSSの記述（デザイン調整）」をご参照ください。

更新日：2023年12月30日

WEB制作しているHISASHIです。

WordPressの人気テーマ「SWELL」で、自作の記事スライダーを設置する方法を解説します。

気になった方は是非ご検討ください。

記事スライダーの動き

例として、記事内にカード型、サムネイル型でスライダーを設置してみました。

動きもSWELL標準の記事スライダーとほぼほぼ変わりありません。
というのも、SWELLに搭載されているswiper（スワイパー）というスライダー用ライブラリをそのまま使用しているからです。

また、「投稿リスト」ブロックを利用してスライダーにしているため、好きな記事だけを並べたり、カテゴリーに絞ったりするのも超簡単。

一度コードを書いてしまえば、数秒でスライダーにすることができます。

実装の難易度

実装の難易度は、脱初心者レベル。

• functions.php、またはプラグイン（swiperの読み込み）

• JavaScript（swiperのオプションなどで使用）

• CSS（デザイン微調整用）

この３箇所にコードをコピペし、必要に応じてオプションなどを設定するだけ。

functions.phpの編集に抵抗ある方や初心者は、「Code Snippets」というプラグインを利用すれば安全にコードを書くことができ、管理もしやすくなります。

構築環境

バージョン情報

SWELL: 2.10.0（2024.6.30日時点最新）

利用確認ができているバージョンです。
不定期的に更新します。

実装方法