ページネーションの作成

続いて、ページネーションを作成しましょう。

表示件数の制御

まずは、投稿トップページの表示件数を ページあたり3件にします。

functions.phpに

function change_posts_per_page($query) {
  //管理画面及びメインクエリ以外に影響させない。
  if ( is_admin() || ! $query->is_main_query() ){
     return;
 }
  // 投稿トップページならば
  if ( $query->is_home() ) {
    //ページあたりの表示件数を3件にする。
    $query->set( 'posts_per_page', '3' );
    return;
 }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

上記のアクションを追加して、ブログトップページでは3件ずつの表示と設定しておきます。

[ブログURL]/blogを確認し、記事が3件だけ表示されていることを確認しておきましょう。

ページネーションの追加

では、ページネーションのリンクを作成してみましょう。

home.phpにpaginate_linksを追記し、

<?php 
get_header(); 

get_template_part( 'templates/recommend' );

while(have_posts() === true){
  the_post();
  get_template_part('templates/content');
}
//ページネーションの表示
echo paginate_links();

get_footer();

としてみましょう。

実は、これだけでページネーションのリンクを作成することが可能です。

ページネーションのカスタマイズ

では、ページネーションをさらにカスタマイズしてみましょう。 まずは、ページネーションの表示を別テンプレートに分離します。

templates/pagination.phpに

<?php
//ページネーションの表示
echo paginate_links();

を分離して

home.phpは

<?php 
get_header(); 

get_template_part( 'templates/recommend' );

while(have_posts() === true){
  the_post();
  get_template_part('templates/content');
}

//ページネーションの表示
get_template_part('templates/pagination');


get_footer();

としておきます。

さらに、pagination.phpをカスタマイズします。

<?php
$paginate_links = paginate_links(array(
  'type' => 'array'
));
// var_dump($paginate_links);
?>

<?php if(isset($paginate_links)) { ?>
  <ul class="pagination">
  <?php foreach($paginate_links as $paginate_link){ ?>
    <li class="pagination__link"><?php echo $paginate_link; ?></li>
  <?php } ?>
  </ul>
<?php } ?>

paginate_links関数は、オプションの配列でtypeにarrayを設定することで、結果を配列で受け取ることが可能です。 今回は、配列をforeachで出力することで、 ulを利用したページネーションを作成しています。

style.cssに

.pagination {
    list-style-type: none;
    display: flex;
}
.pagination__link + .pagination__link{
    margin-left: 10px;
}

を追記して、表示を整えておきましょう。