【WordPress】固定ページでページネーションを実装する方法

2025年06月24日 2025年06月25日

WordPressの固定ページでページネーションを実装しても表示されずに困った経験はありませんか？この記事では固定ページでページネーションを実装する方法をご紹介します。

この記事では以下のお悩みを解決します。

・固定ページでページネーションが表示されない。
・paginate_linksで固定ページのページネーションの実装方法を知りたい。

目次[閉じる]

1. paginate_linksの設定方法
2. 実装方法
3. まとめ

トップページやアーカイブページでページネーションを実装するにはthe_posts_paginationを使用すれば簡単に実装できます。以前、当ブログでもthe_posts_paginationでページネーションを実装する方法をご紹介しました。

【WordPress】プラグインなしでページネーションを実装する方法

https://code-sq.com/pagination_without_plugin

一方、固定ページにページネーションを実装する場合は、the_posts_paginationをそのまま使っても表示されません。

そこで今回はthe_posts_paginationを使わずにページネーションを実装する方法をご紹介します。

参考サイト

【WordPress】固定ページにページネーションを表示する方法

https://takechi-web.com/fixed-page-pagination/

1. paginate_linksの設定方法

固定ページでページネーションを実装するには「paginate_links」を使用します。paginate_linksもthe_posts_paginationと同じWordPress専用の関数です。

paginate_linksの設定方法は以下のとおりです。$argsにはパラメータを連想配列で設定しますが、直接引数にパラメータを設定しても大丈夫です。また、paginate_linksで出力するには「echo」を使う必要があるので注意してください。

<?php

 $args = array(
  'mid_size' => 2,
  'end_size' =>  1,
 );

 echo paginate_links($args);

?>

paginate_linksで設定できるパラメータ一覧です。

パラメータ	説明
base	ページ番号を除いたページネーションリンクのベースとなるURLを指定
format	base の %_% を実際のページ番号に置き換えるための文字列を指定
total	総ページ数(初期値:1)
current	現在のページ番号(初期値:1)
aria_current	現在のページを示すspanタグに設定されているaria-current属性の値を指定(初期値:page)
show_all	すべてのページ番号のリンクを表示するかどうか（初期値:false）「’show_all’ => true」を指定したときの例
end_size	両端に表示するページ番号のリンクの数（初期値:1）「’end_size’ => 2」を指定したときの例
mid_size	現在のページの両端のページ番号のリンクの数（初期値:２）「’mid_size’ => 1」を指定したときの例
prev_next	「« 前へ」、「次へ»」のリンクを表示するかどうか(初期値: true)
prev_text	「« 前へ」のリンクのテキストを指定する(初期値:« 前へ) 「’prev_text’ => ‘&lt’」を指定したときの例
next_text	「次へ»」のリンクのテキストを指定する(初期値:次へ») 「’next_text’ => ‘&gt’」を指定したときの例
type	ページネーションの出力形式を指定する(初期値:plain) 「plain」、「array」、「list」の3つの中から指定する。 plain: HTML文字列を返す array: 配列を返す list: <ul></ul>で囲まれたリストで返す
add_args	ページネーションのリンクのURLの末尾にクエリパラメータを追加する（初期値:false）クエリパラメータと値を連想配列で指定する。「add_args => array(‘example’ => ‘abc’);」を指定した例
add_fragment	ページネーションリンクのURLの末尾にフラグメントを追加する(初期値:’ ’) 「’add_fragment’ => ‘#abc’」を指定した例
before_page_number	ページ番号リンクの前に表示するテキストを指定できる(初期値: ‘ ‘) 「’before_page_number’ => ‘Page: ‘」を指定したときの例
after_page_number	ページ番号リンクの後に表示するテキストを指定できる(初期値: ‘ ‘) 「’after_page_number’ => ‘ページ’」を指定したときの例

2. 実装方法

では次に実装方法をみていきましょう。今回は以下のページネーションを実装します。

固定ページに以下のコードを記述します。

<?php

  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; //➀：現在のページ番号を取得する
  $query_args = array(
   'post_type'      => 'post',  //➁：「投稿」を取得する
   'posts_per_page' => 5,       //➁：1ページあたり投稿を5件表示する
   'paged'          => $paged,  //➁：現在のページ番号を指定する
   'orderby'        => 'date',  //投稿日を基準に並べる
   'order'          => 'DESC',  //降順に並べる
  );

 $the_query = new WP_Query($query_args);
 if($the_query->have_posts()):
   while($the_query->have_posts()):$the_query->the_post(); 
?>

 <!--ループ内の処理を記述-->

<?php 
  endwhile;
  if($the_query->max_num_pages > 1): 
?>
    <div class="pagination">
    <?php 
      $pagination_args = array(
       'base'    => get_pagenum_link() . "%_%",  //➂：ページ番号を除いたベースURLを指定
       'format'  => 'page/%#%/',                 //➂：base の %_% の部分を置き換える文字列を指定
       'total'   => $the_query->max_num_pages,   //➂：総ページ数を指定
       'current' => $paged,                      //➂：現在のページ番号を指定
      );

      echo paginate_links($pagination_args);
    ?>
    </div>
