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(); ?>
やったね！
問題無く動くようになったみたいよ！
