ホーム > WordPressのプラグイン > Wp_Queryを使ったらWp-Pagenaviが正常に表示されない問題を解決！

Wp_Queryを使ったらWp-Pagenaviが正常に表示されない問題を解決！

※当サイトは、アフィリエイト広告を利用しています

2019-09-29

公開

2024-10-16

更新

Share On:

WordPressでのサイト構築では、トップページやカテゴリーで投稿一覧を表示させます。
投稿一覧はループにより一覧表示しますが、WP_Queryを利用して表示させることが多くなっていますね。

管理人は当初、表示する投稿を絞り込むときには「query_posts」を利用していました。
ただし、「query_posts」はメインクエリーを書き換えてしまうので、「wp_reset_query」でリセットする必要があります。

しかし、この処理を忘れると間違いが起こってしまうことから、「query_posts」の利用は非推奨になったようですね。

Wp_Queryを利用して投稿一覧を表示

早速、「Wp_Query」を利用して投稿一覧を表示させてみましょう！
下記は、投稿を5個を表示させるコードです。

/* データの表示指定 */
<?php $my_query = new WP_Query(
  array('posts_per_page' => 5,'post_type' => 'post' )
);
?>
 
/* データの表示 */
<?php if ( $my_query->have_posts() ) : 
  while ( $my_query->have_posts() ) : $my_query->the_post();?>
    <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <p><?php the_excerpt(); ?></p>
<?php endwhile;endif; ?>
<?php wp_reset_postdata(); ?>

投稿タイトルと抜粋を新しい順に５記事表示させる設定です。
簡素化していますので、アイキャッチ画像などを利用する場合は、追記や変更が必要です。

ページめくりナビゲーションWp-Pagenaviを追加する。

前述の投稿一覧表示に、ページめくり機能を追加します。
もっとも利用されている「Wp-Pagenavi」プラグインをインストールして表示させてみます。

/* データの表示指定 */
<?php $my_query = new WP_Query(
  array('posts_per_page' => 5,'post_type' => 'post' )
);
?>
 
/* データの表示 */
<?php if ( $my_query->have_posts() ) : 
  while ( $my_query->have_posts() ) : $my_query->the_post();?>
    <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <p><?php the_excerpt(); ?></p>
<?php endwhile;endif; ?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<?php wp_reset_postdata(); ?>

当サイトでも利用していて、次の様にページめくり機能が追加されます。

※表示の体裁は別途CSSで指定しています。

でも、2ページ目をクリックすると「404エラー」になるののは何故？

ページめくり表示の部分を、次の様に変更すればいいって、グーグル先生が教えてくれたよ

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query' => $my_query)); } ?>

でも、まだエラーになるけど！？

次の方法で解決さ！

wp_queryでクエリをページ送りに対応させるには？

「WordPress Codex」の公式ページで、「ページングに対応させる方法」を見つけました！

ページネーションの参考：静的フロントページに指定したページテンプレートにおいて、クエリをページ送りに対応させるには get_query_var( ‘page’ ); を使ってください。
$paged = ( get_query_var(‘page’) ) ? get_query_var(‘page’) : 1;
$query = new WP_Query( array( ‘paged’ => $paged ) );

さあ、組み込んでみるよ！

/* データの表示指定 */
<?php $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
  $my_query = new WP_Query(
  array('paged' => $paged,'posts_per_page' => 5,'post_type' => 'post' )
  );
?>
 
/* データの表示 */
<?php if ( $my_query->have_posts() ) : 
  while ( $my_query->have_posts() ) : $my_query->the_post();?>
    <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <p><?php the_excerpt(); ?></p>
<?php endwhile;endif; ?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query' => $my_query)); } ?>
<?php wp_reset_postdata(); ?>

やったね！
問題無く動くようになったみたいよ！