見出し画像

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

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

更新日:2023年12月30日

WEB制作しているHISASHIです。

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

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


記事スライダーの動き

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

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

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

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


実装の難易度

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

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

  • JavaScript(swiperのオプションなどで使用)

  • CSS(デザイン微調整用)

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

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


構築環境

バージョン情報

SWELL: 2.10.0(2024.6.30日時点最新)

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


実装方法

ここから先は

6,888字 / 8画像

¥ 9,000

この記事が気に入ったらサポートをしてみませんか?