SWELLのPjaxで別ページから戻ると、自作のSwiperが動かなくなる場合の実装例です。初回表示とPjax遷移後の両方で初期化し、専用クラスを付けたスライダーだけを対象にします。
2026年10月2日にPHPの依存ファイル登録と出力順を確認し、10月3日に隔離環境の実Pjax遷移、ブラウザーの戻る・進む、二つのスライダーの個別操作を確認しました。
Pjaxはテーマ内部のフックに依存するため、テーマ更新後は再確認してください。
SWELL公式のPjax解説も参照してください。
適用前の準備
子テーマのファイルをバックアップし、検証環境で作業します。同じ要素を初期化するコードが別にある場合は、重複しないよう停止します。本例のために本番サイトの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つのコードを組み合わせてください。

複数設置時に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などの最適化との併用は別途確認が必要です。




