Amazonで商品を見る セール会場へ

SWELL│Pjax遷移のSwiperカスタマイズの対応方法

SWELLのPjaxで別ページから戻ると、自作のSwiperが動かなくなる場合の実装例です。初回表示とPjax遷移後の両方で初期化し、専用クラスを付けたスライダーだけを対象にします。

2026年10月2日にPHPの依存ファイル登録と出力順を確認し、10月3日に隔離環境の実Pjax遷移、ブラウザーの戻る・進む、二つのスライダーの個別操作を確認しました。

Pjaxはテーマ内部のフックに依存するため、テーマ更新後は再確認してください。

SWELL公式のPjax解説も参照してください。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

適用前の準備

子テーマのファイルをバックアップし、検証環境で作業します。同じ要素を初期化するコードが別にある場合は、重複しないよう停止します。本例のために本番サイトのPjaxを有効にする必要はありません。すでにPjaxを使うサイトで、独自スライダーを追加する場合の例です。

1. スライダーのHTML

投稿または固定ページの「カスタムHTML」ブロックに貼り付けます。スライドを増やす場合はswiper-slideを追加します。waza-pjax-sliderは本例専用のクラスです。

<div class="swiper-container waza-pjax-slider" aria-label="サンプルスライダー">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><p>スライド1</p></div>
    <div class="swiper-slide"><p>スライド2</p></div>
    <div class="swiper-slide"><p>スライド3</p></div>
  </div>
  <button type="button" class="waza-prev">前へ</button>
  <button type="button" class="waza-next">次へ</button>
  <div class="swiper-pagination"></div>
</div>

2. 見た目のCSS

子テーマのstyle.css、または追加CSSに貼り付けます。他のスライダーには適用しません。

.waza-pjax-slider { max-width: 40rem; margin: 1rem auto; overflow: hidden; }
.waza-pjax-slider .swiper-slide { box-sizing: border-box; padding: 2rem; background: #f4f4f4; }
.waza-pjax-slider .swiper-pagination { position: static; margin-top: .5rem; }
.waza-pjax-slider button { padding: .5rem 1rem; border: 1px solid currentColor; }
.waza-pjax-slider button:focus-visible { outline: 2px solid #075cab; outline-offset: 2px; }

3. JavaScriptを子テーマに保存

子テーマにjsフォルダーを作り、次の内容をjs/waza-pjax-slider.jsとして保存します。記事のカスタムHTMLブロックにはJavaScriptを追加しません。

(() => {
  if (window.wazaPjaxSliderReady) return;
  window.wazaPjaxSliderReady = true;
  const instances = new Map();
  function init() {
    for (const [element, instance] of instances) {
      if (!element.isConnected) {
        if (!instance.destroyed) instance.destroy(true, true);
        instances.delete(element);
      }
    }
    if (typeof window.Swiper !== 'function') return;
    document.querySelectorAll('.waza-pjax-slider').forEach(element => {
      if (element.swiper && !element.swiper.destroyed) return;
      try {
      const instance = new Swiper(element, {
        loop: false,
        autoplay: false,
        speed: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300,
        slidesPerView: 1,
        spaceBetween: 16,
        navigation: {
          nextEl: element.querySelector('.waza-next'),
          prevEl: element.querySelector('.waza-prev')
        },
        pagination: { el: element.querySelector('.swiper-pagination'), clickable: true }
      });
      instances.set(element, instance);
      } catch (error) {
        // 1件の失敗で、ほかのスライダーの初期化を止めない。
        console.warn("waza-pjax-slider: 初期化できない見本をスキップしました", error);
      }
    });
  }
  const after = window.SWELLHOOK && window.SWELLHOOK.barbaAfter;
  if (after && typeof after.add === 'function') after.add(init);
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once: true});
  else init();
})();

各スライダー内のボタンを指定するため、別スライダーのボタンと混線しません。初期化済みの要素は再作成せず、遷移で文書から外れた要素は破棄します。自動再生は無効で、「次へ」「前へ」はTabで移動してEnterまたはSpaceで操作できます。

4. ファイルを読み込むPHP

子テーマのfunctions.phpへ追加します。すでにPHP開始タグがあるファイルでは、先頭の<?phpを重ねて貼り付けないでください。SWELLのスクリプトとSwiperを依存関係に指定し、テーマのフックが用意された後に本例を読み込みます。

<?php
add_action( 'wp_enqueue_scripts', 'waza_enqueue_pjax_slider', 20 );
function waza_enqueue_pjax_slider() {
    // Pjaxで途中からスライダーのページへ入れるよう、初回ページにも読み込む。
    wp_enqueue_style( 'swell_swiper' );
    wp_enqueue_script( 'waza-pjax-slider', get_stylesheet_directory_uri() . '/js/waza-pjax-slider.js',
        array( 'swell_script', 'swell_swiper' ), '1.0.0', true );
}

