ページネーションとは、下記のように1ページに記事全件が収まりきらない場合に表示されるページ送りのためのリンクのことです。
ブログなどで記事の件数が増えてくると、ページネーションを設置して記事一覧ページをページ分けする必要があります。
ただしWordPressでブログを作っている場合、のテーマによっては「Older Posts」のようにテキストでページネーションが表示されるものの、数字でページネーションが表示されない場合があります。
この記事では、プラグイン無しでWordPressのWebサイトにページネーションを設置する方法をご紹介しています。
ページネーションとは
ページネーションとは、下記のような記事一覧ページが複数ページに分かれている場合に画面の下部に表示される各ページへのリンクのことです。
テーマによっては、標準で上記のようなページ送りの表示が提供されているものもありますが、テーマを自作する場合や、ページネーションの表示がテキスト表記だけのものについては、自分でページネーションを設置しなければなりません。
ページネーションを設置するコード
早速ページネーションを設置するコードをご紹介しましょう。
paginate_links()というページネーションを表示するための関数が用意されているので、それを利用すると簡単にページネーションを表示することができます。
テーマのテンプレートファイルの中に、ページネーションを設置したい場所に下記のコードを貼り付けましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | <?php global $wp_query; $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages ) ); ?> |
そうすると、下記のようなページネーションが表示されるようになります。
設定可能なパラメータ
paginate_links()は、パラメータを設定することで表示されるページネーションをカスタマイズすることができるようになっています。
設定可能なパラメータは下記の通りです。
| パラメータ | 詳細 | 初期値 |
|---|---|---|
| base | ページ番号付きのリンクを生成するために使われるベースのURLを指定 | ‘%_%’ |
| format | ページネーションの構造を指定するのに使用 | ‘?page=%#%’ |
| total | ページの総数 | 1 |
| current | 現在のページ番号 | 0 |
| show_all | trueにすると、すべてのページ番号が表示される | false |
| end_size | 最初と最後に表示するページ番号の数 | 1 |
| mid_size | 現在のページの両側にいくつのページ番号を表示するか | 2 |
| prev_next | 「前へ」「次へ」のリンクを表示するか | true |
| prev_text | 前のページへのリンクとして表示する文言 | __(‘« Previous’) |
| next_text | 次ページへのリンクとして表示する文言 | __(‘Next »’) |
| type |
| plain |
| add_args | 追加のクエリ引数の配列 | false |
| add_fragment | それぞれのリンクに付け加える文字列 | なし |
| before_page_number | ページ番号の直前に付け加える文字列 | なし |
| after_page_number | ページ番号の直後に付け加える文字列 | なし |
CSSでデザインを整える
出力されたページネーションは、そのままだとデザインがイケてないので、自分でCSSを書いてページネーションのデザインを整えましょう。
参考までに、本サイトのページネーションのCSSを記載しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .pagination { display:flex; width:100%; justify-content: center; align-items: stretch; } .pagination .page-numbers { font-size:18px; width:2em; height:2em; line-height:1.9em; text-align:center; background:#fff; border:1px solid #FF6F61; display:block; margin:0 .2em; } .pagination .page-numbers.current { background:#FF6F61; color:#fff; } |
上記のCSSを追加すると、下記のようなページネーションが表示されるようになります。
プラグインを使ってページネーションを表示する方法
自分でテーマファイルを編集したくないという人は、「WP-PageNavi」というプラグインを使ってもっと簡単にページネーションを表示することが可能です。
詳しい使い方は下記の記事で解説しています。
プラグイン無しでWordPressにページネーションを設置する方法
