WordPressでページネーションを実装する方法

Wordpressでページネーションを実装する方法

WordPressでプラグインを使わず、ページ送りを実装した際の備忘録です。

トップページに表示している投稿記事一覧を10件ずつページ送りで表示するページネーションを作成します。

WordPressでページネーションを作成するためにpaginate_linksという関数を使用します。ページネーションを表示させたい部分に下記のコードを記述します。

<?php
 global $wp_query;    
 $big = 9999999999;
 $arg = array(
  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
  'current' => max( 1, get_query_var('paged') ),
  'total'   => $wp_query->max_num_pages
 );
 echo paginate_links($arg);
?>

コードの書き方は「WordPressCodex」をご確認ください。これで下記のようなhtmlでページネーションが表示されます。

<span class="page-numbers current">1</span>
<a class="page-numbers" href="http://example.com/?paged=2">2</a>
<a class="page-numbers" href="http://example.com/?paged=3">3</a>
<a class="page-numbers" href="/http://example.com/?paged=4/">4</a>
<a class="next page-numbers" href="http://example.com/?paged=2">次へ »</a>

spanタグが現在表示されているページです。1ページに表示する投稿記事の数に合わせ、ページ分のaタグが自動で追加されます。
2ページ目以降は1行目に「前へ」が表示されます。

1ページに表示する記事の件数はWordpress管理画面から設定できます。「設定」の「表示設定」で「1ページに表示する最大投稿数」を変更してください。

生成されたhtmlに合わせてcssを設定してページネーションの完成です。

Share on Twitter
関連記事
WordPressで記事内に同じカテゴリーの記事一覧を表示する方法
WordPressで記事内に同じカテゴリーの記事一覧を表示する方法
WordPressでカスタム投稿タイプを設定する方法
WordPressでカスタム投稿タイプを設定する方法
ACFで作成したカスタムフィールドを検索対象に含めるプラグインACF: Better Searchの使い方
ACFで作成したカスタムフィールドを検索対象に含めるプラグインACF: Better Searchの使い方