カスタム投稿記事一覧にページネーション機能を付ける方法

オリジナルの自作テーマでカスタム投稿記事一覧ページにページネーション機能を付ける方法をご紹介しています。

最新記事を表示させたまま、次の10件・前の10件という形で下に見出しリンクを表示します。

ページの下にarchive-○○〇.phpのソースコードを丸ごと紹介しています。

カスタム投稿記事一覧にページネーションを付ける

今回の目的

今回はオリジナルで作成しているテーマの中で、カスタム投稿記事一覧ページを用意した場合の覚書です。

そのカスタム記事一覧には、常に「最新の記事」が上部に表示します。

その下にカスタム投稿の見出しリンクが10件ずつ表示され、「次の10件」「前の10件」とリンク移動もできるようにする事が目的です。

仕様・注意

今回は独自に作成したWordpressテーマによるカスタマイズが前提となっています。

Wordpressに格納されたシステムを使ったページネーションであり、wp_pagenaviなどのプラグインは使いません。

function.phpにも追記はしません。

ページネーション実装後、次の10件・前の10件に進んでも最新の記事は上部にそのまま表示された状態になります。

archive-○○○.phpの用意

まずはカスタム投稿記事一覧向けに、archive-○○○.php（〇〇〇はカスタム投稿スラッグ名）を用意します。

phpファイルの上部と下部にそれぞれ

を付けておきましょう。

最新投稿記事の表示

まずは最新のカスタム投稿記事を1件だけ表示するコード例です。

<?php query_posts("post_type=〇〇〇&posts_per_page=1"); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <section> <?php the_title(); ?> <?php the_content(); ?> </section> <?php endwhile; endif; wp_reset_query(); ?>

1行目

post_typeで「カスタム投稿のスラッグ名」を入れる事で、投稿名を1つに限定しています。

カスタム投稿が複数ある場合は、ここできちんと指定する必要があります。

さらにposts_per_pageで表示件数を限定しています。

ここでは最新の記事1件のみですので、数値を「1」としています。

ここを2や3とすればそれだけ記事が表示されます。

2行目以降

通常よく使われる記事情報の取得コードです。

sectionから/sectionまで（タイトルと本文）が投稿記事の数分だけループ（繰り返し処理）して表示されます。

今回は記事数を1件に限定しているので記事自体は1つしか表示されません。

wp_reset_query()

最後にwp_reset_query()をして「最新記事を表示するクエリ」を終了しています。

この後に記事の見出しリンクを10件ずつ表示させるページネーション向けのphpコードを追加する予定ですよね。

最新記事を出す部分とそれ以外の見出しを出す部分とはクエリの区別をしなければならないので、一旦クエリを終了させるために使用します。

記事見出し（10件ずつ）の表示

次は最新投稿の下に見出しリンクを10件ずつ並べます。

以下がカスタム投稿記事のリンク付き見出し部分を表示させるコードです。

<section class="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> <?php endwhile; endif; ?> </section>

pタグ内のコードが件数分だけ繰り返して出力されます。

10件に限定するには

このarchive-〇○○.php内には、見出しリンクの表示数を限定しているところはありません。

この設定はWordpressの管理画面側でおこないます。

Wordpress管理画面の設定→「表示設定」の欄に行き、1ページに表示する最大投稿数の欄を「10」にするだけです。

この数値を「20」にすれば20件単位でページネーションする事になりますね。

ページネーションコードを記述

上記のすぐ下に、ページネーション用の下記コードを追記します。

