Wordpress / PHP / Ajax加載更多帖子

Question

我的wordpress類別頁面上有一些代碼，如果他們單擊圖形，則會加載更多帖子-在這種情況下為15。

第一次按下它效果很好。 但是，一旦再次按下它，它不會帶入下一組帖子（即第三條），而是帶入第二條帖子。

我知道問題是偏移量-即。 它從哪里開始。 因此，第一次按下時，偏移量應為16，第二次為31，第三次為46等。

但是，在我遇到困難的地方，正在通過此偏移量。

這是js：

    $('#do-show-more-posts').live('click', function(){


    if( $(this).data("o-set")){
        $offset=$(this).data("o-set");
    }else
    {
        $offset=16 ; //assume this is 16 initially
    }

    var post_type = $(this).attr('post-type');
    var parent = $(this).attr('parent-id');
    var offset = $('.article').size();

    $(this).fadeTo(0,0);
    $('.load-more-posts-wrapper .loader').addClass('show');

    $.post( ajaxurl, { action: 'load_more_posts', post_type : post_type, parent : parent, offset : offset }, function(data){
        $load_more = $('.load-more-posts-wrapper');
        $load_more.find('.loader').removeClass('show');
        $load_more.find('.link').removeAttr('style');
        var load_more_button = '<div class="load-more-posts-wrapper">' + $load_more.html() + '</div>';
        $load_more.remove();

        if( data == '' || data == 'udefined' || data == 'No More Posts' || data == 'No $args array created' ){
            data = '';
            load_more_button = '<div class="load-more-posts-wrapper">There are no more posts.</div>';
            setTimeout("$('.load-more-posts-wrapper').fadeTo(1800,0)", 8000 );
        }

        $('#content').append( data );
        $('#content').append( load_more_button );
        $(this).data("o-set",$offset);
    });


});

這是PHP：

function load_more_posts() {




if( isset($_POST['post_type']) && $_POST['post_type'] == 'publication' ){

    $args = array(
        'offset'         => $_POST['offset'],
        'orderby'        => 'post_date',
        'order'          => 'DESC',
        'post_type'      => 'article',
        'post_status'    => 'publish',
        'meta_query'     => array(
            array(
                'key'    => 'related-publication',
                'value'  => $_POST['parent'],
                'meta_compare' => 'IN'
            )
        )
    );

} else if(isset($_POST['post_type']) && $_POST['post_type'] == 'category') {

    $args = array(
         'cat'       => $_POST['parent'],
         'offset'    => $_POST['offset'],
        'post_type' => array('post','article','publication')
     );

} else {

    // print_r($args);

}

$Query = new WP_Query( $args );
//print_r($Query);
if ( $Query->have_posts() ) {

    while ( $Query->have_posts() ) {
        $Query->the_post();
        get_template_part('loop', 'xxxry');
    }

} else {
    // print_r($args);
}

exit;
}

我有一個想法來創建一個保存偏移值的會話，盡管這似乎沒有用。 此外，如果有人返回該類別頁面，我不確定如何刪除它。

我使用的代碼是這樣的：

if (isset($_SESSION['posts_start'])){
    $_POST['offset']=$_SESSION['posts_start']+15;
    $_SESSION['posts_start']=$_POST['offset'];
} else {
    $_POST['offset']=15;
    $_SESSION['posts_start']=$_POST['offset'];
}

我把它放在php函數的開頭。 如果已經有一個會話，似乎沒有注冊增加15個。

Answer 1

除了使用偏移的，你可以使用posts_per_page和paged WP_Query參數的個數參數。

function load_more_posts() {

//...

    $args = array(
        'posts_per_page' => $_POST['offset'],
        'paged'          => $_POST['page'],
        'orderby'        => 'post_date',
        'order'          => 'DESC',
        'post_type'      => 'article',
        'post_status'    => 'publish',
        'meta_query'     => array(
            array(
                'key'    => 'related-publication',
                'value'  => $_POST['parent'],
                'meta_compare' => 'IN'
            )
        )
    );

//...
}

在您的JS中：

//EDIT2: (global page variable
$(document).ready(function(){
//...
var page = 1; //don't redefine this variable each time you click.
$('#do-show-more-posts').live('click', function(){
    //...
    $.post( ajaxurl, { action: 'load_more_posts', post_type : post_type, parent : parent, offset : $offset, page : page++ }, function(data){
    //EDIT:  --------------------------------------------------------------------------------------------------- ^
        $load_more = $('.load-more-posts-wrapper');
        $load_more.find('.loader').removeClass('show');
        $load_more.find('.link').removeAttr('style');
        var load_more_button = '<div class="load-more-posts-wrapper">' + $load_more.html() + '</div>';
        $load_more.remove();

    if( data == '' || data == 'udefined' || data == 'No More Posts' || data == 'No $args array created' ){
        data = '';
        load_more_button = '<div class="load-more-posts-wrapper">There are no more posts.</div>';
        setTimeout("$('.load-more-posts-wrapper').fadeTo(1800,0)", 8000 );
    }

    $('#content').append( data );
    $('#content').append( load_more_button );
    $(this).data("o-set",$offset);
    });
}
//...
}