WP_Queryを使用して作った一覧ページに前後or番号付きページャーを付ける方法

WP_Queryを使用して作った一覧ページに前後or番号付きページャーを付ける方法
2019年9月7日2020年3月14日

WP_Queryを使用して、色々な条件を指定して作成した一覧ページテンプレート。

「よっしゃ!できた!」と思ったら、「ページング機能が欲しい!」ってなりますよね。通常のブログのように、どんどん記事が増えていく投稿タイプであれば、一覧ページにはページャーが不可欠です。

ワードプレスではページャー用の便利な関数が用意されています。この記事では「前へ 次へ」というシンプルなページャーと、「前 1 2 3 4 … 13 次」のような番号付きのページャーの作成方法を書いていきたいと思います。

共通の追加コード

前後タイプ・番号付きタイプ共に必要な共通コードです。

追加コード1

まず、最初の追加コードですが、これは一番最初に追加します。WP_Queryの条件配列の記述前ですね。

現在のページ数を取得して変数に格納しています。get_query_var(‘paged’)でページ数が取得できなかったら、1ページ目と判断するという内容です。

注意点

固定ページを使用したフロントページのテンプレートとして使用する場合は、1行目と2行目のget_query_var(‘paged’)をget_query_var(‘page’)に変更して下さい。pagedをpageにするだけです。こうしないと2ページ目以降が404エラーになると思います。

追加コード2

2つ目の追加コードは、WP_Queryの条件の配列に追加します。

こちらは1番目のコードで格納しておいた値を配列に追加しているだけですね。元々書いてあった条件配列の最後にカンマが付いてなかったら、付け忘れに注意しましょう。

これでページャーを設置する準備が整いました。次からは各タイプのページャーを設置していきましょう。

前後ボタン型のページャー作成方法

こちらはnext_posts_link()とprevious_posts_link()という2つの関数を利用します。どちらも第1パラメータがリンクテキストです。好きなテキストに書き換えます。

設置コード

表示したい場所に書きますが、whileのループの外に書きます。

つまり、if($query->have_posts())の中、かつwhileループの外です。ループして表示するコンテンツの前でも後でも両方でも構いません。

2カ所以上表示する場合は、whileループの開始前に変数に格納しておいて、表示箇所でechoするのが良いと思います。この場合は、取得だけしてくれるget_previos_posts_link()とget_next_posts_link()を使用しましょう。

完成形のサンプルコード

ループ表示したコンテンツの後に、前後タイプのページャーを表示する場合のサンプルコードです。

 

番号付きページャーの作成方法

ここではpaginate_links()という関数を使用します。この関数はページャー部分のリンク付きソースをページ番号付きタイプで構成してくれます。出力してCSSで見た目を整えるだけで、簡単に番号付きのページャーが完成します。

設置コード

こちらも記述する場所は、if($query->have_posts())の中、かつwhileループの外です。ループして表示するコンテンツの前でも後でも両方でも構いません。2カ所以上表示する場合は、whileループの開始前に変数に格納しておいて、表示箇所でechoするのが良いと思います。

前後の記事へのリンクテキストを変える場合は、prev_textとnext_textを書き換えます。

その他のpaginate_linksのパラメータについては、詳細は省かせて頂きますので、詳しく知りたい方はCODEXなどで確認してください。パラメータを指定する事で前後のページの表示数調整なども可能です。

完成形のサンプルコード

ループで表示したコンテンツの後に、番号付きタイプのページャーを出力する場合の完成形のサンプルです。

CSSで見た目の調整

サンプルコードでは、ページャーをpagerというクラスを付けたdivで囲っておきました。

基本的に吐き出されるコードはaタグとspanがツラツラと並んでいる状態なので、囲みを用意してあげると良いと思います。

書き出される各要素に付けられているクラスは以下のような感じです。

  • 前:prev
  • 次:next
  • …:dots
  • ページ番号(前・次・…も共通):page-numbers
  • 現在のページ:current

また、リンクはもちろんaタグ、リンクの無い要素はspanタグが使用されています。

これらを使用して、いい感じに仕上げましょう。

最後に

どうでしょうか。ちゃんとページング機能が付けられたでしょうか。

この記事、書き始めたら意外と面倒な記事になってしまいました。。ちょっと後悔しましたが、まぁ終わったので良しと。。

参考サイト

関数リファレンス/paginate links – WordPress Codex 日本語版

テンプレートタグ/next posts link – WordPress Codex 日本語版

関連のある記事

【タクソノミー&ターム編】WP_QueryのANDとORを併用した複雑な条件指定の書き方

【タクソノミー&ターム編】WP_QueryのANDとORを併用した複雑な条件指定の書き方

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages