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

Release: 2019/09/29 Update: 2019/09/30

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(); ?>

 

一郎

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

 
 

ページめくりナビゲーション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(); ?>

 

美咲

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

 
 

HOME


関連コンテンツ



コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA