SIM投稿アーカイブページのページネーションの作り方を紹介します。
目次
完成イメージ
WordPressでは投稿アーカイブページのページネーション用のコードが最初から用意されています。この記事ではそのコードを利用して下記のようなページネーションを作る方法を紹介します。
外観はCSSを変更すれば、お好みに変えることができます。
PHPの記述例（テンプレ）
ページ番号取得に関わるPHP設定テンプレート
ページネーションを作るには、そのページ番号の取得に関わるPHP設定を記事ループ構造の上に書く必要があります。
記述例は下記のとおりです。
<!-- お知らせ一覧 -->
<ul class="news-info_wrapper">
<!-- ここからページ番号取得に関わる設定 -->
<?php
// ページ番号の取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post', //投稿タイプ
'posts_per_page' => 10, //１ページの表示数
'paged' => $paged //何ページ目の情報を取得するかを指定
);
// ここから記事ループ構造がはじまるページネーション本体のPHPテンプレート
投稿アーカイブページのテンプレートファイル（archive.php）に記述するページネーション本体のコードは下記のとおりです。
<!-- ページネーション全体 -->
<div class="news-pagination-wrapper">
<?php
$args = array(
'type' => 'list',
'current' => $paged,
'total' => $the_query -> max_num_pages,
'prev_text' => '<',
'next_text' => '>',
);
echo paginate_links($args);
?>
</div>コードの捕捉説明
- 8行目と9行目の＜＞記号は、お好みの文字列に変更可能です。たとえば、「前のページへ」「次のページへ」等です。
- ほかは基本、コピペで実装できますが、ページ最大表示数はこの記事の前節のページ番号の取得に関わるPHP設定、またはWordPress管理画面＞表示設定＞１ページに表示する最大投稿数で設定して下さい。
CSSの記述例
ページネーションのクラス属性
CSSの記述例を下に載せておきます。CSSを書くに当たってセレクターのクラス属性が分からないといけませんが、Chromeのデベロッパーツールで下記のように確認できます。
<ul class="page-numbers">
<li><a class="prev page-numbers" href="#"><</a></li>
<li><a class="page-numbers" href="#">1</a></li>
<li><span aria-current="page" class="page-numbers current">2</span></li>
<li><a class="page-numbers" href="#">3</a></li>
<li><a class="next page-numbers" href="#">></a></li>
</ul>上のコードのようにulのリスト構造で作られており、自動的にクラス属性が割り当てられています。自動的にクラス名が付くタグが下記のとおりです。
WordPressにより自動的に割り当てられたクラス属性
- ulタグ：class=”page-numbers”
- liタグの中のaタグ：class=”page-numbers”
- 現在表示中ページのspanタグ：class=”page-numbers current”
- 前ページ・次ページに該当するaタグ：class=”prev page-numbers”、class=”next page-numbers”
上記のクラス属性に対してCSSを書いたものが、下記のCSS記述例になります。
// ---------------------------------------------------------------
// ここからページネーション
// ---------------------------------------------------------------
.news-pagination-wrapper {
margin: 50px auto;
@include fw.mq("sp") {
margin: 30px auto;
}
}
.page-numbers {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.page-numbers > li > a,
.page-numbers > li > span {
width: 32px;
height: 32px;
border: 1px solid fw.$dark-gray;
background-color: fw.$white;
display: grid;
place-items: center;
border-radius: 5px;
}
.page-numbers > li > .dots {
width: auto;
height: auto;
border: 0;
}
.page-numbers li span {
opacity: 0.5;
}
.page-numbers > li > .dots {
opacity: 1;
}
