如何讓Elementor Pro的Post文章列表可以使用不重新載入頁面的方式來切換分頁?

簡介

Elementor Pro的Post文章元素工具雖可以列出指定類型的文章列表,但點擊在其「文章列表分頁」時會重新載入該分頁的頁面,所以有些候想要點擊分頁時讓頁面不重新載入,以讓頁面不會跳動,增加閱讀舒適感。

運用範圍

只要是Elementor Pro 的Post工具都可以套用此法,我自己常運用在首頁有最新公告僅列出5則公告時,若想看更多的歷史公告,就可以用此法讓人點擊分頁時,首頁可不用重新載入就能把更多則公告載入進來。

範例

下方的文章列表,請點擊下方的「分頁」,測試一下網頁是否可以不用重新載入就能切換不同的分頁了。

▼這是經處理過的Elementor Post,點擊分頁時不會重新載入頁面

點擊分頁時會停個1~3秒才出新的分頁內容,主要是它在重新以ajax方式重新跟主機索取資料,而這1~3秒主要取決於主機的回應速度。

如果下列範例有異常,可以點此另看一個範例

▼未經處理過的Elementor Post,點擊分頁時會重新載入頁面

原理與思路

要實現這樣的效果有很多種,例如可以靠「篩選器」的插件來組合出這樣的功能(即ajax載入),而本篇主要講述不靠其它擴充外掛的方式,僅加入片段jQuery就達成這樣的效果。

實作

付費內容,需支付 : 900 個學習幣
您須先登入會員以使用學習幣。

影片

付費影片

總結

有問題嗎?歡迎於下方發問

發佈留言