WP博客ajax,wordpress实现 ajax 分页加载

实现原理

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

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

实现方法

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

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

global $post;

$post_section = '

' . get_the_title() . '

';

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();

}

$pre = $postlist ? 200 : 500;

wp_reset_postdata();

$next = ( $total > $paged ) ? ( $paged + 1 ) : '' ;

echo json_enpre(array('pre'=>$pre,'postlist'=>$postlist,'next'=> $next));

die;

}

加载更多的按钮，替代你之前的分页函数。function fa_load_postlist_button(){

global $wp_query;

if (2 > $GLOBALS["wp_query"]->max_num_pages) {

return;

} else {

$button = '

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 . '">加载更多

';

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.pre == 500) {

_button.data("paged", data.next).html('加载更多');

alert('服务器正在努力找回自我 o(∩_∩)o')

} else if (data.pre == 200) {

_postlistWrap.append(data.postlist);

if (data.next) {

_button.data("paged", data.next).html('加载更多')

} else {

_button.remove()

}

}

_self.removeClass('is-loading')

}

})

}

});

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