ページネーションとは、記事一覧ページなどで1ページにすべての記事が表示できない場合に、ページ移動するためのリンクのことです。
WordPressの場合、テーマによっては「過去の投稿」「新しい投稿」というように、ページ番号ではなく前後のページへのリンクしか表示されない場合があります。
この記事では、「WP-PageNavi」というプラグインを使ってWordPressの記事一覧ページにページネーションを設置する方法をご紹介しています。
WP-PageNaviをインストールする
まずは、ページネーションを設置するために「WP-PageNavi」をインストールして有効化しましょう。
WordPressの管理画面から、「プラグイン」→「新規追加」を選択して検索ボックスに「WP-PageNavi」と入力してください。
ページネーションを表示する
WP-PageNaviのインストールと有効化が完了したら、テーマを編集してページネーションを表示したい場所に下記のコードを追加します。
1 | <?php wp_pagenavi(); ?> |
これで、記事一覧画面に下記のようなページネーションが表示されるようになります。
このままだと、見た目があまりきれいではないので、設定を変更して表示内容を修正しましょう。
WP-PageNaviを設定する
「設定」の中に「PageNavi」というメニューが追加されているので、それを開きます。
すると、下記のような設定画面が表示されます。
| 項目 | 詳細 |
|---|---|
| 総ページ数用テキスト | ページネーションの一番左に表示される総ページの表示です。不要ならば空欄にすると非表示にすることができます。 |
| 現在のページ用テキスト | 現在のページの表示内容を設定します。 |
| ページ用テキスト | 現在のページ以外のページの表示内容を設定します。 |
| 最初のページ用テキスト | 最初のページへ飛ぶためのリンクボタンを設定します。 |
| 最後のページ用テキスト | 最後のページへ飛ぶためのリンクボタンを設定します。 |
| 前のページ用テキスト | 1つ前のページへ飛ぶためのリンクボタンを設定します。 |
| 次のページ用テキスト | 1つ後ろのページへ飛ぶためのリンクボタンを設定します。 |
| 「前へ…」用テキスト | 現在のページよりも前にページがある場合に表示される内容を設定します。 |
| 「次へ…」用テキスト | 現在のページよりも後ろにページがある場合に表示される内容を設定します。 |
おすすめの設定方法
初期設定の状態だと、表示される要素が多いので表示をシンプルにする方法をご紹介します。
ページナビゲーションテキスト
まず、ページナビゲーションテキストのおすすめの設定は、下記の通りです。
| 項目 | 設定内容 |
|---|---|
| 総ページ数用テキスト | 無し（空欄にする） |
| 最初のページ用テキスト | 無し（空欄にする） |
| 最後のページ用テキスト | 無し（空欄にする） |
| 前のページ用テキスト | 無し（空欄にする） |
| 次のページ用テキスト | 無し（空欄にする） |
上記のように設定すると、ページネーションの表示は下記のようになります。
これでだいぶ表示がすっきりしましたね。
ページナビゲーション設定
設定画面の一番下に「省略ページを以下の倍数で表示」という設定項目があります。これは、例えば「10」に設定しておくと、数十ページある場合に10の倍数のページを「10」「20」「30」のように表示されるようになります。
この表示はあまり必要ないので、「0」に設定すると表示されないようになります。
デザインを整える
最後に、ページネーションのデザインを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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .wp-pagenavi { margin: 20px auto; display: flex; align-items: baseline; } .wp-pagenavi .current, .wp-pagenavi .page, .wp-pagenavi .extend, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink, .wp-pagenavi .first, .wp-pagenavi .last { border: 1px solid #398bd3; background: #fff; height: 2em; line-height: 2em; padding-top: 0; padding-bottom: 0; } .wp-pagenavi .current, .wp-pagenavi .page, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink, .wp-pagenavi .extend { width: 2em; text-align: center; } .wp-pagenavi .current { background: #398bd3; color: #fff; } .wp-pagenavi .extend { border: none; background: transparent; } |
プラグイン無しでページネーションを設置する方法
ここまで「WP-PageNavi」を使ってページネーションを設置する方法をご説明してきましたが、プラグインを使わずにページネーションを設置することもできます。
テーマの編集が伴うため、少し中上級者向けかもしれませんが、プラグインを増やしたくないという方はこちらの方法がおすすめです。
「WP-PageNavi」を使ってページネーションを設置する方法
