Follow Us:

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

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

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

 ワードプレスについて学んでプロに好きなだけ質問できるオンラインサロンはこちら

関連タグ:

Wordpress ワードプレス ドクターBlog タグ一覧

© 2015-16. «WP Doctorワードプレスドクター». All right reserved.