ページネーションの表示方法と出力されるhtmlのコード

WordPress

WordPressのデフォルトで使用できる投稿一覧のページネーションを表示するコード。
主な使用ファイルはarchive.phpcategory.phpです。

※設定によってはhome.phpindex.php

コード

<?php
// 設定.
$args = array(
	'class'              => 'pagination',
	'aria_label'         => '投稿',
	'screen_reader_text' => '投稿のページネーション',
	'prev_text'          => 'PREV',
	'next_text'          => 'NEXT',
	'show_all'           => false,
	'mid_size'           => 1,
	'type'               => 'list',
);
// 出力.
the_posts_pagination( $args );
?>

出力されるHTML

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿のページネーション</h2>
  <div class="nav-links">
    <ul class='page-numbers'>
      <li><a class="prev page-numbers" href="URL/page/3/">PREV</a></li>
      <li><a class="page-numbers" href="URL/">1</a></li>
      <li><span class="page-numbers dots">&hellip;</span></li>
      <li><a class="page-numbers" href="URL/page/3/">3</a></li>
      <li><span aria-current="page" class="page-numbers current">4</span></li>
      <li><a class="page-numbers" href="URL/page/5/">5</a></li>
      <li><span class="page-numbers dots">&hellip;</span></li>
      <li><a class="page-numbers" href="URL/page/8/">8</a></li>
      <li><a class="next page-numbers" href="URL/page/5/">NEXT</a></li>
    </ul>
  </div>
</nav>

URLはサイトアドレス (URL)のURLが入ります。

この記事の執筆・検証

シゴトノコバコ編集部

Web制作10年以上。コーポレートサイト、大手企業LPなど構築をメインに実務経験あり。デザイン/印刷の実務経験も多少あり