ページネーションの出力

ページャー

WordPressのバージョン 4.1.0 から導入された the_post_navigation() を使うと、分割されたページへのリンクを出力するページャーやページネーションを簡単に出力できます。

ページネーションを出力する関数

the_posts_pagination()という関数で、WordPressが標準で用意しているページネーションを設置することができます。

PHP

<?php the_posts_pagination( 
  array(
    'mid_size'      => 2, // ページの左右に表示するページ番号の数
    'prev_next'     => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
    'prev_text'     => __( '前へ'), // 「前へ」リンクのテキスト
    'next_text'     => __( '次へ'), // 「次へ」リンクのテキスト
    'type'          => 'list', // 戻り値の指定 (plain/list)
  )
); ?>

ページネーションを記述する場所

以下の例の場合、class名が「archiveListBlock」の親要素の中に ul タグと並列のdiv要素の中に the_posts_pagination() のコードを書けば、ページネーションが出力され、ページ切り替えも可能になります。

PHP

<section>
  <div class="archiveListBlock">
    <ul class="archiveListInner">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 記事の出力ループ -->
    <?php endwhile; endif; ?>
    </ul>
  <div class="pageNation">
    <?php the_posts_pagination( 
      array(
      'mid_size'      => 2, // 現在ページの左右に表示するページ番号の数
      'prev_next'     => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
      'prev_text'     => __( '前へ'), // 「前へ」リンクのテキスト
      'next_text'     => __( '次へ'), // 「次へ」リンクのテキスト
      'type'          => 'list', // 戻り値の指定 (plain/list)
    )
    ); ?>
  </div>
</div>
</section>

the_post_navigation()のカスタマイズ

the_post_navigation() の関数のarrayで指定することで、好みのカスタマイズが可能です。

PHP

<?php the_posts_pagination( 
array(

'base'               => '%_%', // ページ番号付きのリンクを生成するために使われるベースの URL を指定
'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' ), // スクリーンリーダー用のテキスト

)
); ?>