WordPress カテゴリ別アーカイブページのループ（表示数指定）がうまくいきません

Question

###実現したいこと
WordPressのカテゴリー別ページで、（archive.php）
記事1～10を大きめ枠で表示（A）、
その下に、記事11～20を小さめ枠で表示（B）し、Bにのみページャーを付けたいと考えています。
（投稿／月別／投稿者別アーカイブでも同じデザイン）

###発生している問題
A、B 2つのwhileループを設置した時点では、カテゴリ内の記事のみを表示しますが、
query_posts で posts_per_page や offset を指定すると
全記事を表示してしまいます。
どのようにすればうまくいくでしょうか。

query_posts は非推奨のため、WP_Query を使用したいと思いますが、
その場合の正しいループの仕方を教えていただけますでしょうか。

どうぞよろしくお願いいたします。

###該当のソースコード

<!-- A ここから-->
<?php query_posts('posts_per_page=10');
if ( have_posts() ) :
  echo '<ul>';
  while ( have_posts() ) : the_post();
    get_template_part( 'content-archive', get_post_format() );
  endwhile;
  echo '</ul>';
else :
  echo '<div>お探しの記事は見つかりませんでした</div>';
endif; ?>

<!-- B ここから-->
<?php query_posts('posts_per_page=10&offset=10');
if ( have_posts() ) :
  echo '<div class="article_list list_02 new matchHeight_list">';
  echo '<ul>';
  while ( have_posts() ) : the_post();
    get_template_part( 'content-archive', get_post_format() );
  endwhile;
  echo '</ul>';
  if (function_exists('responsive_pagination')) {
        responsive_pagination($additional_loop->max_num_pages);
      };
  echo '</div>';
endif; ?>

Answer 1

これって１ページ目はＡ記事1～10、Ｂ記事11～20、２ページ目はＡ記事11～20、Ｂ記事21～30という表示と言うことでしょうか。
それならば、こんな感じでどうでしょう。

<?php //Aはここから
	$args = array(
		'paged' => $paged,
		'posts_per_page' => 10,
	);
	$wp_query = new WP_Query( $args );
if( $wp_query->have_posts() ) :
	echo '<ul>';
while( $wp_query->have_posts() ) : $wp_query->the_post();
	get_template_part( 'content-archive', get_post_format() );
endwhile;
	wp_reset_postdata();
	echo '</ul>';
else :
	echo '<div>お探しの記事は見つかりませんでした</div>';
endif;
?>

<?php //Bはここから
	if( $paged == 0 ) {
		$off_p = 10;
	} else {
		$off_p = $paged*10;
	}
	$args = array(
		'paged' => $paged,
		'posts_per_page' => 10,
		'offset' => $off_p,
	);
	$wp_query = new WP_Query( $args );
if( $wp_query->have_posts() ) :
	echo '<div class="article_list list_02 new matchHeight_list">';
	echo '<ul>';
while( $wp_query->have_posts() ) : $wp_query->the_post(); 
	get_template_part( 'content-archive', get_post_format() );
endwhile;
	wp_reset_postdata();
	echo '</ul>';
	if( function_exists( 'responsive_pagination' ) ) {
	responsive_pagination( $additional_loop->max_num_pages );
	};
	echo '</div>';
endif;
?>

お使いのページャー？によってはうまく動作しないかもしれません。
参考まで。

Comments

[zungu]

ご回答とサンプルソース、ありがとうございます！
試してみたのですが、ページネーション（paginate_links）がうまくいかなかったのと、カテゴリー別ページでもやはり全投稿記事を表示してしまいました。
offsetを1ページ目と2ページ目以降で分岐する記述など、勉強になりました！

Answer 2

結局AとBでループを分けるのは断念し、1つのループで記事を出すことにしました。

記事ループが始まる前に query_string で、
同カテゴリ内の記事のみを取り出し、表示件数の指定ができました。

<?php
parse_str( $query_string, $args );
$args = array_merge($args,array(
  'posts_per_page' => 13,
  )
);
$newsQuery = new WP_Query($args);
if ($newsQuery->have_posts()) :
  echo '<ul>';
  while ( $newsQuery->have_posts() ) : $newsQuery->the_post();
    get_template_part( 'content-archive-new', get_post_format() );
  endwhile;
    include('paginate.php');
else :
  echo '<div>お探しの記事は見つかりませんでした</div>';
endif;
wp_reset_query();?>

下記の記事が参考になりました。
・カテゴリ（category.php）の表示件数を指定する
・【wordpress】WP_Queryを指定する配列にquery_stringを加える方法