WordPress の AMP ページに amp-list の無限スクロールを実装する方法

 add_action( 'rest_api_init', function() {
  register_rest_route( 'new', '/id(?P<id>\d+)/page(?P<page>\d+)', [
    'callback' => 'get_rest_api_new',
    'methods'  => WP_REST_Server::READABLE
  ]);
});

function get_rest_api_new( $request ) {
  $request_id   = $request['id'];
  $request_page = $request['page'];

  $the_query = new WP_Query([
    'paged'          => $request_page,
    'post__not_in'   => [$request_id],
    'posts_per_page' => 5
  ]);

  /**
   * 次ページの URL
   */
  $max_num_pages = $the_query->max_num_pages;

  if ( $request_page < $max_num_pages ) {
    $next_page = esc_url( home_url() ) . '/wp-json/new/id' . $request_id . '/page' . ( $request_page + 1 );
  }
  else {
    $next_page = null;
  }

  /**
   * 記事データ
   */
  $posts = null;

  if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
      $the_query->the_post();

      $thumb_id  = get_post_thumbnail_id();
      $thumb_src = wp_get_attachment_image_src( $thumb_id, 'large' );

      $data['permalink']  = get_permalink();
      $data['title']      = get_the_title();
      $data['cat_name']   = get_the_category()[0]->cat_name;
      $data['srcset']     = wp_get_attachment_image_srcset( $thumb_id );
      $data['src']        = $thumb_src[0];
      $data['img_width']  = $thumb_src[1];
      $data['img_height'] = $thumb_src[2];
      $data['alt']        = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

      $posts[] = $data;
    }
    wp_reset_postdata();
  }

  /**
   * WP REST API へ出力
   */
  $json = [
    'load-more-src' => $next_page,
    'items'         => $posts
  ];

  return rest_ensure_response( $json );
} 

 https://example.com/wp-json/new/id50/page1 

 // https://example.com/wp-json/new/id50/page1

{
  "load-more-src": "https://example.com/wp-json/new/id50/page2",
  "items": [
    {
      "permalink": "https://example.com/amp-list/",
      "title": "amp-listの無限スクロール",
      "cat_name": "AMP",
      "srcset": "https://example.com/wp-content/uploads/2019/05/amp-list.png 1920w, 〜（以下、省略）",
      "src": "https://example.com/wp-content/uploads/2019/05/amp-list-640x360.png",
      "img_width": 640,
      "img_height": 360,
      "alt": "amp-listの無限スクロール"
    },
    以下、posts_per_page で指定した件数分の記事データが続く
  ]
} 

 <script
  async
  custom-element="amp-list"
  src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> 

 <amp-list
  layout="fixed-height"
  height="500"
  src="<?php echo esc_url( home_url() ); ?>/wp-json/new/id<?php the_ID(); ?>/page1"
  binding="no"
  load-more="manual">
  <template type="amp-mustache">
    <div>
      <a href="{{permalink}}">
        <div>
          <amp-img
            src="{{src}}"
            srcset="{{srcset}}"
            alt="{{alt}}"
            width="{{img_width}}"
            height="{{img_height}}"
            sizes="(max-width: {{img_width}}px) 100vw, {{img_width}}px"></amp-img>
        </div>
        <div>
          <h2>{{title}}</h2>
          <p>{{cat_name}}</p>
        </div>
      </a>
    </div>
  </template>
</amp-list> 

 <amp-list
  load-more-bookmark="next-page"
  layout="fixed-height"
  height="1000"
  src="<?php echo esc_url( home_url() ); ?>/wp-json/new/id<?php the_ID(); ?>/page1"
  binding="no"
  load-more="auto"></amp-list> 

 <amp-list
  items="post-data"
  layout="fixed-height"
  height="1000"
  src="<?php echo esc_url( home_url() ); ?>/wp-json/new/id<?php the_ID(); ?>/page1"
  binding="no"
  load-more="auto"></amp-list> 

 <amp-list
  layout="fixed-height"
  height="1000"
  src="<?php echo esc_url( home_url() ); ?>/wp-json/new/id<?php the_ID(); ?>/page1"
  load-more="manual">
  <template type="amp-mustache">〜省略〜</template>
  <amp-list-load-more load-more-button>
    <button>もっと見る</button>
  </amp-list-load-more>
</amp-list> 

 <amp-list 以下、省略>
  ...
  <amp-list-load-more load-more-loading>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24">
      <path
        d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  </amp-list-load-more>
</amp-list> 

 <amp-list 以下、省略>
  ...
  <amp-list-load-more load-more-failed>
    <button>再読み込み</button>
  </amp-list-load-more>
</amp-list> 

 <amp-list 以下、省略>
  ...
  <amp-list-load-more load-more-failed>
    <p>読み込みに失敗しました</p>
    <button load-more-clickable>再読み込み</button>
  </amp-list-load-more>
</amp-list> 

 <amp-list 以下、省略>
  ...
  <amp-list-load-more load-more-end>
    <p>これ以上は記事がありません</p>
  </amp-list-load-more>
</amp-list> 

 <amp-list 以下、省略>
  ...
  <amp-list-load-more load-more-button>
    <button>もっと見る</button>
  </amp-list-load-more>
  <amp-list-load-more load-more-end>
    <p>これ以上は記事がありません</p>
  </amp-list-load-more>
</amp-list>