<div class="pagination"> <?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){ $paginate_format = ''; $paginate_base = add_query_arg('paged','%#%'); } else{ $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/','paged');; $paginate_base .= '%_%'; } echo paginate_links(array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $wp_query->max_num_pages, 'mid_size' => 4, 'current' => ($paged ? $paged : 1), 'prev_text' => '« 前へ', 'next_text' => '次へ »', )); ?> </div>

これにより10件ずつ記事リンクが表示され、その下にページネーションリンクが表示されます。

2ページ目、3ページ目にいっても上の最新投稿記事は表示されたまま、見出しリンク部分のみ次の10件（過去の10件）が表示される形です。

ページネーションは総記事数を10で割った数の「最終リンク」まで生成されています。

max_num_pagesのところで、トータルの生成するリンクページ数を計算しているからです。

コードの説明

global $wp_rewriteにより、パーマリンクのオリジナルルールを設定します。

URL表記

といったURLが付くように指定しています。

get_pagenum_linkにより取得したページ番号リンクが「ドメイン名/?page=」ならば「ドメイン名/?paged=2」の形をとる様、ifの条件分岐で分けています。

user_trailingslashit

この関数でページURLの終わりに「/」スラッシュを付けています。

ページネーションのリンク数について

投稿されている記事の総件数によってページネーションの「リンク数」が変わります。

今回はmid_sizeを「4」としているので、現在開いているページから4つ先まで表示され、その後は「…」が表示されています。

現在開いているページが後半の方であればその4つ前までが表示され、それより前は「…」が付く形です。

この数値を「総記事数÷10」つまりページネーションの最大数にしておけば、全て数値リンクが表示され「…」が表示されなくなります。

前へ・次へのリンク

1ページ目の前には「« 前へ」、最終ページの後ろには「次へ »」が付きます。

このリンクは現在のページ（current）の1つ前、或いは1つ後ろに飛ぶためのリンクです。

ページネーションソース

実際にページネーション部分を生成しているソース例が以下となります。

カスタム投稿タイプが「mailmagagine」のページネーション

<div class="pagination"> <a class="prev page-numbers" href="https://aaa.tw/mailmagagine/">« 前へ</a> <a class="page-numbers" href="https://aaa.tw/mailmagagine/">1</a> <span aria-current="page" class="page-numbers current">2</span> <a class="page-numbers" href="https://aaa.tw/mailmagagine/page/3/">3</a> <a class="page-numbers" href="https://aaa.tw/mailmagagine/page/4/">4</a> <a class="page-numbers" href="https://aaa.tw/mailmagagine/page/5/">5</a> <a class="page-numbers" href="https://aaa.tw/mailmagagine/page/6/">6</a> <span class="page-numbers dots">& h e l l i p ;</span> <a class="page-numbers" href="https://aaa.tw/mailmagagine/page/9/">9</a> <a class="next page-numbers" href="https://aaa.tw/mailmagagine/page/3/">次へ »</a> </div>

前へと次へが両方出る様に2ページ目のソースを掲載しています。

& h e l l i p ;は「…」を示しています。 使う際は文字間の空白を消してください。

ページネーションのデザイン変更

div class="pagination"で囲ってあるので、上記コードを参考にオリジナルのデザインにする事もできます。

CSSファイルにて独自に指定しましょう。

まとめ

最終的なarchive-○○○.php内コード

<?php get_header(); ?> <h2>最新号</h2> <?php query_posts("post_type=mailmagagine&posts_per_page=1"); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <section> <?php the_title(); ?> <?php the_content(); ?> </section> <?php endwhile; endif; wp_reset_query(); ?> <h2>過去の記事一覧</h2> <section class="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> <?php endwhile; endif; ?> </section> <div class="pagination"> <?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){ $paginate_format = ''; $paginate_base = add_query_arg('paged','%#%'); } else{ $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/','paged');; $paginate_base .= '%_%'; } echo paginate_links(array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $wp_query->max_num_pages, 'mid_size' => 9, 'current' => ($paged ? $paged : 1), 'prev_text' => '« 前へ', 'next_text' => '次へ »', )); ?> </div> <?php get_footer(); ?>

ページネーションを実装するならプラグインが豊富にありますし、わざわざ直接phpを書かなくてもよいかも知れません。

しかしオリジナルテーマを構成している最中だと、うまくプラグインが動作しない場合も出てきます。

今回の手順はfunction.phpにも触れずに、archive-○○○.phpだけでシンプルに済みますので是非ご参考下さい。

一押し人気コーナー紹介