很久以前在网上乱逛,发现一种很好的效果,那就是评论分页可以ajax无刷新载入。当时就搜了一下教程只搜到了Kayo的文章,可是不知我哪里弄错了没成功。今年过年后在家无聊一鼓捣竟然被我整好了。分页的评论ajax无刷新载入其实多说就自带了这种效果,还有许多评论插件也有这些效果,不过本文介绍的是纯代码实现!
2014-03-11 19:10 Update
在js文件中beforeSend最后一行添加:
<code>$body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );</code> $body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 ); /* $body 代表 body 的 DOM,$(‘#comments-list-title’).offset().top – 65 是评论列表的标题到页面顶部的距离再减去 65。 因此这一句是控制整个页面向上滑动到评论列表标题的位置以下 65 像素(再往下 65 像素是为了确保能看到这个标题), 800 是滑动的时间,800毫秒。WordPress Ajax 评论分页$(selector).animate(styles,options) animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。 .animate : http://www.w3school.com.cn/jquery/effect_animate.asp scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。 scrollTop : http://www.w3school.com.cn/jquery/css_scrolltop.asp offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。 .offset : http://www.w3school.com.cn/jquery/css_offset.asp */
(所以多说用户就不需要折腾了。。。)好了,废话少说~
等等,还有一句废话。您可以先去留言板看看分页载入效果。
嗯,对了,今天是一位好兄弟的生日~So~特意选一个特殊的时间定时发布,22:22:22———
二货,生日快乐!
第一步 准备
- 后台“设置-讨论”启用评论分页,本站设置的是10条评论每页。(这里的10条指的是主评论,不含回复)
- 如果您使用主题的评论分页导航只有“早期评论“”较新评论”两个链接那么请用以下代码替换默认导航。
- 评论分页后据说会对seo造成一定的影响,因为这几页内容差不多相同但地址不一样,因此可以通过<meta>标签解决:
//添加在主题header.php <?php if( is_single() || is_page() ) { if(function_exists('get_query_var') ) { $cpage = intval(get_query_var('cpage')) $commentPage = intval(get_query_var('comment-page')); } if( !empty($cpage) || !empty($commentPage) ) { echo '' echo "n"; } } ?>
- 还需要设置一个Loading提示显示在加载评论时,不至于让用户感觉突然不知发生了什么。
在主题comment.php里插入,假设评论内容是这样的结构。(一般都是这样的)<div id="comments" class="comments-area"> <h2 class="comments-title">本文有%条评论 <!--评论分页的Loading--> <div id="loading-comments">
Loading </div> <lnav id="comment-nav-above" class="comments-navi navigation comment-navigation paging-navigation " role="navigation"> <?php paginate_comments_links('prev_text=«&next_text=»');?> </nav> <ol class="comment-list"> < ?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size'=> 34, ) ); ?> </ol> <nav id="comment-nav-below" class="comments-navi navigation comment-navigation paging-navigation " role="navigation"> <?php paginate_comments_links('prev_text=«&next_text=»');?> </nav> </div>
这里我们需要记住各个模块的id和/或class,等下的关键代码需要对应你的结构修改选择器。
第二步 加载jQuery库
是的,这是使用jquery库的代码。wordpress自带了jquery,但我们要的不是那个。(为什么?我怎么知道……)嗯,加载Google CDN的呗:
<script type=”text/javascript” src=”http://ajax.useso.com/ajax/libs/jquery/2.0.3/jquery.min.js”>
第三步 关键代码
这货才是关键。。。
/*wordpress评论分页ajax载入
*
*关键代码来自Kayo
*《WordPress Ajax 评论分页》
*http://kayosite.com/ajax-turn-page-for-wordpress-comments-list.html
*
*参考 http://fatesinger.com/731.html
*
*注释由 霖博客 https://youthlin.com/?p=480
*
*/
//代码写在ready里
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
//以下选择器均需对应你自己的网站相应的修改!
$(document).on('click', '.comments-navi a', function(e) {//点击页码时执行
e.preventDefault();//禁止浏览器按常规载入新页面
$.ajax({//ajax无刷新载入评论
/*
*请参考W3CSchool的教程
*jQuery ajax - ajax() 方法
*http://www.w3school.com.cn/jquery/ajax_ajax.asp
*/
type: "GET",
url: $(this).attr('href'), //获取要打开页面的地址
beforeSend: function() {//发送数据之前执行的函数
//移除评论导航和评论
$('.comments-navi').remove();
$('.comment-list').remove();
$('#loading-comments').slideDown();//滑入Loading提示
////////////////////////////////这里加一句:
$body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );
},//beforeSend
dataType: "html",//返回的是html
success: function(out) {//成功接收数据后执行的函数
result = $(out).find('.comment-list');//从返回数据中(html类型)找到评论
abovenav = $(out).find('#comment-nav-above');//上导航栏
belownav = $(out).find('#comment-nav-below');//下导航栏
$('#loading-comments').slideUp(550);//向上淡出Loading
$('#loading-comments').after(result.fadeIn(800));//淡入评论(result)到Loading的后面(.after)
result.before(abovenav);//插入上导航栏到评论之前
result.after(belownav);//插入下导航栏到评论之后
}//success
});//$.ajax
});//function(e)
});//ready
/*
*如果您的主题只有评论下方的导航的话,
*那么就不需要上面那个abovenav
*/
第四步 CSS设置
本站是这样的:(好吧,CSS也是来自Kayo)
<style>
#loading-comments {
display: none; //不显示,只在触发关键代码时滑入页面
width: 100%; //宽度匹配页面宽度
height: 45px; //45像素高
background: #a0d536; //背景淡绿色
text-align: center; //文本居中
color: #fff; //文本颜色
font-size: 22px; //字体大小
line-height: 45px;//行高45像素
}
</style>
——————————————————————————————————————
OK!大功告成!!
主要参考自《WordPress Ajax 评论分页—KayoSite》
PS:使用2014默认主题的用户——
可以给评论导航加一个class,使它样式和文章分页一样好看:
<nav id=”comment-nav-above” class=”comments-navi navigation comment-navigation paging-navigation ” role=”navigation”>
声明
- 本作品采用署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。除非特别注明, 霖博客文章均为原创。
- 转载请保留本文(《WordPress分页评论Ajax载入》)链接地址: https://youthlin.com/?p=480
- 订阅本站:https://youthlin.com/feed/
“WordPress分页评论Ajax载入”上的80条回复
ajax评论测试
测试下评论
最近不知怎么了,评论提交很慢。。。
好像没效果
仔细看看选择器class名id名之类的静下心看看就好使了~
今天再试试,原先可以的,后来把这个功能去掉之后就不知道为什么不可以了
试试评论效果
[…] WordPress分页评论Ajax载入 […]
貌似我也打算弄这个来着,看哪天有时间弄下
好啊好啊
没有成功:没有效果…:(
加了js后能出现loading,但就没下文了,你最后是怎么解决的呢?
当初我可能是class和id没对应,我就搁置了一段时间,后来从头开始竟然一下就好了。![[/发呆]](http://youthlin.com/wp-content/themes/twentytwenty-child/images/smilies/发呆.gif)
这确实相当的凌乱。。。
搞不定的飘过。。
这个不错,支持收藏。
其实还有个小问题,我这里点击下方的页码,加载后怎么使它跳到新评论列表顶部?
已经更新解决了。。。
操作起来会不会很复杂?
按照教程操作不复杂的!
这个样子也可以嘛??
可以的,亲!
一直使用多说 所以对于这个分页 我还是不用操心的
所以说多说用户不需要折腾了嘛
一直不太了解ajax怎么使用,有机会学一下
前两天在火车上没网今天才回复喔
实际上我也都不懂php别说ajax了。。。
看到博主分享这么多内容,特别想把这些内容让更多博友看到,如果博主能够经常跟其他博友互动,希望博主能够加入到“博客互推联盟”,这里有很多很勤奋的博友,和您一样,每天在坚持为大家分享好的内容。
在这个互联网快速变革的时代,我们还在坚持,但我们不想孤军奋战,让更多博友看到你,让我们彼此多一点交流,一起发展。
好啊!我加入
学习了
受宠若惊!
学习了。
发现两个bug
1.点击页数,再点回复其他人的评论,会出现卡,而且页面URL会变
2.点击回复之后,在点击分页数,留言框就不见了,留着上一页内容消失了
关于1卡应该是网络慢,应为这是伪ajax,实际上还是请求了整个页面再用选择器把需要的内容呈现。不过我刚刚测试了下url没变啊。
因为其实我不懂js。。。留言框不见了是因为点击回复后留言框出现在回复的下面,再点击页码时把.comment-list给remove了,而result里不包含留言框#response:
关于2,的确是bug,不过我也不会修改
result = $(out).find('.comment-list');//从返回数据中(html类型)找到评论
感谢反馈。
好吧,1中url在有的情况下是会变,可能是?replytocom=评论id这个参数
我的ajax评论框是从别的主题里面复制出来的,制作方法不懂。
收录的话其实是那种ajax加载文章才会影响,翻页应该没什么,我首页也是用ajax翻页的,挺好的。
不过你这个翻页的loading好像没显示出来呀~
什么主题这么厉害哇?
说实话其实seo我不懂,貌似ajax载入新页面后把之前一页压入浏览器历史,并使新页面地址显示在浏览器地址栏就不影响。
至于翻页,是因为分页的内容(文章内容)都一样而地址不同,所以可能不利于seo。。
还有我这里的Loading提示我自己翻页会显示的啊,在上方的评论页码之上
ajax大赞,搜索引擎搜不到评论实际上有利于seo。
嗯嗯,听说是这样的,所以评论分了页就要阻止收录
赞一个!
绿色的ajax有点刺眼,不太美。。
呃,你是说这个Loading的背景吗
嗯 是的。
这个功能还是比较好的。 回头用上试试。
看起来好像不错,值得一试。
嗯~多谢支持!
唉,都懒得折腾了。。
我也主要是在家没什么干才折腾了下的
一直未加上这个。。。感觉不是很必要。
好吧……其实也不是很有必要。。。不过加了至少可以装一下13⊙_⊙
Z-Blog好像原本就是评论分页不刷新。
ZBlog也是和模板有关吧,不太清楚
这个不错,赞,有空试试~
嘿嘿,不错吧~终于有人表扬了!(>﹏<)
你这好黑啊
你是说代码么??我以为黑色不伤眼
原来是这样啊
这功能在打发那边好像看到过~~
是啊。。。大发还有全站ajax的主题呢!
可怜的二货啊
咋可怜:-!
用多说的是不是就不用看了?。。。
看一下又不会怀孕,
教程很详细
谢谢,因为我之前折腾过这个,所以写的详细些
支持,效果很不错,就是整站页面有点大,用手机浏览网速不好的话,加载有些慢
嗯,你看我这里加载很慢吗
有点慢
这个是我的新自用主题里必须有的
你可以直接忽略本文了,自己做主题的大神!
貌似我那个破博客至今没有评论多到应分页的地步,所以我还不知道是不是Ajax分页……14主题是Ajax分页么?默认。
默认主题默认的分页只有“早期评论”“较新评论”两个链接,没有页码。也不是ajax分页。我这里是自己加的效果
哦。默认居然不是Ajax……评论翻页要刷新页面呀,没想到。
啥时候默认主题有搞过ajax啦。。。
其实后台有的,但那也不是主题的事,是WP自带的
瞧你说的,好像默认主题不会Ajax似的,评论的提交就是Ajax的!
默认主题前台是评论没有ajax提交的……
哦,试了下,果然默认主题不是Ajax提交……把多说当默认了。。
…..你NB的。。。
艹……好吧,你赢了。。
我能问下 你那二货朋友知道么
那个,貌似他暂时还不知道这里也有
有空折腾下。
嗯,祝成功!