WordPress　投稿一覧ページのページネーション設定方法

※ 当サイトではアフィリエイト広告を利用しています。

設置する際いつも問題が発生するページネーション…

まずはうまくいった際のコードの記録を書きます。

後半にぶちあたった問題を書きたいと思います。

うまくいったコード
1. ぶつかった問題点1：’paged’ => $paged,　を入れるとエラーになる
2. ぶつかった問題点2：2ページ目以降が表示されない

うまくいったコード

category-〇〇.phpの方にサブループでコンテンツを呼び出した後の部分に、ページネーションの関数を書きます。

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'paged' => $paged,
'post_type' => 'post',
'posts_per_page' => 6,
); 
$my_query = new WP_Query($args);

if ($my_query->have_posts()) :
while ($my_query->have_posts()) : $my_query->the_post();
?>						

//ここの間にコンテンツの呼び出しをする…


<?php endwhile; ?>
<?php endif; ?>

//ページネーションを出力
<?php
$args = array(
'mid_size' => 1,
'prev_text' => '&lt;',
'next_text' => '&gt;',
'screen_reader_text' => ' ',
);
the_posts_pagination($args);
?>

<?php wp_reset_query(); ?>

そして、functions.php に次のコードを書き加えます。

// カテゴリーのページ送りを修正して404を回避
function category_link_custom( $query = array()) {	
	if(isset($query['name']) && $query['name'] === 'page' && isset($query['page'])) {
		$paged = trim($query['page'], '/');
		if(is_numeric($paged)) {
			unset($query['name']);
			unset($query['page']);
			$query['paged'] = (int) $paged;
		}
	}
	return $query;
}
add_filter('request', 'category_link_custom');

そして出力されるコードに合わせてcssを下記のように設定。

.pagination {
  margin: 40px 0 0;
}

.nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.nav-links .page-numbers {
  display: inline-block;
  margin-right: 20px;
  padding: 13px 20px;
  color: #707070;
  border-radius: 3px;
  border: #707070 solid 1px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .nav-links .page-numbers {
    margin-right: 10px;
    padding: 8px 15px;
  }
}

.nav-links .current {
  padding: 13px 20px;
  background: #707070;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .nav-links .current {
    padding: 8px 15px;
  }
}

.nav-links .prev {
  padding: 13px 20px;
  background: transparent;
  color: #707070;
}

@media screen and (max-width: 768px) {
  .nav-links .prev {
    padding: 8px 15px;
  }
}

.nav-links .next {
  padding: 13px 20px;
  background: transparent;
  color: #707070;
}

@media screen and (max-width: 768px) {
 　.nav-links .next {
    padding: 8px 15px;
  }
}

.nav-links .dots {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
}

これで無事に投稿一覧ページにページネーションを出力することができました。

…実はここまでたどり着くのに、1日近くかかってしまったんです。あぁもったいない…