WordPressのテーマ作成でページネーションを追加する方法(コピペOK)

WordPress

今回は、WordPress(ワードプレス)のテーマ作成で必ず必要になってくるページネーションについての解説です。

ページネーションとは、アーカイブページを数ページに分割した時に「次のページ」もしくは数ページ目に行くための仕組みです。何だか小難しいプログラムが必要なイメージがありますが、WordPress(ワードプレス)では標準で関数が用意されているので簡単に実装することが出来ます。今回はそれを使った方法になります。

WordPressのテーマ作成でページネーションを作成する方法

まず初めに「pagination.php」を作成して下さい。そのファイルを「template-parts」フォルダに入れます。(必ずtemplate-partsフォルダを用意する必要はないが、後から管理しやすくするためにこうしています。

用意した「pagination.php」に以下の記述をします。(コピペで大丈夫です。)

<! – ページネーション -->

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 1,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '«',
        'next_text' => '»',
    )); ?>
</div>

これだけでページネーションは完成です。

ページネーションを使用したい場所に以下の記述をして呼び出します。(template-partsフォルダに入れていない場合は、カッコ内はpagenationのみの記述で大丈夫です。)

<! – ページネーション -->
<?php get_template_part( '/template-parts/pagenation' ); ?>

あとはCSSで形を整えて完成です。以下に簡単なサンプルも貼り付けておきます。

.pagination {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 2em;
}

.pagination span {
  padding: 0 1em;
}

.pagination .page-numbers {
  padding: 0 1em;
}

.pagination .next {
  padding: 0 1em;
}

実際の表示はこんな感じです。シンプルですがしっかりとページ遷移が機能しています。

また、一覧ページの投稿の最大数(ページ数の調整)はWordPressの管理画面から行います。

設定表示設定にある1ページに表示する最大投稿数の数値で調整して下さい。


以上が「WordPressのテーマ作成でページネーションを追加する方法(コピペOK)」でした。

カテゴリー、タグ、投稿、検索結果一覧などのアーカイブページ全般に使って下さい。

2021年1月31日WordPressphp,WP

Posted by KT