網站最後更新日期:2018年8月29日
歡迎大家來到暢想資源 AREFLY.COM! 個人網站 更多聯絡方式
×

【純代碼】為WordPress添加AJAX無刷新之評論分頁功能

WordPress預設自帶一個「評論分頁」功能,可以方便的防止過多評論導致頁面過長,但是當訪客在切換評論時,頁面需要不停地經過刷新、加載,降低訪客體驗,而今天「暢想資源」就來教大家如何為WordPress添加AJAX無刷新的評論分頁功能,提升網站的用戶體驗! :mrgreen:

預覽

可參考本站「留言本」頁面! :grin:

教學

提示:在開始進行以下步驟前,請先確定你的網站已經成功加載jQuery庫!

1、首先於主題的「迴響 (comments.php)」文件內的「評論主題DIV(例如 commentlist 等)」的DIV外添加 <div id="loading-comments"><span>評論載入中,請稍等...</span></div>

wordpress-ajax-comment-pages-1

2、然後將下列代碼新增為JS文件(例如「ajax-comment-pages.js」等)並儲存至WordPress主題目錄下,然後在網頁內使用 script 來引用該文件即可!

注意:請根據各行注釋將相關DIV的 idclass 進行適當修改後方可於網頁內正常使用!

3、現在在網頁內試試看點擊你的評論分頁,是不是已經可以實現無刷新加載了?如果還不行,請確定DIV是否已經設定正常,或者於下方留言說明問題,本站將會盡力幫你解決! :razz:

參考

WordPress Ajax 評論分頁

WordPress分頁評論Ajax載入

覺得這篇文章有用嗎?分享一下讓更多人受益吧!

© 版權聲明:本文章採用「姓名標示-非商業性-相同方式分享 4.0 國際(CC BY-NC-SA 4.0)」於「」發布,轉載時須以相同方式發布並註明「原文鏈接」!

本文固定鏈接:https://www.arefly.com/zh-tw/wordpress-ajax-comment-pages/

本文章由「超級efly」於2014年10月13日發表於「WordPress」分類

你可以發表評論,並在保留原文地址及作者的情況下引用到你的網站

轉載請註明:【純代碼】為WordPress添加AJAX無刷新之評論分頁功能 | 暢想資源

關鍵字:, , ,

【純代碼】為WordPress添加AJAX無刷新之評論分頁功能:目前有 95 條留言
訪客以 55:40 大幅領先博主

評論載入中,請稍等……
  1. 44樓
    1111 Taiwan; Republic of China (ROC) Google Chrome Windows

    111

    [回復]
  2. 43樓
    黃小蚊 China Google Chrome Windows

    博主好強 這些都是wordpress經典的功能......

    [回復]
  3. 42樓
    yanyan China Google Chrome Windows

    真的可以嗎?我試試

    [回復]
  4. 41樓
    你好 China Google Chrome Windows

    測試下,看看

    [回復]
  5. 40樓
    leejon China Google Chrome Windows

    測試ajax評論

    [回復]
  6. 39樓
    曉庄 China Google Chrome Windows

    分頁倒是出來了。但有一個問題,點擊回復,會刷新頁面,時好時壞。
    博主能幫忙看下嘛

    [回復]
  7. 38樓
    曉庄 China Google Chrome Windows

    唉。沒弄好。一直出不來。

    [回復]
  8. 37樓
    拽立網 China Google Chrome Windows

    謝謝博主分享好東西,我學習研究一下!

    [回復]
    • 感謝支持! :razz: :razz: :razz:

      [回復]
      • 拽立網 China Google Chrome Windows

        弄不好,點擊下一頁消失,全部消失了!錯在哪裡? :shock:

        [回復]
  9. 36樓
    chasonma China QQ瀏覽器 Windows

    路過,來看看! :mrgreen:

    [回復]
  10. 35樓
    亡月帝 China Google Chrome Windows

    錯過了幾篇文章~~~~

    [回復]
  11. 34樓
    我就有 China Google Chrome Windows

    謝謝分享,學習了,博主你的頭像好給力啊 - -!

    [回復]
  12. 33樓
    料網 China Mozilla Firefox Windows

    博主,我今天嘗試了一下。為什麼點擊頁腳載入之後,評論列表重複出現了兩次。。不知道這裡能不能寫鏈接,詳見這裡:http://www.liaosam.com/my-2014.html 。點擊底部評論的 頁碼1 之後 好像頁面載入的時候評論整個先後刷了兩次(我注意的是右側滾動條位置,第一次好像正常,第二次刷了以後導致出現兩次評論列表。。)。

    [回復]
    • 你好~我之前也遇到過類似問題,個人感覺是因為JS中的DIV沒有設置好,才導致這樣重複顯示~你看看JS中的元素都按自己的需要調整了么? :?: :?:

      [回復]
      • 料網 China 搜狗瀏覽器 Windows

        謝謝博主的快速回復!仔細檢查了一遍,元素div和對象名稱都是對的,現在懷疑可能是我用的另一個ajax提交評論的JS影響的。希望能順利解決!

        [回復]
  13. 32樓
    協會主席 China Mozilla Firefox Windows

    翻頁後頭像載入不了了。。

    [回復]
    • :?: :?: 奇怪...我這裡正常的啊?能不能F12看看是什麼錯誤呢? :sorry: :sorry:

      [回復]
  14. 好像不兼容我主題

    [回復]
  15. 30樓
    大肥羊 China Mozilla Firefox Windows

    開了圖片lazyload,翻頁後頭像就載入不進來了。。。。

    [回復]
    • :sorry: :sorry: 奇怪?我的網站麼?我這裡看起來沒問題啊... :shock: :shock:

      [回復]
  16. 29樓
    大肥羊 China Mozilla Firefox Windows

    評論要翻頁的文章不多,就不折騰了。

    [回復]
  17. 28樓
    凱凱 China Google Chrome Windows

    帥哥,我使用了不行啊,點擊下一頁只顯示在載入中,列表不顯示 :(

    [回復]
    • :sorry: :sorry: 很可能是因爲你的主題評論DIV不同,自己拿F12看看修改對應代碼就行了~ :mrgreen: :mrgreen:

      [回復]
  18. 27樓
    從良未遂 China Google Chrome Windows

    我的是主題自帶的哎

    [回復]
  19. 26樓
    fendou China Mozilla Firefox Windows

    我想問下博主這個評論功能怎麼弄呢 又有表情還可以插入鏈接

    [回復]

發表評論



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter