正在载入...


实现原理

由于我们可以在后台使用wp query来输出文章列表,所以我们并不需要文章分页的入口,砍掉了分页入口也避免了搜索引擎抓取这些页面。我们只需要在AJAX 执行的过程中向后台传递一个分页参数,就可以返回这个分页上的文章列表。再返回文章列表的时候,我们还需要返回下一分页的页码,当然如果不是最后一页的话。

鉴于wp query有着丰富的参数,我们可以通过转递指定的参数来控制文章列表的输出,使之可以在分类、标签等归档正常使用。


实现方法

你需要修改的地方一共有2处,一处是包裹你文章列表的容器,一处是根据的文章列表的样式跳转输出结构。

文章结构输出函数,这个要根据你自己的主题进行修改,在修改的过程中要注意不能使用直接打印结果的函数,如果你不知道如何修改,那往后的内容也没必要看了。其实服务器端输出文章信息的json,然后用JS重新组装列表要更好些,考虑到目标人群,在服务器端生产文章列表的学习成本要小一些,这里就在服务器端直接生成文章列表了。

function fa_make_post_section(){
    global $post;
    $post_section = '<h2 class="block-title post-featured"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
    return $post_section;
}

这个是ajax 加载列表的服务器端函数,无需修改。

add_action('wp_ajax_nopriv_fa_load_postlist', 'fa_load_postlist_callback');
add_action('wp_ajax_fa_load_postlist', 'fa_load_postlist_callback');
function fa_load_postlist_callback(){
    $postlist = '';
    $paged = $_POST["paged"];
    $total = $_POST["total"];
    $category = $_POST["category"];
    $author = $_POST["author"];
    $tag = $_POST["tag"];
    $search = $_POST["search"];
    $year = $_POST["year"];
    $month = $_POST["month"];
    $day = $_POST["day"];
    $query_args = array(
        "posts_per_page" => get_option('posts_per_page'),
        "cat" => $category,
        "tag" => $tag,
        "author" => $author,
        "post_status" => "publish",
        "post_type" => "post",
        "paged" => $paged,
        "s" => $search,
        "year" => $year,
        "monthnum" => $month,
        "day" => $day
    );
    $the_query = new WP_Query( $query_args );
    while ( $the_query->have_posts() ){
        $the_query->the_post();
        $postlist .= fa_make_post_section();
    }
    $code = $postlist ? 200 : 500;
    wp_reset_postdata();
    $next = ( $total > $paged )  ? ( $paged + 1 ) : '' ;
    echo json_encode(array('code'=>$code,'postlist'=>$postlist,'next'=> $next));
    die;
}

加载更多的按钮,替代你之前的分页函数。

function fa_load_postlist_button(){
    global $wp_query;
    if (2 > $GLOBALS["wp_query"]->max_num_pages) {
        return;
    } else {
        $button = '<button id="fa-loadmore" class="button button-more"';
        if (is_category()) $button .= ' data-category="' . get_query_var('cat') . '"';

        if (is_author()) $button .=  ' data-author="' . get_query_var('author') . '"';

        if (is_tag()) $button .=  ' data-tag="' . get_query_var('tag') . '"';

        if (is_search()) $button .=  ' data-search="' . get_query_var('s') . '"';

        if (is_date() ) $button .=  ' data-year="' . get_query_var('year') . '" data-month="' . get_query_var('monthnum') . '" data-day="' . get_query_var('day') . '"';

        $button .= ' data-paged="2" data-action="fa_load_postlist" data-total="' . $GLOBALS["wp_query"]->max_num_pages . '">加载更多</button>';

        return $button;
    }
}

调用方法

<?php echo fa_load_postlist_button();?>

js代码,需要加载jquery库,方法就不说了。

jQuery(document).on("click", "#fa-loadmore", function() {
	var _self = jQuery(this),
		_postlistWrap = jQuery('.blockGroup'),
		_button = jQuery('#fa-loadmore'),
		_data = _self.data();
	if (_self.hasClass('is-loading')) {
		return false
	} else {
		_button.html('加载中 o(∩_∩)o');
		_self.addClass('is-loading');
		jQuery.ajax({
			url: '/wp-admin/admin-ajax.php',//注意该文件路径
			data: _data,
			type: 'post',
			dataType: 'json',
			success: function(data) {
				if (data.code == 500) {
					_button.data("paged", data.next).html('加载更多');
					alert('服务器正在努力找回自我  o(∩_∩)o')
				} else if (data.code == 200) {
					_postlistWrap.append(data.postlist);
					if (data.next) {
						_button.data("paged", data.next).html('加载更多')
					} else {
						_button.remove()
					}
				}
				_self.removeClass('is-loading')
			}
		})
	}
});

本功能可完美用户各个文章列表,如果你添加了自定义文章类型则代码需要相应修改。

本文链接:

关键词:add_action, ajax, function, WordPress, wp_query, 互联网, 代码, 函数, 无限载入,

(全文完        )

Comments

哈哈,沙发有木有?!!!抢沙发快速评论

你需要 登录 才可以回复.