WP_Queryを使用して作った一覧ページに前後or番号付きページャーを付ける方法
WP_Queryを使用して、色々な条件を指定して作成した一覧ページテンプレート。
「よっしゃ！できた！」と思ったら、「ページング機能が欲しい！」ってなりますよね。通常のブログのように、どんどん記事が増えていく投稿タイプであれば、一覧ページにはページャーが不可欠です。
ワードプレスではページャー用の便利な関数が用意されています。この記事では「前へ 次へ」というシンプルなページャーと、「前 1 2 3 4 … 13 次」のような番号付きのページャーの作成方法を書いていきたいと思います。
～ 目次 ～
共通の追加コード
前後タイプ・番号付きタイプ共に必要な共通コードです。
追加コード１
まず、最初の追加コードですが、これは一番最初に追加します。WP_Queryの条件配列の記述前ですね。
|
1 2 3 4 5 |
if(get_query_var('paged')){ $paged=get_query_var('paged'); }else { $paged=1; } |
現在のページ数を取得して変数に格納しています。get_query_var(‘paged’)でページ数が取得できなかったら、１ページ目と判断するという内容です。
注意点
固定ページを使用したフロントページのテンプレートとして使用する場合は、１行目と２行目のget_query_var(‘paged’)をget_query_var(‘page’)に変更して下さい。pagedをpageにするだけです。こうしないと２ページ目以降が404エラーになると思います。
追加コード２
２つ目の追加コードは、WP_Queryの条件の配列に追加します。
|
1 |
'paged' => $paged, |
こちらは１番目のコードで格納しておいた値を配列に追加しているだけですね。元々書いてあった条件配列の最後にカンマが付いてなかったら、付け忘れに注意しましょう。
これでページャーを設置する準備が整いました。次からは各タイプのページャーを設置していきましょう。
前後ボタン型のページャー作成方法
こちらはnext_posts_link()とprevious_posts_link()という２つの関数を利用します。どちらも第１パラメータがリンクテキストです。好きなテキストに書き換えます。
設置コード
表示したい場所に書きますが、whileのループの外に書きます。
つまり、if($query->have_posts())の中、かつwhileループの外です。ループして表示するコンテンツの前でも後でも両方でも構いません。
|
1 2 3 4 5 6 |
<div class="pager"> <?php previous_posts_link('前'); next_posts_link('次',$query->max_num_pages); ?> </div> |
２カ所以上表示する場合は、whileループの開始前に変数に格納しておいて、表示箇所でechoするのが良いと思います。この場合は、取得だけしてくれるget_previos_posts_link()とget_next_posts_link()を使用しましょう。
完成形のサンプルコード
ループ表示したコンテンツの後に、前後タイプのページャーを表示する場合のサンプルコードです。
|
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 |
<?php if(get_query_var('paged')){ $paged=get_query_var('paged'); }else { $paged=1; } $args=array( // 投稿の取得条件 'paged' => $paged, ); $query = new WP_Query($args); ?> <div> <h1><?php the_title(); ?></h1> <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?> <!-- ループさせるコンテンツ表示部分 --> <?php endwhile; ?> <!-- ページャー --> <div class="pager"> <?php previous_posts_link('前'); next_posts_link('次',$query->max_num_pages); ?> </div> <!-- / ページャー --> <?php wp_reset_postdata(); endif; ?> </div> |
番号付きページャーの作成方法
ここではpaginate_links()という関数を使用します。この関数はページャー部分のリンク付きソースをページ番号付きタイプで構成してくれます。出力してCSSで見た目を整えるだけで、簡単に番号付きのページャーが完成します。
設置コード
こちらも記述する場所は、if($query->have_posts())の中、かつwhileループの外です。ループして表示するコンテンツの前でも後でも両方でも構いません。２カ所以上表示する場合は、whileループの開始前に変数に格納しておいて、表示箇所でechoするのが良いと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="pager"> <?php $big = 999999999; $pagerArgs= array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, $paged ), 'total' => $query->max_num_pages, 'prev_text' => '前', 'next_text' => '次', ); echo paginate_links($pagerArgs); ?> </div> |
前後の記事へのリンクテキストを変える場合は、prev_textとnext_textを書き換えます。
その他のpaginate_linksのパラメータについては、詳細は省かせて頂きますので、詳しく知りたい方はCODEXなどで確認してください。パラメータを指定する事で前後のページの表示数調整なども可能です。
完成形のサンプルコード
ループで表示したコンテンツの後に、番号付きタイプのページャーを出力する場合の完成形のサンプルです。
|
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 40 41 42 43 |
<?php if(get_query_var('paged')){ $paged=get_query_var('paged'); }else { $paged=1; } $args=array( // 投稿の取得条件 'paged' => $paged, ); $query = new WP_Query($args); ?> <div> <h1><?php the_title(); ?></h1> <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?> <!-- ループさせるコンテンツ表示部分 --> <?php endwhile; ?> <!-- ページャー --> <div class="pager"> <?php $big = 999999999; $pagerArgs= array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, $paged ), 'total' => $query->max_num_pages, 'prev_text' => '前', 'next_text' => '次', ); echo paginate_links($pagerArgs); ?> </div> <!-- / ページャー --> <?php wp_reset_postdata(); endif; ?> </div> |
CSSで見た目の調整
サンプルコードでは、ページャーをpagerというクラスを付けたdivで囲っておきました。
基本的に吐き出されるコードはaタグとspanがツラツラと並んでいる状態なので、囲みを用意してあげると良いと思います。
書き出される各要素に付けられているクラスは以下のような感じです。
- 前：prev
- 次：next
- …：dots
- ページ番号（前・次・…も共通）：page-numbers
- 現在のページ：current
また、リンクはもちろんaタグ、リンクの無い要素はspanタグが使用されています。
これらを使用して、いい感じに仕上げましょう。
最後に
どうでしょうか。ちゃんとページング機能が付けられたでしょうか。
この記事、書き始めたら意外と面倒な記事になってしまいました。。ちょっと後悔しましたが、まぁ終わったので良しと。。
参考サイト
関数リファレンス/paginate links – WordPress Codex 日本語版
テンプレートタグ/next posts link – WordPress Codex 日本語版
