WordPress ページネーション

  Code Tips minimum Theme

記事を一覧表示するページ(ホーム・アーカイブ等)にページネーションを付けてみます。

 

the_posts_pagination()

the_posts_pagination() テンプレートタグを使ってページネーションを出力してみます。

投稿ページネーション関数は投稿の前と次のページへリンクするページ番号のセットを出力します。投稿リスト(index.php など)やアーカイブ(archive.php など)で使われます。

WordPress Codex : 関数リファレンス/the posts pagination

the_posts_pagination( $args )

 

パラメータ
引数 説明
$args
配列
オプション
省略可能な引数の配列。
初期値:以下を参照。
配列初期値 説明
mid_size
整数
現在のページの左右にそれぞれ表示するページ番号の数
初期値:1
prev_text
文字列
投稿の前のセットへのリンクテキスト
初期値:前へ
next_text
文字列
投稿の次のセットへのリンクテキスト
初期値:次へ
screen_reader_text
文字列
スクリーンリーダー用テキスト
初期値:投稿ナビゲーション

 

<?php the_posts_pagination(); ?>

出力は

投稿ナビゲーション
前へ 1 … 3 4 5 … 9 次へ

となります。

出力されたHTMLは

<nav class="navigation pagination" role="navigation">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <a class="prev page-numbers" href="{WordPressのディレクトリ}/page/3/">前へ</a>
    <a class='page-numbers' href='{WordPressのディレクトリ}/'>1</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class='page-numbers' href='{WordPressのディレクトリ}/page/3/'>3</a>
    <span class='page-numbers current'>4</span>
    <a class='page-numbers' href='{WordPressのディレクトリ}/page/5/'>5</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class='page-numbers' href='{WordPressのディレクトリ}/page/9/'>9</a>
    <a class="next page-numbers" href="{WordPressのディレクトリ}/page/5/">次へ</a>
  </div>
</nav>

となります。

 

パラメータを変更して書いた場合

<?php
  $pagination_param = array(
    'mid_size' => 2,
    'prev_text' => 'Back',
    'next_text' => 'Onward',
    'screen_reader_text' => 'Page Navigation'
  );
  the_posts_pagination($pagination_param);
 ?>

出力は

Page Navigation
Back 1 … 3 4 5 6 7 … 9 Onward

となります。

 

Code Tips minimum Theme

the_posts_pagination() を endwhile; の直後に置きます。

パラメータを下記のようにしました。

<?php
  $pagination_param = array(
    'mid_size' => 2,
    'prev_text' => '&lt;',
    'next_text' => '&gt;',
    'screen_reader_text' => 'Page Navigation'
  );
  the_posts_pagination($pagination_param);
 ?>

出力は

Page Navigation
< 1 … 3 4 5 6 7 … 9 >

となります。

 

【index.php】

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php echo get_the_date(); ?>
 
  <?php if (is_single()) : ?>
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','← Older'); ?> | <?php next_post_link('%link','Newer →'); ?>
  
  <?php elseif (is_home()) : ?>
  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php the_content('続きを読む…'); ?>
  
  <?php else : ?>
  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php endif; ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
</body>
</html>