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

Question

编辑： 我正在我的 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);
            },
        });
    });
});

是否可以进行导航而不是加载更多来加载下五个或加载预览五个？当用户点击下一步时，最后五个将被删除（淡出）。 谢谢你:)

Answer 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;
                }
            },
        });
    });
});

希望现在你得到了所有的东西，并让我知道仍然需要任何帮助。