ページネーションとは、下記のように1ページに記事全件が収まりきらない場合に表示されるページ送りのためのリンクのことです。

ブログなどで記事の件数が増えてくると、ページネーションを設置して記事一覧ページをページ分けする必要があります。

ただしWordPressでブログを作っている場合、のテーマによっては「Older Posts」のようにテキストでページネーションが表示されるものの、数字でページネーションが表示されない場合があります。

この記事では、プラグイン無しでWordPressのWebサイトにページネーションを設置する方法をご紹介しています。

ページネーションとは

ページネーションとは、下記のような記事一覧ページが複数ページに分かれている場合に画面の下部に表示される各ページへのリンクのことです。

テーマによっては、標準で上記のようなページ送りの表示が提供されているものもありますが、テーマを自作する場合や、ページネーションの表示がテキスト表記だけのものについては、自分でページネーションを設置しなければなりません。

ページネーションを設置するコード

早速ページネーションを設置するコードをご紹介しましょう。

paginate_links()というページネーションを表示するための関数が用意されているので、それを利用すると簡単にページネーションを表示することができます。

テーマのテンプレートファイルの中に、ページネーションを設置したい場所に下記のコードを貼り付けましょう。

そうすると、下記のようなページネーションが表示されるようになります。

設定可能なパラメータ

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’:改行文字によって区切られたリンクの文字列を返します。
  • ‘array’:表示を完全にコントロールできるようにページ送りのリンクを配列に入れて返します。
  • ‘list’:ulタグを使ったリストを表示します。
plain
add_args 追加のクエリ引数の配列 false
add_fragment それぞれのリンクに付け加える文字列 なし
before_page_number ページ番号の直前に付け加える文字列 なし
after_page_number ページ番号の直後に付け加える文字列 なし

CSSでデザインを整える

出力されたページネーションは、そのままだとデザインがイケてないので、自分でCSSを書いてページネーションのデザインを整えましょう。

参考までに、本サイトのページネーションのCSSを記載しておきます。

上記のCSSを追加すると、下記のようなページネーションが表示されるようになります。

プラグインを使ってページネーションを表示する方法

自分でテーマファイルを編集したくないという人は、「WP-PageNavi」というプラグインを使ってもっと簡単にページネーションを表示することが可能です。

詳しい使い方は下記の記事で解説しています。