Learning site for website creation

015:一覧表示テンプレートにページネーションを追加

  • 投稿日:2020年11月08日
  • 更新日:2020年11月10日

一覧表示時のページネーションを作成します。

テスト投稿を準備

プラグイン「Duplicate Post」を使って投稿を複製して10件ほど用意します。

複製した投稿はステータスが「下書き」です。

チェックボックスを選択して一括編集します。

投稿一覧左上のドロップボックスから「編集」を選択して「適用」をクリックします。

一括編集画面の「ステータス」から「公開済み」を選択して「更新」をクリックします。

投稿一覧の1ページ最大表示投稿数

管理画面「設定」>「表示設定」

投稿一覧の1ページに表示する最大投稿数を変更します。

今回は「3」投稿に変更して「変更を保存」をクリックします。

手軽にページネーション

<?php the_posts_pagination(); ?>

カスタマイズ用ページネーション

メインループ用ページネーション

メインループのページ番号を取得する際は「get_query_var('paged')」を使用します。

メインループページネーションはメインループ用「WP_Query」オブジェクトを管理している暗黙変数$wp_queryを参照できるところで使用します。

<?php

/**
 * ページネーション:メインループ
 * $wp_query:メインループ用「WP_Query」オブジェクトが必要
 */

$current_num_page = max(1, get_query_var('paged'));
$max_num_pages = $wp_query->max_num_pages;
if (wp_is_mobile()) {
  $pagination_format = array(
    'current' => $current_num_page,
    'total' => $max_num_pages,
    'type'  => 'array',
    'prev_text' => '前へ',
    'next_text' => '次へ',
    'end_size' => 1, //初期値:1  両端のページリンクの数
    'mid_size' => 1, //初期値:2  現在のページの両端にいくつページリンクを表示するか(現在のページは含まない)
    'prev_next' => false, //初期値:true  リストの中に「前へ」「次へ」のリンクを含むか
  );
} else {
  $pagination_format = array(
    'current' => $current_num_page,
    'total' => $max_num_pages,
    'type'  => 'array',
    'prev_text' => '前へ',
    'next_text' => '次へ',
    'end_size' => 1, //初期値:1  両端のページリンクの数
    'mid_size' => 2, //初期値:2  現在のページの両端にいくつページリンクを表示するか(現在のページは含まない)
    'prev_next' => true, //初期値:true  リストの中に「前へ」「次へ」のリンクを含むか
  );
}
$pagination = paginate_links($pagination_format);
?>

<?php if (is_array($pagination)) : ?>

<div class="Pagination">
  <ul class="Pagination__list">
    <?php foreach ($pagination as $pagination_link) : ?>
    <li class="Pagination__item"><?php echo wp_kses_post($pagination_link); ?></li>
    <?php endforeach;  ?>
  </ul>
  <div class="Pagination__total"><?php echo esc_html($current_num_page); ?> / <?php echo esc_html($max_num_pages); ?>
  </div>
</div>

<?php endif;

サブループ用ページネーション

サブループのページ番号を取得する際は「get_query_var('page')」を使用します。

サブループページネーションはサブループ用「WP_Query」オブジェクトを管理している変数を参照できるところで使用します。

<?php

/**
 * ページネーション:サブループ
 * $the_query:サブループ用「WP_Query」オブジェクトが必要
 */

$current_num_page = max(1, get_query_var('page'));
$max_num_pages = $the_query->max_num_pages;
if (wp_is_mobile()) {
  $pagination_format = array(
    'current' => $current_num_page,
    'total' => $max_num_pages,
    'type'  => 'array',
    'prev_text' => '前へ',
    'next_text' => '次へ',
    'end_size' => 1, //初期値:1  両端のページリンクの数
    'mid_size' => 1, //初期値:2  現在のページの両端にいくつページリンクを表示するか(現在のページは含まない)
    'prev_next' => false, //初期値:true  リストの中に「前へ」「次へ」のリンクを含むか
  );
} else {
  $pagination_format = array(
    'current' => $current_num_page,
    'total' => $max_num_pages,
    'type'  => 'array',
    'prev_text' => '前へ',
    'next_text' => '次へ',
    'end_size' => 1, //初期値:1  両端のページリンクの数
    'mid_size' => 2, //初期値:2  現在のページの両端にいくつページリンクを表示するか(現在のページは含まない)
    'prev_next' => true, //初期値:true  リストの中に「前へ」「次へ」のリンクを含むか
  );
}
$pagination = paginate_links($pagination_format);
?>

<?php if (is_array($pagination)) : ?>

<div class="Pagination">
  <ul class="Pagination__list">
    <?php foreach ($pagination as $pagination_link) : ?>
    <li class="Pagination__item"><?php echo wp_kses_post($pagination_link); ?></li>
    <?php endforeach;  ?>
  </ul>
  <div class="Pagination__total"><?php echo esc_html($current_num_page); ?> / <?php echo esc_html($max_num_pages); ?>
  </div>
</div>

<?php endif;

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

paginate_links()

get_query_var()

WordPress変数

$wp_query

PHP関数

is_array()