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

谈论AJAX加载方式的优点在于用户体验,不用点击翻译,然则小我私人以为一样平常站点的谈论也没有若干,更不说需要翻页的。以是博主没有接纳谈论无限加载,然则或许有人喜欢那?以是今天就分享一篇实现ajax谈论无限加载的WordPress教程,最终效果如下图所示:
WordPress纯代码实现ajax评论无限加载教程
在使用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教程就到此竣事了,你是否乐成实现效果了呢?有不懂的可以在下方谈论。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress纯代码实现ajax评论无限加载教程 https://zhutizhen.com/14760.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章