WordPress纯代码实现ajax评论无限加载教程

评论 AJAX 加载方式的优点在于用户体验,不用点击翻译,但是个人觉得一般站点的评论也没有多少,更不说需要翻页的。所以博主没有采用评论无限加载,但是或许有人喜欢那?所以今天就分享一篇实现 ajax 评论无限加载的 wordpress 教程,最终效果如下图所示:
WordPress纯代码实现ajax评论无限加载教程-云模板在使用 AJAX 加载评论时,需要在后台设置-评论设置,进行如下的设置(其中每页显示评论数量可以根据你的需要自定义)。
WordPress纯代码实现ajax评论无限加载教程-云模板

添加“加载更多”按钮

首先在你在主题中查找评论分页功能 paginate_comments_links()函数,并将其替换为以下代码。若找不到此函数,请在代码<ol class=”comment-list”>…</ol>后面放置代码

  1. $cpage = get_query_var('cpage') ? get_query_var('cpage') : 1;
  2. 
    
  3. if( $cpage > 1 ) {
  4. 	echo '<div class="comment_loadmore">More comments</div>
  5. 	<script>
  6. 	var ajaxurl = '' . site_url('wp-admin/admin-ajax.php') . '',
  7. 	    parent_post_id = ' . get_the_ID() . ',
  8.     	    cpage = ' . $cpage . '
  9. 	</script>';
  10. }

由于默认显示最后的评论页面,$cpage 所以等于注释页面的最大数量。条件 if( $cpage > 1 ) {意味着两件事情同时发生 – 在下列情况下输出加载更多按钮和脚本。

无限加载 jQuery

首先我们创建一个 ajax-comment.js 文件并复制下面的代码到 js 文件中:

  1. jQuery(function($){
  2.         //加载更多按钮点击事件 
  3. 	$('.comment_loadmore').click( function(){
  4. 		var button = $(this);
  5.                 //减少当前评论页面的值 
  6. 		cpage - ;
  7. 		$.ajax({
  8. 			url : ajaxurl,
  9. 			data : {
  10. 				'action': 'cloadmore',
  11. 				'post_id': parent_post_id,//当前文章
  12. 				'cpage' : cpage,//当前评论页
  13. 			},
  14. 			type : 'POST',
  15. 			beforeSend : function ( xhr ) {
  16. 				button.text('加载中...');
  17. 			},
  18. 			success : function( data ){
  19. 				if( data ) {
  20. 					$('ol.comment-list').append( data );
  21. 					button.text('加载更多');
  22.                                        //如果最后一页,则删除按钮
  23. 					if ( barley.cpage == 1 )
  24. 						button.remove();
  25. 				} else {
  26. 					button.remove();
  27. 				}
  28. 			}
  29. 		});
  30. 		return false;
  31. 	});
  32. 
    
  33. });

这里减少 cpage 了的值,因为评论页以降序显示。接着就是加载这个 JQ 到页面,这里就不详细说了。

实现功能

最后我们在 functions.php 中插入下面代码:

  1. add_action('wp_ajax_cloadmore', 'comments_loadmore_handler'); // wp_ajax_{action}
  2. add_action('wp_ajax_nopriv_cloadmore', 'comments_loadmore_handler'); // wp_ajax_nopriv_{action}
  3. 
    
  4. function comments_loadmore_handler(){
  5. 
    
  6. 	global $post;
  7. 	$post = get_post( $_POST['post_id'] );
  8. 	setup_postdata( $post );
  9. 
    
  10. 	wp_list_comments( array(
  11. 		'avatar_size' => 100,
  12. 		'page' => $_POST['cpage'],
  13. 		'per_page' => get_option('comments_per_page'),
  14. 		'style' => 'ol',
  15. 		'short_ping' => true,
  16. 		'reply_text' => '回复',
  17. 	) );
  18. 	die;
  19. }

好了,今天的纯代码实现 ajax 评论无限加载 WordPress 教程就到此结束了,你是否成功实现效果了呢?有不懂的可以在下方评论。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/85668

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买