wordpress ajax 分页实现方法

时间：2022-06-25 18:43:36 编辑：袖梨来源：一聚教程网

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

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

实现方法
例如你的index.php的代码是如下结构

//注意这个class，需要和下面的匹配
                            while (have_posts()): the_post();
                    get_template_part('content', 'list');
                endwhile;
            endif;?>

content-list.php文章结构

post_content))), 0, 220,"...");?>

By . In .

把下面的代码加入functions.php

' . get_the_title() . '

' . get_the_date('Y/m/d') . '

';
if(has_post_thumbnail()) {
$post_section .= '

' . get_the_post_thumbnail() . '

' . mb_strimwidth(strip_shortcodes(strip_tags(apply_filters('the_content', $post->post_content))), 0, 220,"...") . '

';
    } else {
        $post_section .= apply_filters('the_content', get_the_content(''));
    }
    $post_section .= '

By ' . get_the_author() .' . In ' . get_the_category_list(',') .'.';
$post_section .= '

';
    return $post_section;
}
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 .= puma_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;
}
剩下的就是加载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 ajax 分页实现方法

' . get_the_title() . '

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程