<?php
  endif;
 endif;
 wp_reset_postdata();
?>

コードの解説

実装するためのポイントは以下の3点になります。

➀ get_query_var(‘paged’)で現在のページ番号を取得する。
➁ WP_Queryのパラメータに’post_type’、’posts_per_page’、’paged’を設定する。
➂ paginate_linksのパラメータに’base’、’format’、’total’、’current’を指定する。

この３つのポイントを中心に解説します。

<?php

  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; //➀：現在のページ番号を取得する
  $query_args = array(
   'post_type'      => 'post',  //➁：「投稿」を取得する
   'posts_per_page' => 5,       //➁：1ページあたり投稿を5件表示する
   'paged'          => $paged,  //➁：現在のページ番号を指定する
   'orderby'        => 'date',  //投稿日を基準に並べる
   'order'          => 'DESC',  //降順に並べる
  );

 $the_query = new WP_Query($query_args);
 if($the_query->have_posts()):
   while($the_query->have_posts()):$the_query->the_post(); 
?>

 <!--ループ内の処理を記述-->

3行目：$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;

get_query_var(‘paged’)は現在のページ番号を取得します。三項演算子を使い、get_query_var(‘paged’)の値が存在する場合は取得した数値、「0」の場合は「1」をセットします。

2ページ目以降はそのページ番号を取得しますが、1ページ目はget_query_var(‘paged’)が「0」になることがあります。

※三項演算子は「条件式 ? 式１ : 式２」という構文で条件式がtrueの場合は式1、falseの場合は式2を返します。

get_query_var( string $query_var, mixed $default_value = ‘ ‘) : WordPressの専用関数で現在のリクエスト（ページ表示）に含まれる「クエリ変数」の値を取得する。
$query_var: 取得したいクエリ変数のキー ‘paged’をセットすると
$default_value: デフォルト値。省略可能。

5行目：’post_type’ => ‘post’,

‘post_type’はWP_Queryで取得するデータの投稿タイプを指定します。’post’は「投稿」を取得します。

6行目： ‘posts_per_page’ => 5,

‘posts_per_page’ は1ページあたり何件表示するかを指定します。未指定の場合は、管理画面➡設定➡表示設定➡「1ページに表示する最大投稿数」に設定された値が自動で適用されます。

7行目：’paged’ => $paged

‘paged’は現在のページ番号を指定しています。

12行目： $the_query = new WP_Query($query_args);

投稿記事一覧を取得しています。固定ページで投稿一覧を取得するには「WP_Query」を使う必要があります。

<?php 
  endwhile;
  if($the_query->max_num_pages > 1): 
?>
    <div class="pagination">
    <?php 
      $pagination_args = array(
       'base'    => get_pagenum_link() . "%_%",  //➂：ページ番号を除いたベースURLを指定
       'format'  => 'page/%#%/',                 //➂：base の %_% の部分を置き換える文字列を指定
       'total'   => $the_query->max_num_pages,   //➂：総ページ数を指定
       'current' => $paged,                      //➂：現在のページ番号を指定
      );

      echo paginate_links($pagination_args);
    ?>
    </div>
<?php
  endif;
 endif;
 wp_reset_postdata();
?>

21-36行目：if($the_query->max_num_pages > 1) : ~ endif;

総ページ数が2ページ以上ある場合はページネーションを表示します。「$the_query->max_num_pages」は総ページ数を取得しています。

26行目： ‘base’ => get_pagenum_link(). ‘%_%’,

‘base’はページネーションリンクのベースとなるURLを設定します。’%_%’はプレースホルダーで’format’で指定した値に置き換わります。

例：https://example.com/%_%　　今回の場合は%_%の部分がformatで指定した「page/%#%/」に置き換わります。

get_pagenum_link(int $pagenum = 1, bool $escape = true ) : WordPress専用の関数で指定したページ番号のリンク(URL)を取得する
・$pagenum: ページ番号を指定する。初期値は1
・$escape: エスケープ処理するかどうかを指定する。初期値はtrue。省略可能。

27行目：’format’ => ‘page/%#%/’,

‘format’はURLのページ番号の部分を設定します。’%#%’はプレースホルダーで実際のページ番号に置き換わります。

28行目： ‘total’ => $the_query->max_num_pages,

‘total’は総ページ数を指定します。

29行目：’current’ => $paged,

‘current’は現在のページ番号を設定します。

38行目：wp_reset_postdata();

WP_Queryで投稿データを取得し終えたら、セットした情報を元に戻します。

次にCSSでスタイルを設定します。以下の設定をすることで最初の画像のページネーションになります。スタイルは必要に応じて変更してください。

a {
  text-decoration: none; 
}

.pagination {
  text-align: center;
}

.pagination .page-numbers {
  display: inline-block;
  border: 1px solid #b1b1b1;
  padding: 3px 6px;
  color: #333;
  margin: 0 5px;
  transition: 0.3s ease-in-out;
}

.page-numbers:not(.current):hover {
  background-color: #b1b1b1;
  color: #FFF;
}

.current {
  background-color: #c8dbf8;
  color: #FFF;
}

以上で実装は完了です。ページネーションが表示されているか確認してみてください。