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

2025.04.082026.09.30

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などから重ねて読み込まないでください。テーマ側の登録名やバージョンが変わる場合は、更新後に再確認が必要です。

表示枚数・動かない場合・元に戻す方法

この例の表示枚数は600px未満で1.2枚、600px以上で2枚、960px以上で3枚です。小数にすることで次のカードの一部が見えます。取得する記事数が表示枚数以下のときは、操作ボタンが隠れます。

動かない場合は、追加CSSクラス、PHPのページID、カスタムJSの保存、キャッシュを順に確認します。開発者ツールでSwiperの読み込みエラーや、ほかのJavaScriptのエラーも調べます。このコードはSwiperが読み込まれていなければ投稿リストを加工しません。

元に戻す場合は、追加したJavaScript・CSS・PHPだけを削除し、投稿リストから専用クラスを外します。投稿リストブロック自体を削除する必要はありません。旧版から置き換える場合も、変更前の控えを残してください。

設定の詳細はSwiper 7の公式API資料を参照できます。このページが読み込むファイルのヘッダーは、2026年9月30日の確認時点でSwiper 7.0.6でした。SWELLのすべてのバージョンで同じ構成になることを保証するものではありません。

検証した環境と結果

2026年9月30日、WAZAの公開ページをブラウザ幅1366px・390pxで確認しました。PCでは3枚、スマホ相当の幅では次のカードの一部が表示され、ページ全体の横はみ出しはありませんでした。2つのリストが独立して動くこと、PCでEnterキーによる送り操作と末尾ボタンの無効化も確認しています。

この確認はブラウザの表示幅を変えた検証です。実機の全機種・全ブラウザでのタッチ操作や、購入後のコード表示は確認範囲に含みません。下の画像はPC表示の記録で、操作できる見本は記事上部にあります。