固定ページに投稿一覧を表示したんだけど、ページネーションも設置したい。
この記事では、固定ページに投稿一覧用のページネーションを設置する方法について解説します。
なお、固定ページに投稿一覧を表示する方法は下の記事で解説していますので、あわせてご参照ください。
WordPressの固定ページにページネーションを表示するのは、少しだけ面倒
ページネーションを自作する方法に書いた通り、「投稿一覧ページ」にページネーションを設置する場合は、特別難しいことはありません。
「the_posts_pagination」や「paginate_links」という便利なWordPress関数を使えば、簡単にページネーションを出力してくれるからです。
しかし、固定ページだと、単に上の関数を書くだけではページネーションは表示されません。
少しだけ、面倒な書き方が必要になってきます。
WordPressの固定ページにページネーションを表示する方法
固定ページにページネーションを設置する場合は、次のように記述します。
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged'): 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'paged' => $paged,
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()):?>
<?php while($the_query->have_posts()):?>
<?php $the_query->the_post();?>
/*ループ処理の内容*/
<?php endwhile;?>
<?php endif;?>
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
'base' => get_pagenum_link() . '%_%',
'format' => 'page/%#%/',
'current' => $paged,
'total' => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata();?>
コピペでOKですが、コードの中身が気になるという方は、以下の解説をご覧ください。
コード解説
コードは、次の3ブロックで構成されています。
それぞれ、分けて解説します。
WP_Queryクラスの初期化
2行目に登場する「get_query_var」ですが、これはWP_Queryクラスのクエリ変数を取得できるWordPress関数です(varはvariable(変数)の略です)。
get_query_var( 'paged' )とすると現在のページ番号を取得できるのですが、WordPressの仕様上、1ページ目は「0」が取得されます(興味があればvar_dumpしてみてください)。
そこで三項演算子を用いて「取得した数値が0以外ならページ番号を$pagedに代入し、0なら1を代入する」という記述を行います。
これにより、$pagedには正しいページ番号が代入されます。
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged'): 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'paged' => $paged,
);
$the_query = new WP_Query($args);
?>
次に、WP_Queryクラスの初期化を行うのですが、このとき'paged' => $pagedとして現在のページ番号を渡します。
これがないと、ページネーションは正しく機能しません。
なお、posts_per_pageやその他のパラメータは、状況に合わせて設定してください。
WP_Queryクラスのパラメーター一覧|wordpress.org
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged'): 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'paged' => $paged,
);
$the_query = new WP_Query($args);
?>
ループ処理(サブループ)
続く箇所では、投稿をサブループで回しています。
こちらは特に問題ないと思うので、解説は割愛します。
<?php if($the_query->have_posts()):?>
<?php while($the_query->have_posts()):?>
<?php $the_query->the_post();?>
/*ループ処理の内容*/
<?php endwhile;?>
<?php endif;?>
ページネーションの表示
最後に、ページネーションの表示箇所です。
まず、if文を使って「合計ページ数が1を超える場合のみページネーションを表示する」という条件分岐を行っている点に注意してください。
これにより、もし合計が1ページの場合、ページネーションは表示されません。
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
'base' => get_pagenum_link() . '%_%',
'format' => 'page/%#%/',
'current' => $paged,
'total' => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata();?>
if文の中でpaginate_linksを実行し、ページネーションを出力します。
この際、paginate_linksに渡すパラメーターに注目してください。
base、format、current、totalというパラメーターを用い、ページネーションやURLの表示をコントロールしています。
それぞれの特徴と解説は次のとおりです。
- base:
- 全体のペースとなるURL表示。get_pagenum_link() . '%_%'とすることで、URL全体が「ページURL/~」の形になる。 ~にはformatで設定した書式が入る。
- format:
- URLのページ番号部分の書式。'page/%#%/'とするとURLに「page/2/」のように表示される。
- current:
- 現在のページ番号。あらかじめページ番号を格納した$pagedを渡す。
- total:
- ページ数の合計。
なお、paginate_linksに渡せるパラメーターは他にもたくさんあり、ページネーションの表示設定を自由に変更できます。
必要に応じて、下記の公式リファレンスを確認してください。
paginate_linksパラメーター一覧|wordpress.org
なお、ページネーションをお洒落にカスタマイズしたい方は、下の記事で解説しています。