网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 赞好Facebook 追随Twitter 关注微博
关注微信公众号
捐款 更多联络方式
×

【純代碼】為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/wordpress-ajax-comment-pages/

本文章由“超级efly”于2014年10月13日发表于“WordPress”分类

你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站

转载请注明:【純代碼】為WordPress添加AJAX無刷新之評論分頁功能 | 畅想资源

关键字:, , ,

【純代碼】為WordPress添加AJAX無刷新之評論分頁功能:目前有 94 条留言
访客以 54:40 大幅领先博主

评论载入中,请稍等……
  1. 43楼
    黄小蚊 China Google Chrome Windows

    博主好强 这些都是wordpress经典的功能......

    [回复]
  2. 42楼
    yanyan China Google Chrome Windows

    真的可以吗?我试试

    [回复]
  3. 41楼
    你好 China Google Chrome Windows

    测试下,看看

    [回复]
  4. 40楼
    leejon China Google Chrome Windows

    测试ajax评论

    [回复]
  5. 39楼
    晓庄 China Google Chrome Windows

    分页倒是出来了。但有一个问题,点击回复,会刷新页面,时好时坏。
    博主能帮忙看下嘛

    [回复]
  6. 38楼
    晓庄 China Google Chrome Windows

    唉。没弄好。一直出不来。

    [回复]
  7. 37楼
    拽立网 China Google Chrome Windows

    谢谢博主分享好东西,我学习研究一下!

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

      [回复]
      • 拽立网 China Google Chrome Windows

        弄不好,点击下一页消失,全部消失了!错在哪里? :shock:

        [回复]
  8. 36楼
    chasonma China QQ浏览器 Windows

    路过,来看看! :mrgreen:

    [回复]
  9. 35楼
    亡月帝 China Google Chrome Windows

    错过了几篇文章~~~~

    [回复]
  10. 34楼
    我就有 China Google Chrome Windows

    谢谢分享,学习了,博主你的头像好给力啊 - -!

    [回复]
  11. 33楼
    料网 China Mozilla Firefox Windows

    博主,我今天尝试了一下。为什么点击页脚加载之后,评论列表重复出现了两次。。不知道这里能不能写链接,详见这里:http://www.liaosam.com/my-2014.html 。点击底部评论的 页码1 之后 好像页面加载的时候评论整个先后刷了两次(我注意的是右侧滚动条位置,第一次好像正常,第二次刷了以后导致出现两次评论列表。。)。

    [回复]
    • 你好~我之前也遇到过类似问题,个人感觉是因为JS中的DIV没有设置好,才导致这样重复显示~你看看JS中的元素都按自己的需要调整了么? :?: :?:

      [回复]
      • 料网 China 搜狗浏览器 Windows

        谢谢博主的快速回复!仔细检查了一遍,元素div和对象名称都是对的,现在怀疑可能是我用的另一个ajax提交评论的JS影响的。希望能顺利解决!

        [回复]
  12. 32楼
    协会主席 China Mozilla Firefox Windows

    翻页后头像加载不了了。。

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

      [回复]
  13. 好像不兼容我主题

    [回复]
  14. 30楼
    大肥羊 China Mozilla Firefox Windows

    开了图片lazyload,翻页后头像就加载不进来了。。。。

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

      [回复]
  15. 29楼
    大肥羊 China Mozilla Firefox Windows

    评论要翻页的文章不多,就不折腾了。

    [回复]
  16. 28楼
    凯凯 China Google Chrome Windows

    帅哥,我使用了不行啊,点击下一页只显示在加载中,列表不显示 :(

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

      [回复]
  17. 27楼
    从良未遂 China Google Chrome Windows

    我的是主题自带的哎

    [回复]
  18. 26楼
    fendou China Mozilla Firefox Windows

    我想问下博主这个评论功能怎么弄呢 又有表情还可以插入链接

    [回复]

发表评论



微笑 调皮 偷笑 可爱 大笑 坏笑 诡计 赞 疑问 HI~ 爱 抱歉 对不起 头晕 惊讶 帅 努力 劳累 疯狂 难过 大哭 差 猪 邪恶 无言 愤怒 流汗 擦汗


快捷键:Ctrl+Enter