WordPress（PHP） 新着記事の一覧が1ページ目の無限ループになってしまう

Question

WordPressで新着記事の一覧を正常に表示したい

WordPressで自作のテーマで自分では解決できない問題が発生しています。

新着記事の一覧が正常に表示されない

jquery.autopagerで新着記事を「もっと見る」形式で表示させていますが。ページネーションでいういわゆる2ページ目以降の記事が1ページ目と同じ記事が表示され1ページ目の無限ループが生じています。
サイトURLは
https://www.journase.waows.com/新着記事/
です。
なお、scriptの部分をdiv要素で囲っているのはscriptが正常に動作しない場合の対策です。
また、ほかのカテゴリー別の記事一覧（index.php）は正常に表示されています。

ソースコード

      <?php query_posts('posts_per_page=10'); ?>
      <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <div class="card mb-3">
        <div class="card-contents">
          <div class="row">
            <div class="col-lg-3">
              <?php if ( has_post_thumbnail($post_object->ID)): ?>
              <?php
                $thumbnail_id = get_post_thumbnail_id($post_object->ID);
                $image = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
                $src = $image[0];
                $width = $image[1];
                $height = $image[2];
                echo '<img class="card-img-top" src="'.$src.'" width="'.$width.'" height="'.$height.'" />';
              ?>
              <?php endif; ?>
            </div>
            <div class="col-lg-9 ml-3 ml-lg-0 mr-3 mr-lg-0 my-3">
              <p class="font-weight-light d-inline-block mb-2 text-primary">
                <i class="fa fa-tag"></i>
                <?php $cat = get_the_category(); ?>
                <?php $cat = $cat[0]; ?>
                <?php echo get_cat_name($cat->term_id); ?>
              </p>
              <h4 class="card-title">
                <strong>
                  <?php echo mb_strimwidth(get_the_title(), 0, 70, "…", "UTF-8"); ?>
                </strong>
              </h4>
              <p class="card-text  text-muted">
                <i class="fa fa-clock-o"></i>
                <?php the_time( 'Y/m/d H:i' ); ?>
              </p>

              <a href="<?php the_permalink(); ?>" class="btn btn-outline-secondary">記事を読む</a>
            </div>
          </div>
        </div>
      </div>
      <?php endwhile; endif; ?>
      <?php if ( $wp_query->found_posts >10 ): ?>
      <div id="next" class="mt-4">
        <a href="<?php echo next_posts(0, false); ?>">
          <button type="button" class="btn btn-outline-secondary">もっと見る</button>
        </a>
        <img id="loading" src="<?php echo get_template_directory_uri() ?>/jquery.autopager-1.0.0/ajax-loader.gif" width="31" height="31">
      </div>
      <?php endif; ?>
      <div>
        <script>
          var maxpage = <?php echo $wp_query->max_num_pages; ?>;

          $('#loading').css('display', 'none');
          $.autopager({
            content: '.card',
            link: '#next a',
            autoLoad: false,

            start: function(current, next) {
              $('#loading').css('display', 'block');
              $('#next a').css('display', 'none');
            },

            load: function(current, next) {
              $('#loading').css('display', 'none');
              $('#next a').css('display', 'block');
              if (current.page >= maxpage) {
                $('#next a').hide();
              }
            }
          });

          $('#next a').click(function() {
            $.autopager('load');
            return false;
          });
        </script>
      </div>

最後に

<?php query_posts('posts_per_page=10'); ?>の部分が無限ループを引き起こしていると考えていますが正しい表示方法がわかりません。

解決策をよろしくお願いします。

Answer 1

get_query_var('paged')で、いま何ページ目かを取得し、
offsetでずらせばいけるかと。

$posts_par_page = 10;
	
$strQuery = 'posts_per_page='.$posts_par_page;

$paged = get_query_var('paged');
if($paged > 1){
	$strQuery .= '&offset='.(($paged-1) * $posts_par_page);
}
query_posts($strQuery);

あとひとつ確認ですが、

        <a href="<?php echo next_posts(0, false); ?>">
          <button type="button" class="btn btn-outline-secondary">もっと見る</button>
        </a>

ここのリンク先は、正しく次のページにリンク貼られていますか？

Comments

[fugavc]

ありがとうございます。
おかげさまで問題が解決しました。
正常に新着記事がループされています。