WordPress 首页和文章列表页无限载入

实现原理

由于我们可以在后台使用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="'%20.%20get_permalink()%20.%20'">' . 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')			}		})	}});

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

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:WordPress 首页和文章列表页无限载入