---
title: "the_posts_paginationの使い方と簡単なマークアップカスタマイズ方法"
canonical_url: "https://olein-design.com/blog/how-to-make-custom-the-posts-pagination"
language: "ja"
date_published: "2019-07-22T09:00:56+09:00"
date_modified: "2019-07-22T09:00:56+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
---

# the_posts_paginationの使い方と簡単なマークアップカスタマイズ方法

受託案件では制限のない限り、プラグインを利用したページネーション（ページナビゲーション）を設置することが多いのですが、大人の理由でプラグインが使えなかったり、テーマの中で動作を管理したい場合には`the_posts_pagination()`という関数を使うことで、WordPressが標準で用意しているページネーションを設置することができます。

今回は、こちらの`the_posts_pagination()`を利用する際に、よく使う情報や、簡単にマークアップ構造（CSSクラス名とか）などを変更したい際のフィルターフックなどを紹介します。

## the_posts_pagination()の使い方

使い方と言っても、PHPで書けば良いだけなんで何ってわけではないのですが、こんな感じで配列で設定をカスタムすることができます。

```
<?php the_posts_pagination(
    array(
        'base'               => '%_%', // ちょっと良く分からない
        'format'             => '?page=%#%', // ページネーションのパーマリンク構造
        'total'              => '1', // 総ページ数
        'current'            => '0', // 現在のページ番号
        'show_all'           => 'false', // 全てのページを表示する。falseの場合は以下end_size, mid_sizeで指定
        'end_size'           => '1', // ページ番号リストの両端に表示するページ数
        'mid_size'           => '1', // 現在のページの両端に表示するページ数
        'prev_next'          => true, // リスト内に「前へ」「後へ」のリンクを表示するかどうか。表示する場合はprev_text, next_textで指定
        'prev_text'          => __( 'previous page', 'textdmain' ), // 前のページへ送るリンクテキスト
        'next_text'          => __( 'next page', 'textdmain' ), // 後のページへ送るリンクテキスト
        'type'               => 'plain', // 戻り値の指定 plain or list
        'add_args'           => false, // 追加のクエリ引数の配列
        'add_fragment'       => false, // リンクに付け加えるテキスト
        'before_page_number' => '', // 各ページ番号の前に入れるテキスト
        'after_page_number'  => '', // 各ページ番号の後に入れるテキスト
        'screen_reader_text' => __( 'Post Navigation', 'textdmain' ), // スクリーンリーダー用のテキスト
    )
); ?>
```

例えばですが、僕がよく使うカスタマイズはこのようなものがあります。

```
<?php the_posts_pagination(
	array(
		'prev_next' => false,
		'prev_text' => '<i class="fas fa-chevron-left"></i>',
		'next_text' => '<i class="fas fa-chevron-right"></i>',
		'type'      => 'list',
	)
); ?>
```

これは何をやっているかというと、

```
'prev_next' => false,
```

で、ページネーションの前後によくある「前へ」や「後へ」というボタンの表示を管理します。ここでは`false`にしてあるので、表示をしないようにしてあります。ということは、**ページネーションの数字だけにしてある**ということですね。

```
'prev_text' => '<i class="fas fa-chevron-left"></i>',
'next_text' => '<i class="fas fa-chevron-right"></i>',
```

ここでは、前後のページ送りに使うボタンのテキストを設定しています。上の記述では、Fontawesomeのアイコンを設置する場合の記述になります。

```
'type'      => 'list',
```

こちらは、`<div>`で記述するか、`<ul>`などを使ってリストで記述するかを設定します。ここでは`list`形式にしています。

このようにカスタマイズして利用することができます。

あと、よくこの`the_posts_pagination()`を検索すると出てくるカスタマイズで、見出しを削除する〜みたいな記事を見るのですが、たぶんマークアップ的にスッキリさせたいからそういうカスタマイズをするのだと思います。

しかし、アクセシビリティ的な観点から考えると削除することはお勧めできません。ですので、ちゃんとスクリーンリーダー用テキストを設置するようにしましょうね！インターネッツはみんなのものなので！

## フィルターフックでマークアップ構造を変更する

基本的なマークアップ方法はそれほど変える必要は個人的には感じないのですが、CSS設計上の兼ね合いでクラス名だけ変更したい場合があります。

標準だと`navigation`というクラス名が入っていたりしますが、FLOCSS設計などを導入したい場合、`p-pagination`などを追加したくなったりします。

そう言った場合には、以下のようなフィルターフックを利用して、変更することができます。`functions.php`にこのように書いてみましょう。

```
function custom_the_posts_pagination( $template ) {
	$template = '
	<nav class="p-posts-pagination %1$s" role="navigation">
		<h2 class="screen-reader-text">%2$s</h2>
		<div class="p-posts-navigation__wrap">%3$s</div>
	</nav>';
	return $template;
}
add_filter( 'navigation_markup_template', 'custom_the_posts_pagination' );
```

こう記述することで、`p-posts-pagination`を`<nav>`に追加したり、その中の`<div>`に`p-posts-navigation__wrap`というクラスを追加したりしています。

こうすることで、最低限のCSSクラスを変更することができます。

## まとめ

このように、比較的簡単にカスタマイズしたページネーションを設置することができます。

ぜひお試しください。