WordPressで特定のカテゴリーに属する投稿一覧を表示する時、100件とか1ページ中にズラッと表示させるんじゃなくって「10件ずつ10ページ」とか、分けて表示する方法がありますよね。
具体例ですと、このブログの「WordPressに関する投稿一覧ページ」は、以下のようになっています。
1ページ中に9件表示、全部で26ページに分割していますね。2ページ目には次の9件って感じの。こういった実装は「ページネーション（ページングなど）」と呼ばれています。
「ページネーション」の実装方法は「paginate_links」という関数を使えば割と手間が少なくできるんですが・・・
ここまでが前提で、以下が本題です。
モバイル表示の時のページネーションをカスタマイズしたい
スマホなどのモバイル表示の場合のページネーションのデザインは、下のようにできたらいいな～と思っています。
モバイルの時はこんな表示にしたいな～
上のページネーションの特徴は、「前のページ」「次のページ」のリンクをページ番号とは別の並びにしている（下に並べている）、ということです。
なぜこんな表示にしたいのか？
モバイル画面は表示する領域が狭いので、ページ番号と「前のページ」「次のページ」を同じ並びにすると表示が崩れました。その表示の崩れを回避するためです。
1ページに表示させるページ番号の数を減らせばいいんじゃないか？
一瞬思ったんですが、1ページ中には前後ページ含めて数ページ分はあらかじめ用意させておきたいと思っているんですよね～。
また、モバイル画面ではリンクボタン1つ1つをなるべく大きく表示して閲覧者にとって「これはボタンである」と認識しやすくしたい。
というわけで、主に上のような理由でページネーションのデザインを好きにカスタマイズできればいいな～と思っています。
独自で作ったもので実装はできているけど・・・
実は、今ほど挙げたモバイル表示の時のページネーションのデザインは、いくつかのサイトで独自にプログラムを作ってWordPressに組み込んでいます。
「実装できてるんならいいんじゃないか？」とも思うんですが・・・もちろん、他のWordPressで作ったサイトにも使えるように汎用性を持たせた作りにはしたんですが、せっかくWordPressであらかじめ用意されている関数などを使って便利にできるなら知りたいな～と思っています。
もし何かいい方法や、ヒントになる書籍などをご存知でしたら、ご紹介くださいますと嬉しいです。
このページを共有する