WordPress関連

ページネーションが効かない時の対応

2024-04-01

WordPressでページネーションが効かないことがあったので、その時に対応したことをまとめました。
※ちなみにページネーションとは上図の赤枠部分を指します。前後ページや別ページに移動するリンクのことです。

ページネーションが動作しなかった

ページネーションのリンクをクリックしても、対象のページが表示されませんでした。どのページをクリックしても、ページが遷移されず、ずっと同じページの状態でした。

今回のケースが起こりうる条件

WP_Queryでループ処理

今回のケースは、WP_Queryでループ処理をする場合に発生します。下記の記載があることを確認してください。

細かい違いは気にしなくて構いませんが、new WP_Query()があることは確認してください。それがあれば、下記の手順で解決するかもしれません。記載されていなければ別の原因だと思います。

//WP_Queryを使ってループ処理していること。
<?php
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
?>
<?php
while ($the_query->have_posts()) :
  $the_query->the_post();
?>

ページネーションの実装はなんでもOK

ページネーションを実装する方法は、プラグイン「WP-PageNavi」で表示しても、直接コードを書いても構いません。ページネーションを実装する方法に原因がある訳ではないので、どのような方法でページネーションを表示しても問題ないと思います。

原因はループ処理に情報が不足していた

ループ処理に下記２つが必要でした。

// ①下記を追加する
$paged = get_query_var('paged') ? get_query_var('paged') : 1; 
$args = array(
　// ②配列に下記を追加する
  'paged' => $paged, 
);

サンプルを載せていおきます。$argsの中身を適当に書き換えてください。

<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1; //ページネーションを使いたいなら指定
$args = array(
  'paged' => $paged, //ページネーションを使いたいなら指定
  'posts_per_page' => 5,//表示する記事の数
  'post_status' => 'publish', //公開の記事
  'post_type' => 'post', //投稿
  'orderby' => 'date', //日付を出力する基準
  'order' => 'DESC', //表示する順番

$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
?>
  <?php
  while ($the_query->have_posts()) :
    $the_query->the_post();
  ?>
  
  <!-- ここに出力した内容を書く -->
  
  <?php
  endwhile;
  ?>
<?php else : ?>
 
<?php
  wp_reset_postdata();
endif;
?>

追加したコードの説明

get_query_var('paged') ? get_query_var('paged') : 1;

このコードは、現在のページの送り番号を表示するコードです。
三項演算子を使っているで分かりにくいかもしれません。if文に直すと下記になります。

if(get_query_var('paged')){
	$paged = get_query_var('paged');
} else {
	$paged = 1;
}

get_query_var()とは？

WP_Queryでループ処理する際、いろいろな情報をget_query_var()で取得できます。取得できる情報はいろいろありますが、代表的なのは’paged’です。これは現在のページ番号を指します。

次にこちらのコードを説明をします。

$args = array( 'paged' => $paged, //ページネーションを使いたいなら指定 );

先ほどget_query_var()で現在のページ番号を取得しましたが、その情報をループ処理に設定しています。

これでページネーションのリンクをクリックすると対象のページが表示されるようになります。

ページネーションのリンクをクリックする
対象ページの送り番号を取得し、ループ処理にセットする。
対象ページが正常に表示される

という流れです。

まとめ

要するに、ループ処理する際に、現在のページ番号、すなわちページの送り番号を設定する必要があったということです。これらを設定しないと、他のページが表示されません。ページネーションでリンクは正しいけど、対象ページが表示されない状態となっていました。

つまづいている方がいましたら、参考にしてください。