如何使用Ajax在WordPress中添加分页(我有需要调试的代码)？

编辑：我正在WordPress自定义主题中创建一个部分, 以使用WP_Query在首页模板上显示特定类别的五个最新标题/内容, 并且还希望有一个按钮来加载更多具有相同类别的标题(+5)。

我想通了, 但问题是我希望当用户刷新页面时, 应该已经有五个帖子出现, 并且当用户单击以加载超过其应加载+5的数量时, 依此类推。我正在关注https://www.youtube.com/watch?v=7_lU7_JUS2g。

在front-page.php中

显示内容部分

<div class="col sunset-posts-container" id="displayResults"></div

加载按钮

<a class="btn btn-secondary text-light text-center sunset-load-more" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>">

在functions.php中

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
        // the query
        $query = new WP_Query(array(
            'category_name' => 'news', 'post_status' => 'publish', 'posts_per_page' => 5, 'paged' => $paged
        ));


         if ($query->have_posts()) : 
          while ($query->have_posts()) : $query->the_post(); ?>
          <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          <?php the_category( ', ' ); ?>
          </p>

             <?php endwhile; 
             wp_reset_postdata(); 
             die; 
        else : 
          __('No News');
        endif;
}

在ajaxPagination.js中

jQuery(document).ready( function($){
    $(document).on('click', '.sunset-load-more', function(){

        var page = $(this).data('page');
        var ajaxurl = $(this).data('url');

        $.ajax({
            url : ajaxurl, type : 'post', data : {
                page : page, action: 'sunset_load_more'
            }, error : function( response ){
                console.log(response);
            }, success : function( response ){
                $('.sunset-posts-container').append(response);
            }, });
    });
});

是否可以进行导航而不是加载更多内容以加载下五个或加载预览五个？当用户单击下一步时, 最后五个将被删除(淡出)。谢谢 ：)

#1

你需要如下更新代码

在front-page.php中

显示内容部分

<div class="col sunset-posts-container" id="displayResults"></div>

在functions.php中

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
    $query = new WP_Query(array(
        'category_name' => 'news', 'post_status' => 'publish', 'posts_per_page' => 5, 'paged' => $paged
    ));
    if ($query->have_posts()) : 
        ob_start();
        while ($query->have_posts()) : $query->the_post(); ?>
            <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                <?php the_category( ', ' ); ?>
            </p>
         <?php endwhile;
        $response   = array(
            'type'  => 'success', 'html'  => ob_get_clean(), 'page'  => $paged
        );
         wp_reset_postdata(); 
    else : 
      __('No News');
        $response   = array(
            'type'  => 'failure', 'html'  =>  'No News', );
    endif;

    wp_send_json_success($response);
    wp_die();
}

在ajaxPagination.js中

jQuery(document).ready( function($){
    $(document).on('click', '.sunset-load-more', function(){

        var page = $(this).data('page');
        var ajaxurl = $(this).data('url');

        $.ajax({
            url : ajaxurl, type : 'post', data : {
                page : page, action: 'sunset_load_more'
            }, error : function( response ){

            }, success : function( response ){
                switch(response.data.type) {
                    case 'success' :
                        $('.sunset-load-more').attr('data-page', response.data.page);
                        /* you need remove last five then use html method and if you want append then use append method */
                        $('#displayResults').html(response.data.html);                        
                        break;
                    case 'failure' :
                        $('#displayResults').html(response.data.html);
                        break;
                    default :
                        break;
                }
            }, });
    });
});

希望现在一切都好, 让我知道仍然需要任何帮助。