wordpress主题开发第31课:使用ajax加载更多评论

后台设置:默认显示最后一页;每个页面显示新的评论

wordpress主题开发第31课:使用ajax加载更多评论插图

在你的JS文件中插入JS代码:

// 加载评论
jQuery(function ($) {
    //加载更多按钮点击事件 
    $('.comment_loadmore').click(function () {
        var button = $(this);
        //减少当前评论页面的值 
        button.text(cpage);
        cpage = cpage - 1;
        $.ajax({
            url: ajaxurl,
            data: {
                'action': 'cloadmore',
                'post_id': parent_post_id,//当前文章
                'cpage': cpage,//当前评论页
            },
            type: 'POST',
            beforeSend: function (xhr) {
                button.text('加载中...');
            },
            success: function (data) {
                if (data) {
                    $('ol.comment-list').append(data);
                    button.text('加载更多');
                    //如果最后一页,则删除按钮
                    if (cpage == 1)
                        button.remove();
                } else {
                    button.remove();
                }
            }
        });
        return false;
    });

});

在functions.php中插入这段代码:

<?php
// 评论ajax加载功能
add_action('wp_ajax_cloadmore', 'comments_loadmore_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_cloadmore', 'comments_loadmore_handler'); // wp_ajax_nopriv_{action}

function comments_loadmore_handler()
{
    global $post;
    $post = get_post($_POST['post_id']);
    setup_postdata($post);

    wp_list_comments(array(
        'per_page' => get_option('comments_per_page'),
        'avatar_size' => 64,
        'page' => $_POST['cpage'],
        'style' => 'ul',
        'short_ping' => true,
    ));
    die;
}
?>

在你希望展示的地方加入这段代码:

		<div class="text-center load-more-comment">
			<?php
			// 加载更多评论
			$cpage = get_query_var('cpage') ? get_query_var('cpage') : 1;

			if ($cpage > 1) {
				echo '<div class="comment_loadmore">加载更多评论</div>
	<script>
	var ajaxurl = \'' . site_url('wp-admin/admin-ajax.php') . '\',
	    parent_post_id = ' . get_the_ID() . ',
    	    cpage = ' . $cpage . '
	</script>';
			}
			?>
		</div>

wordpress主题开发第31课:使用ajax加载更多评论插图1

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容