※ 今回は個人的にWordPressでページネーションを作成するとき用のメモです。
【WordPress】ページネーションの作成
HTML
<nav class="pagination">
<ul class="page-numbers">
<li>
<a href="" class="page-numbers prev">
<span class="prev__span">PREV</span>
</a>
</li>
<li>
<a href="" class="page-numbers">1</a>
</li>
<li>
<span class="page-numbers current">2</span>
</li>
<li>
<a href="" class="page-numbers">3</a>
</li>
<li>
<a href="" class="page-numbers">4</a>
</li>
<li>
<a href="" class="page-numbers">5</a>
</li>
<li>
<a href="" class="page-numbers">6</a>
</li>
<li>
<a href="" class="page-numbers next">
<span class="next__span">NEXT</span>
</a>
</li>
</ul>
</nav>
そして、上記のコードはphpファイルでは以下のコードに置き換える。
<?php if( function_exists("the_pagination") ) the_pagination(); ?>
CSS
// ページネーション
.pagination {
ul.page-numbers {
display: flex;
justify-content: center;
.page-numbers {
display: inline-block;
background-color: red;
height: 60px;
width: 60px;
margin: 0 auto;
text-align: center;
line-height: 60px;
font-size: 20px;
}
li {
margin-left: 5px;
margin-right: 5px;
.prev {
background-color: inherit;
.prev__span {
font-size: 20px;
}
}
.next {
background-color: inherit;
}
.current {
background-color: gray;
}
}
}
}
functions.php
<?php function the_pagination() {
global $wp_query;
$bignum = 999999999;
if ( $wp_query->max_num_pages <= 1 )
return;
echo '<nav class="pagination">';
echo paginate_links( array(
'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
'format' => '',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'list',
'end_size' => 3,
'mid_size' => 3
) );
echo '</nav>';
}
?>
