社区首页 >专栏 >wordpress实现 ajax 分页加载

wordpress实现 ajax 分页加载

李维亮

发布于 2021-07-09 03:32:50

1.3K00

代码可运行

文章被收录于专栏：李维亮的博客李维亮的博客

运行总次数：0

代码可运行

实现原理

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