こんにちは。
ゆうや（@yuyaphotograph）です！
WordPressの記事一覧ページのページネーションを表示するのがなかなかうまくいかなくて困っていませんか？
本記事で紹介するコードで実装すると期待通りに表示することができます。
なぜなら、ぼくも同じくうまく動作しなくて困っていたけど、そのコードで試したらページネーションをちゃんと表示することができたからです。
この記事では前半でページネーションの実装方法ならびにhtml構造などのカスタマイズ方法を紹介して最後にCSSで見た目を整えていきます。
本記事を読み終えると、今後WordPressの記事一覧ページでのページネーション実装やカスタマイズに悩むことが一切なくなるでしょう。
functions.phpにページネーション用の関数を用意
まずは、記事に出力するページネーションの設定やhtml構造などのカスタマイズを行います。
以下コードです。
function pagination( $pages, $paged, $range = 2 ) {
$pages = ( int ) $pages;
$paged = $paged ?: 1;
$text_before = "‹";
$text_next = "›";
if ( 1 !== $pages ) {
//２ページ以上の時
echo '<div class="Pagination">';
if ( $paged > 1 ) {
// 「‹」１ページ前へ戻るリンクを表示
echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="Pagination-Item">', $text_before ,'</a>';
}
for ( $i = 1; $i <= $pages; $i++ ) {
if ( $i <= $paged + $range && $i >= $paged - $range ) {
if ( $paged === $i ) {
echo '<span class="Pagination-Item isActive">', $i ,'</span>'; // 現在のページの数字
} else {
echo '<a href="', get_pagenum_link( $i ) ,'" class="Pagination-Item">', $i ,'</a>';
}
}
}
if ( $paged < $pages ) {
// 「›」１ページ後へ進むリンクを表示
echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="Pagination-Item">' ,$text_next ,'</a>';
}
echo '</div>';
}
}記事一覧のテンプレートファイルで表示する
記事一覧ページのテンプレートファイル、ここではpage-blog.phpに以下のように記述していきます。
注意点はサブループのwp_reset_postdataの手前でfunctions.phpで作成したページネーションを呼び出すことです。
<?php
$paged = get_query_var('paged') ?: 1;
$args = array(
'post_type' => "post",//投稿タイプ設定
'posts_per_page' => 5,// 取得記事数
'paged' => $paged,
);
$my_query = new WP_Query($args);
if ($my_query->have_posts()): while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
コンテンツ
<?php endwhile; ?>
<?php endif; ?>
<?php
if ( function_exists( 'pagination' ) ) :
pagination( $my_query->max_num_pages, $paged );
endif;
?>
<?php wp_reset_postdata(); ?>シンプルなデザインのページネーションにするCSS
最後にCSSでページネーションのスタイルを整えます。
ページネーションの見た目は正方形で2pxのボーダーを周りにつけ横並びに表示する一般的なものとなります。
.Pagination {
display: flex;
justify-content: center;
margin-top: 80px;
}
.Pagination-Item {
border: 3px solid #000;
margin-left: 16px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
color: #000;
font-size: 22px;
}
.Pagination-Item.isActive {
border: none;
background: #5bc8ac;
color: #fff;
}なお、ページネーションブロックを右端表示にしたい場合は、以下のように、親要素のjustify-contentをcenterではなく、flex-endに指定しましょう。
.Pagination {
display: flex;
justify-content: flex-end;
margin-top: 80px;
}参考記事
案件でのページネーション実装で困っていたところを助けられました…！！！
本当に素敵な記事ありがとうございます！
参考 WordPressでページャー（ページネーション）をプラグインなしで実装WEMO.techまとめ
以上、WordPressで記事一覧ページのページネーションをカスタマイズする方法をご紹介しました。
WordPressでのWebサイト制作において確実に実装する機会ありますのでぜひその時にお使い下さい。
最後までご高覧いただきありがとうございました！
次はこの記事！
