wp 記事一覧にページャーと現在ページ位置を表示

固定ページを作成し、そのページに記事一覧や商品一覧など、投稿したページを一覧表示したインデックスページの紹介をします。
記事一覧を表示するだけではなく、ページャーと現在のページ位置を表示することで、ユーザーにとっても利用しやすいページになります。

今回はそんな記事一覧ページの製作の方法を紹介します。

まずpage-○○.phpというファイルを作り、記事一覧を作成し下記を記述

<!–アーカイブ–>

<div id=”list_box”>
<?php
$paged = (int) get_query_var(‘paged’);
$args = array(
‘posts_per_page’ => 24,
‘paged’ => $paged,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class=”post_list”>
<p><?php the_post_thumbnail(‘thumbnail’); ?></p>
<p class=”post_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></p>
<div class=”post_text”><?php the_excerpt(); ?></div>
</div>
<?php endwhile; endif; ?>
<div id=”pager”>
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘page/%#%/’,
‘current’ => max(1, $paged),
‘total’ => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata(); ?>
</div>
<!–アーカイブ–>
</div>

現在のページ位置を<!–アーカイブ–>の下に記述します

<p class=”page-area”>
<?php show_page_number(”); ?>
<?php
printf( esc_html__( ‘ページ/全’), get_search_query() );
echo ”, $the_query->max_num_pages, ‘ ページ中’;
?>
</p>

class=”page-area”はpositionで位置調整します。