我想使用ajax为帖子类别创建一个加载更多功能。我跟踪了this article 关于如何继续，但在我添加注册端点的函数后，它会给我一个404错误，关于不存在的第二个页面。

如果不使用插件在WP中实现这一点，代码中是否有任何错误或其他方式？（我是一名经验丰富的PHP开发人员，但我不经常使用wordpress，在某些方面对我来说都是新的）。

功能。php

    <?php
    add_action(\'rest_api_init\', \'portfolio_ajax_api\');
      function portfolio_ajax_api(){
        register_rest_route( \'portfolio\', \'/all-posts\', array(
          \'methods\' => \'GET\',
          \'callback\' => \'get_portfolio\'
        ));
      }

  function get_showcase($request){
    $posts_data = array();
    $paged = $request->get_param(\'page\');
    $paged = (isset($paged) || !(empty($paged))) ? $paged : 1;
    $posts = get_posts( array(
      \'post_type\'       => \'post\',
      \'status\'          => \'published\',
      \'posts_per_page\'  => 9,
      \'orderby\'         => \'post_date\',
      \'order\'           => \'DESC\',
      \'paged\'           => $paged
    ));

    foreach($posts as $post){
      $id = $post->ID;
      $post_thumbnail = (has_post_thumbnail($id)) ? get_the_post_thumbnail_url($id) : null;
      $post_cat = get_the_category($id);
      $featured = (get_field(\'project_featured\', $id)) ? true : false;

      $posts_data[] = (object)array(
        \'id\' => $id,
        \'slug\' => $post->post_name,
        \'type\' => $post->post_type,
        \'title\' => $post->post_title,
        \'featured_img_src\' => $post_thumbnail,
        \'featured\' => $featured,
        \'category\' => $post_cat[0]->cat_name
      );
    }
    return $posts_data;
}
?>

模板文件：

<?php

$paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;

$portfolio = new WP_Query(array(
    \'post_type\'     => \'post\',
    \'status\'        => \'published\',
  \'category_name\' => \'portfolio\',
    \'posts_per_page\'=> 1,
    \'orderby\'   => \'post_date\',
    \'order\'         => \'DESC\',
    \'paged\'         => $paged
));

?>

<div class="card-columns">
<?php if( $portfolio->have_posts() ): while( $portfolio->have_posts() ): $portfolio->the_post();  ?>
    <div class="card hide">
      <a href="<?php the_permalink(); ?>">
          <img class="card-img-top w-100" src="<?php the_post_thumbnail_url(\'full\'); ?>" id="case-studies">
          <div class="overlay"><h4 class="text-center" id="client-name"><?php the_title(); ?></h4></div>
      </a>
    </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12 text-center" id="show-more">
    <button class="btn btn-outline-dark" id="load-more"><?php _e(\'Visualizza altro\') ?></button>
  </div>
</div>

主要。js公司

    $(\'#load-more\').on(\'click\', function(e){
  e.preventDefault();
  var pull_page = 1;
  var jsonFlag = true;

  if(jsonFlag){
    pull_page++;

    $.getJSON("/u/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
        if(data.length){
        pull_page++;

        console.log(data.length);

        $.each(data, function(i, item){
          var html = \'<div class="card">\';
          html += \'<a href="\'+ item.permalink +\'">\';
          html += \'<img class="card-img-top w-100" src="\'+ item.featured_img_src +\'" id="case-studies" />\';
          html += \'<div class="overlay"><h4 class="text-center" id="client-name">\'+ item.title +\'</h4></div>\';
          html += \'</a>\';
          html += \'</div>\';
          $(\'body\').find(\'.card-columns\')
          .append(html);
        });
      }
      else{
        jsonFlag = false;
      }
    }).done(function(data){
      if(data.length >= 4){
        jsonFlag = true;
      }
      else{
        jsonFlag = false;
      }
    });
    }

  }); // end load more

编辑：我已经解决了404错误的问题，这是因为wordpress安装在本地开发服务器的子文件夹中，所以我更改了url以匹配正确的路由。现在的问题是，我需要用$.each() 在引导卡中循环，我不知道如何正确进行。这是因为我的卡片的html代码使用的是页面加载时wp\\U查询生成的php wordpress循环。

var pull_page = 1;
var jsonFlag = true;

$(\'#load-more\').on(\'click\', function(e){
  e.preventDefault();

  if(jsonFlag){
    pull_page++;

    $.getJSON("/u/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
        if(data.length){
        pull_page++;

        console.log(data.length);

        $.each(data, function(i, item){
          var html = \'<div class="card">\';
          html += \'<a href="\'+ item.permalink +\'">\';
          html += \'<img class="card-img-top w-100" src="\'+ item.featured_img_src +\'" id="case-studies" />\';
          html += \'<div class="overlay"><h4 class="text-center" id="client-name">\'+ item.title +\'</h4></div>\';
          html += \'</a>\';
          html += \'</div>\';
          $(\'body\').find(\'.card-columns\')
          .append(html);
        });
      }
      else{
        jsonFlag = false;
      }
    }).done(function(data){
      if(data.length >= 4){
        jsonFlag = true;
      }
      else{
        jsonFlag = false;
      }
    });
    }

  }); // end load more