SWELLの投稿リストをSwiperでスライダーにする方法｜動く見本・複数設置

2025.04.082026.10.31

SWELLの投稿リストブロックに前後ボタンを付け、Swiperで記事を切り替える方法です。

投稿リストの絞り込みを使ったまま、スマホでは次のカードを少し見せ、PCでは3枚を並べます。

PHPでSWELL同梱のSwiperを読み込み、JavaScriptとCSSで対象の投稿リストを調整します。

JavaScript・CSSの完成コードは記事後半の有料部分です。

動く見本と、導入前に必要な設定は無料部分で確認できます。

横へ動かすだけなら、CSSによる横スクロールも選べます。

方法の違いは投稿リスト・記事スライダーの比較表をご覧ください。

動く見本：前後ボタンで記事を選ぶ

1つ目は6件、2つ目は4件の投稿リストです。

前後ボタンはそれぞれのリストだけを操作します。

自動再生と無限ループは使わず、先頭・末尾では進めない方向のボタンを無効にしています。

複数設置の見本です。

片方を操作して、もう片方が動かないことも確認できます。

導入前の確認と貼り付ける場所

この方法はSWELLのカード型の投稿リストを対象にしています。

記事を選ぶ条件・並び順・取得件数は投稿リストブロックで設定し、スライダーの表示枚数はJavaScriptで設定します。

2件未満のときは通常の投稿リストを残します。

変更前のPHP・CSS・JavaScriptを保存し、検証用ページで試します。

PHPは子テーマのfunctions.php、またはCode SnippetsのPHPスニペットへ追加します。

Code Snippetsを使う場合も、エラーが起きない保証にはなりません。

復旧できる編集手段を用意してください。

CSSは「外観 → カスタマイズ → 追加CSS」へ、JavaScriptはSWELLの記事編集画面の「カスタムJS」欄へ追加します。

カスタムJS欄にはscriptタグを付けません。

どちらも既存のコードへ重複して追加せず、この実装を1回だけ配置します。

投稿リストに専用クラスを付ける

投稿リストブロックを選択し、右側のブロック設定にある「高度な設定 → 追加CSSクラス」にwaza-post-swiperと入力します。

先頭のドットは不要です。

同じページに複数置く場合も、それぞれの投稿リストに同じクラスを付けます。

旧版のslideクラスを使っている場合は、旧JavaScriptと旧CSSを削除してから置き換えます。

旧版と新版を併用すると、同じリストを二重に加工する原因になります。

PHP：対象ページでSwiperを読み込む

次の例の26907はこの見本ページのIDです。

使うページのIDへ必ず置き換えてください。

PHPコードの先頭に開きタグがあるファイルへ追記するときは、PHPの開きタグを追加しません。

add_action('wp_enqueue_scripts', function () {
    // 26907を、表示したい投稿・固定ページのIDに変更します。
    if (!is_singular() || !is_singular(array('post', 'page')) || get_queried_object_id() !== 26907) {
        return;
    }
    wp_enqueue_script('swell_swiper');
    wp_enqueue_style('swell_swiper');
}, 20);

SWELL同梱のswell_swiperを利用する実装です。

別バージョンのSwiperをCDNなどから重ねて読み込まないでください。

テーマ側の登録名やバージョンが変わる場合は、更新後に再確認が必要です。