WordPressの汎用ページャー
WordPressのindex.phpやcategory.phpなどで使える汎用ページャー。
最終ページ表示、スマホ時に矢印ナビ表示。
PHP
<!-- ページネーション -->
<?php
global $wp_query;
$current_page = max( 1, get_query_var('paged') );
$total_pages = $wp_query->max_num_pages;
?>
<?php if ( $total_pages > 1 ) : ?>
<div class="archive_page_navi">
<?php
echo paginate_links( array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%/',
'current' => $current_page,
'mid_size' => 2,
'prev_next' => false,
'total' => $total_pages,
));
?>
</div>
<?php endif; ?>
<!-- スマホ矢印ページャー -->
<div class="archive_page_navi_arrows sp-only">
<?php if ( $current_page > 1 ) : ?>
<a class="prev-btn" href="<?php echo esc_url( get_pagenum_link( $current_page - 1 ) ); ?>">←</a>
<?php endif; ?>
<?php if ( $current_page < $total_pages ) : ?>
<a class="next-btn" href="<?php echo esc_url( get_pagenum_link( $current_page + 1 ) ); ?>">→</a>
<?php endif; ?>
</div>CSS
.archive_page_navi {
margin-top: 8rem;
display: flex;
justify-content: center;
align-items: center;
}
.archive_page_navi .page-numbers{
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 2rem;
color: #666;
font-size: 1.4rem;
}
.archive_page_navi .page-numbers + .page-numbers{
margin-left: 1rem;
}
.archive_page_navi .page-numbers.current{
background-color: #e5e5e5;
border: 0;
color: #fff;
}
.archive_page_navi .page-numbers.dots{
background-color: inherit;
border: 0;
}
.archive_page_navi a.page-numbers:hover{
background-color: #333;
color: #fff;
}
@media screen and (max-width:768px){
.archive_page_navi .page-numbers{
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
font-size: 1.2rem;
}
}
/* arrow navigation */
.archive_page_navi_arrows{
display: none;
}
@media screen and (max-width:768px) {
.archive_page_navi_arrows{
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.archive_page_navi_arrows a.prev-btn,
.archive_page_navi_arrows a.next-btn{
display: inline-block;
padding: 1.2rem 3rem;
font-size: 1.4rem;
background: #fff;
border: 1px solid #ccc;
border-radius: .4rem;
color: #444;
text-decoration: none;
}
}