ワードプレスで数字付きページネーションを出力する方法

ワードプレスには組み込みでページネーションを出力する関数があります。この関数を使いページネーションを出力する方法を解説いたします。

query_posts　のループで投稿を任意の数取得する

ページネーションはquery_postsが終わった後だけ正しく取得できます。まず、お使いのテーマにquery_postsによるループがあるかご確認いただくか、下記のようにループをプログラムして作成します。

<ul>
<?php
//表示する投稿数
$postperpage = 20;
//現在のページ(自動取得)
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array( 
'posts_per_page' => $postperpage,
'paged' => $paged,
"post_status"     => "publish",
'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 )
);

query_posts($args);
if ( have_posts() ) : while (have_posts()) : the_post(); ?>
        <li>
            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
        </li>
<?php endwhile;
endif;
?>
</ul>

the_posts_paginationでページ数を含む表示のページネーションを出力する

次に下記のコードでページネーションを出力します。

<?php
the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => '前のページ',
    'next_text' => '次のページ',
) );
?>

‘mid_size’　は多くのページがある場合に、中央部に中間のページをいくつ表示するか設定します。そのほかのページは省略されます。

ページネーションのデザインをスタイル設定する

ページネーションはpage-numbers(ページ数)とpage-numbers.current(現在ページ)のクラスが付与されます。下記のようなスタイルをStyle.cssに追加することでページネーションをスタイルすることが可能です。

.page-numbers {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 2px 0 0;
	border: 1px solid #888;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	font-weight: 600;
}
.page-numbers.current,a.page-numbers:hover {
	background: #f9f9f9;
}

WordPress
ワードプレスのテーマのカスタマイズ、修正、コーディングはWPドクターまでお気軽にご相談・ご依頼お送りください