javascript - 如何使用 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);
            },
        });
    });
});

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

标签： javascriptphpajaxwordpresswordpress-theming

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

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