---
title: "アーカイブやカスタム投稿一覧のページネーションについて（プラグイン無し）"
description: "Wordpressでのアーカイブページやカスタム投稿などの一覧ページの時に、 過…"
url: "https://www.sensitivity.jp/wordpress/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/"
canonical: "https://www.sensitivity.jp/wordpress/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/"
date: "2021-03-24"
modified: "2022-01-28"
categories: ["WordPress"]
---

# アーカイブやカスタム投稿一覧のページネーションについて（プラグイン無し）

WordPressでのアーカイブページやカスタム投稿などの一覧ページの時に、
 過去苦労しまくっていたページネーション。

難しく考えてしまっていてこれまで色々苦労していたのだが、
 意外と簡単に実装出来るじゃないか。。。。。。という事に気づく。
 （なので、忘れないようにメモ）

## 単純なアーカイブ時のときは

単純なループで一覧表示させたいとき

```
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//以下出力させない内容を記述
<?php endwhile; endif; wp_reset_postdata(); ?>

//ページネーション
<div class="pagination">//ここは任意で当ててるだけなのでクラスなどは自由にカスタマイズ
<?php echo paginate_links( array ( 'type' => 'list',
	'prev_text' => '«',
	'next_text' => '»'
)); ?>
</div>
```

これでページネーションが出力される。
 ※管理画面 > 表示設定で1ページあたりの表示件数を設定した件数で表示される。

## 特定のカスタム投稿など絞り込み
 （WP_Query使用時）で一覧表示のときは

特定のカテゴリやカスタム投稿、タクソノミーなどで絞り込んで一覧表示したいとき

```
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post_type',
    'posts_per_page' => 10,//記述しなければ、管理画面 > 表示設定で設定した件数になる。
    'paged' => $paged,
);
$the_query = new WP_Query($args);
if($the_query->have_posts()) : 
    while($the_query->have_posts()) : $the_query->the_post();
?>

//以下出力させたい内容を記述

//ページネーション
<div class="pagination">//ここは任意で当ててるだけなのでクラスなどは自由にカスタマイズ
<?php echo paginate_links( array ( 'type' => 'list',
	'prev_text' => '«',
	'next_text' => '»'
)); ?>
</div>
```

ページネーションの記述は同じ。テンプレートを作って使い回すと便利かもしれない。

### ページネーションのHTML

```
<div class="pagination">//ここは任意で当ててるだけなのでクラスなどは自由にカスタマイズ
//以下出力されるHTML
<ul class='page-numbers'>
<li><span aria-current="page" class="page-numbers current">1</span></li>
<li><a class="page-numbers" href="サイトurl/page/2/">2</a></li>
<li><a class="page-numbers" href="サイトurl/page/3/">3</a></li>
<li><span class="page-numbers dots">…</span></li>
<li><a class="page-numbers" href="サイトurl/page/7/">7</a></li>
<li><a class="next page-numbers" href="サイトurl/page/2/">»</a></li>
</ul>
</div>
```

上記のように出力されるので、好きにCSSをあててカスタマイズも出来る。

細かい設定については引数を追加したり設定することが出来る。
 参考：[paginate links](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/paginate_links)

