静的サイトのようなスピードを求める方は非推奨ですがSWELLのPjaxを使われる方がいらっしゃいます。
その場合JavaScriptなどがうまく機能しない不具合が起きるので、対応が必要になります。
SWELL
ページ遷移高速化機能（pjax）の使い方と注意点 | WordPressテーマ SWELL
このページでは、SWELL 2.0.1より追加された「ページ遷移高速化機能」について解説していきます。 ページ遷移高速化機能は、カスタマイザーの「高度な設定」>「高速化機能…
その備忘録です。
目次
Pjax遷移のSwiperスライダーの対応方法
Pjaxにした場合、初回はSwiperのスライダーが動いていたのですが、別のページから戻ると動かなくなってしまっていたので、対応してみました。
対応前のコード
Pjaxにする前のコードです。
function enqueue_swiper_assets() {
if (is_front_page()) { // トップページのみ適用
// SwiperのCSSとJSを読み込み
wp_enqueue_style('swell_swiper');
wp_enqueue_script('swell_swiper');
wp_add_inline_script('swell_swiper', '
document.addEventListener("DOMContentLoaded", function() {
const swiper = new Swiper(".swiper-container", {
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
speed: 1000,
allowTouchMove: true,
breakpoints: {
600: {
slidesPerView: 2,
spaceBetween: 10,
},
960: {
slidesPerView: 3,
spaceBetween: 20,
},
}
});
});
');
}
}
add_action('wp_enqueue_scripts', 'enqueue_swiper_assets');対応後のコード
Pjaxの場合はトップページ限定にしても意味がないので、条件は削除しました。
修正前は、初回ロード時のみSwiperが初期化され、Pjax遷移後のページでは動作しませんでした。
しかし修正後は、initializeSwiper関数とwindow.SWELLHOOK.barbaAfterを組み合わせることで、Pjax遷移後でもSwiperが確実に動作するようになりました。
function enqueue_swiper_assets() {
// SwiperのCSSとJSを読み込み
wp_enqueue_style('swell_swiper');
wp_enqueue_script('swell_swiper');
// Swiperの初期化スクリプトを追加
wp_add_inline_script('swell_swiper', '
// Swiperの初期化関数
function initializeSwiper() {
document.querySelectorAll(".swiper-container").forEach((element) => {
if (element.swiper) {
element.swiper.destroy(true, true); // 既存のSwiperインスタンスを破棄
}
new Swiper(element, {
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
speed: 1000,
allowTouchMove: true,
breakpoints: {
600: {
slidesPerView: 2,
spaceBetween: 10,
},
960: {
slidesPerView: 3,
spaceBetween: 20,
},
},
});
});
}
// 初回ロード時にSwiperを初期化
document.addEventListener("DOMContentLoaded", () => {
initializeSwiper();
});
// Pjax遷移後にSwiperを再初期化
if (window.SWELLHOOK && window.SWELLHOOK.barbaAfter) {
window.SWELLHOOK.barbaAfter.add(() => {
initializeSwiper(); // Pjax遷移後に再初期化
});
}
');
}
add_action('wp_enqueue_scripts', 'enqueue_swiper_assets');以上です。