スライダーがないページからPjaxで入る場合にも備え、この小さなスクリプトとSwiperは全ページで読み込みます。is_front_page()などで初回の読み込みを絞ると、入口によって動かない場合があります。スライダー自体の初期化は専用クラスがあるページだけです。

確認した動作と確認が必要な範囲

ローカルの実テーマで、スライダーなしのページから移動→操作→離脱→再入場を確認しました。同じ文書のまま遷移し、初期化処理が各遷移で呼ばれることも確認しています。1280pxと390px幅で表示し、390px幅ではページ全体の横はみ出しがなく、Enterで次へ、Spaceで前へ操作できました。

実機のタッチ操作と、遅延読み込み・最適化プラグイン併用は未検証です。

導入サイトではこれらも確認してください。

OSの動きを減らす設定はコードで参照していますが、設定切り替えの実機検証は行っていません。

元に戻す方法

追加したwaza_enqueue_pjax_sliderの関数とadd_action、専用CSS、カスタムHTMLを取り除き、追加したJSファイルを使わない状態に戻します。キャッシュを更新して通常表示を確認してください。テーマやサイト全体のPjax設定を変更する処理は、このコードにはありません。

実装する際は本稿の4つのコードを組み合わせてください。

SWELL 2.19.0のローカル環境でPjax再入場後に表示されたスライダー
2026年10月1日撮影。実テーマを使ったローカル検証画面です。本番サイトのPjax設定は変更していません。

複数設置時に1件だけ初期化できない場合

スライダーごとに初期化をtry・catchで囲み、1件が失敗しても後続の初期化を続けます。失敗した例は作成済みのMapへ登録しません。

複数要素、例外、離脱時の破棄を模したテストに加え、2026年10月3日に実WordPress / SWELLのPjax遷移と履歴移動後の操作を確認しました。

本番WAZAにはこの例のスライダーを導入していないため、記事間の通常移動だけではPjax検証の代わりになりません。

初回ページで依存ファイルを確認する

最初に開くページでもswell_script・swell_swiperの後に子テーマのjs/waza-pjax-slider.jsが出ることを確認します。WordPressの実際の出力順は確認済みですが、ファイルの配置とHTTPでの取得は導入先で確認してください。別の記事からスライダーへ移動し、戻る・進むの後も操作できることを確認してから本番へ反映します。Pjaxを使わない通常の記事移動は、この検証の代わりになりません。

実Pjaxの履歴移動と二つのスライダーを確認する

確認順期待する結果
スライダーなし→二つのスライダーA・Bがそれぞれ初期化される
AをEnter、BをSpaceで操作操作したスライダーだけが1枚進む
スライダーなしへ移動→ブラウザーで戻る本文が戻り、再び次へボタンを操作できる
ブラウザーで進む移動先の本文へ切り替わる

PjaxはURLだけ先に変わる場合があるため、本文が切り替わってから次の操作を行います。

2026年10月3日、WordPress 7.1.2 / SWELL 2.19.0の隔離環境で、実際のページ取得とブラウザー履歴を使って上表を確認しました。

通常のリンク移動ではページ全体を再読込せずに本文が入れ替わり、AとBの操作は互いに影響しませんでした。

異なるURLパスのページから戻った後は、A・Bそれぞれのページ送りが3個で、Aの次へボタンも再操作できました。

URLのクエリーだけを変更する形式では、今回、戻る操作でURLと本文が一致しない状態がありました。

履歴の成功確認には異なるパスを使い、クエリーだけの形式を含む全URLでの互換性は保証していません。

導入先でも本文・ボタン・ページ送りの数を確認し、重複した初期化がないかを調べてください。

画像はAだけを2枚目に進め、Bを1枚目に残した状態です。

実機タッチ操作、スマホでの追加操作、WP Rocketなどの最適化との併用は別途確認が必要です。

二つのスライダーのうち上側だけを2枚目に進めた実画面
Aを2枚目、Bを1枚目にした個別操作の画面。履歴移動は別途実Pjaxで確認。2026年10月3日、隔離環境で撮影。
  • URLをコピーしました!

自力で解決できないときは

WordPressのエラー・不具合対応

原因の切り分けから復旧、再発防止の設定まで承ります。1時間 ¥5,000〜(税込)。管理画面に入れない、表示が崩れるといった急ぎのご相談にも対応します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressのエラー・不具合対応のサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次