Wordpress/PHP/Ajax加载更多帖子 [英] Wordpress/PHP/Ajax Load More Posts

问题描述

我的wordpress类别页面上有一些代码，如果他们单击图形，则会加载更多帖子-在这种情况下为15.

I have some code on my wordpress categories page, where if they click on the graphic, then more posts are loaded - in this case 15.

第一次按下该按钮效果很好.但是，一旦再次按下它，它不会带入下一组帖子(即第三条)，而是带入第二条帖子.

It works great the first time that it is pressed. However, once it is pressed again, it doesn't bring in the next set of posts (ie. the third), but brings in the 2nd.

我知道问题是偏移量-即.它从哪里开始.因此，第一次按下时，偏移量应为16，第二次为31，第三次为46等.

I understand that the problem is the offset - ie. where it starts. So, the first time it is pressed, the offset should be 16, the second time 31, the third time 46 etc.

但是，在我遇到困难的地方，正在穿过此偏移量.

However, where I am having difficulty, is passing through this offset.

这是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;
}

我有一个想法来创建一个保存偏移值的会话，尽管这似乎不起作用.此外，如果有人返回该类别页面，我不确定如何删除它.

I had an idea to create a session holding the value for offset, although that didn't seem to work. In addition, am not sure how I would delete it in case someone returns to that category page.

我使用的代码是这样:

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个.

I put that at the beginning of the php function. It didn't seem to register the addition of 15 if there was already a session.

推荐答案

可以使用WP_Query args的 posts_per_page 和 paged 参数代替使用偏移量.

Instead of using offset, you could use posts_per_page and paged parameters of WP_Query args.

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);
    });
}
//...
}

这篇关于Wordpress/PHP/Ajax加载更多帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！