/****************************************
ページネーション
*****************************************/
function get_responsive_pagination($_pagination_range_pc, $_pagination_range_sp)
{
global $wp_query;
$total_posts_num = $wp_query->found_posts;
//記事数が0の場合終了
if ($total_posts_num == 0) {
return;
}
//1ページに表示する範囲
$page_range = get_query_var('posts_per_page');
//合計ページ数
$total_page_num = ceil($total_posts_num / $page_range);
//現在のページを取得
$index_page_num = get_query_var('paged') ? get_query_var('paged') : 1;
//開始件数を取得
$from = $page_range * ($index_page_num - 1) + 1;
//終了件数を取得
$to = $page_range * $index_page_num;
//開始件数から終了件数
$from_to = '';
//合計該当記事数が終了件数より小さい場合、終了件数に設定
if ($total_posts_num <= $to) {
$to = $total_posts_num;
}
if ($total_posts_num == 1) {
$from_to = $from;
} else {
$from_to = $from . '?' . $to;
}
if ($from == $to) {
$from_to = $from;
}
/* PC */
$pagination_range = $_pagination_range_pc;
//ページャー範囲が合計ページ数より多い場合
if ($pagination_range >= $total_page_num) {
$pagination_range = $total_page_num;
}
$pagination_offset = floor($pagination_range / 2);
$pagination_from_limit = $total_page_num - $pagination_range + 1;
$offset_from = $index_page_num - $pagination_offset;
if ($offset_from <= 1) {
$offset_from = 1;
}
if ($offset_from >= $pagination_from_limit) {
$offset_from = $pagination_from_limit;
}
$offset_to = $offset_from + $pagination_range;
/* SP */
$pagination_range_sp = $_pagination_range_sp;
//ページャー範囲が合計ページ数より多い場合
if ($pagination_range_sp >= $total_page_num) {
$pagination_range_sp = $total_page_num;
}
$pagination_offset_sp = floor($pagination_range_sp / 2);
$pagination_from_limit_sp = $total_page_num - $pagination_range_sp + 1;
$offset_from_sp = $index_page_num - $pagination_offset_sp;
if ($offset_from_sp <= 1) {
$offset_from_sp = 1;
}
if ($offset_from_sp >= $pagination_from_limit_sp) {
$offset_from_sp = $pagination_from_limit_sp;
}
$offset_to_sp = $offset_from_sp + $pagination_range_sp;
$add_class = '';
$source = '';
if ($total_page_num > $_pagination_range_sp + 2) {
$add_class .= ' pagination-range-over-sp';
}
if ($total_page_num > $_pagination_range_pc + 2) {
$add_class .= ' pagination-range-over-pc';
}
$source .= '<nav class="cms-pagination' . $add_class . '">' . "\n";
$source .= '<ul class="clearfix">' . "\n";
//prev first
if ($index_page_num != 1) {
$source .=
'<li class="pagination-no-num first"><a href="' .
get_pagenum_link(1) .
'"><<</a></li>' .
"\n";
$source .=
'<li class="pagination-no-num prev"><a href="' .
get_pagenum_link($index_page_num - 1) .
'"><</a></li>' .
"\n";
} else {
$source .=
'<li class="pagination-no-num first"><span><<</span></li>' .
"\n";
$source .=
'<li class="pagination-no-num prev"><span><</span></li>' .
"\n";
}
for ($i = $offset_from; $i < $offset_to; $i++) {
if ($index_page_num == $i) {
if ($i >= $offset_from_sp && $i < $offset_to_sp) {
$source .=
'<li class="pagination-index pagination-sp"><span>' .
$i .
'</span></li>' .
"\n";
} else {
$source .=
'<li class="pagination-index"><span>' .
$i .
'</span></li>' .
"\n";
}
} else {
if ($i >= $offset_from_sp && $i < $offset_to_sp) {
$source .=
'<li class="pagination-sp"><a href="' .
get_pagenum_link($i) .
'">' .
$i .
'</a></li>' .
"\n";
} else {
$source .=
'<li><a href="' .
get_pagenum_link($i) .
'">' .
$i .
'</a></li>' .
"\n";
}
}
}
//next last
if ($index_page_num != $total_page_num) {
$source .=
'<li class="pagination-no-num next"><a href="' .
get_pagenum_link($index_page_num + 1) .
'">></a></li>' .
"\n";
$source .=
'<li class="pagination-no-num last"><a href="' .
get_pagenum_link($total_page_num) .
'">>></a></li>' .
"\n";
} else {
$source .=
'<li class="pagination-no-num next"><span>></span></li>' .
"\n";
$source .=
'<li class="pagination-no-num last"><span>>></span></li>' .
"\n";
}
$source .= '</ul>' . "\n";
$source .= '</nav>' . "\n";
$source .=
'<div class="pagination-txt">' .
$from_to .
' / ' .
$total_posts_num .
'件</div>' .
"\n";
echo $source;
}
/*------------------------------------*\ page \*------------------------------------*/
.pnations_bottom {
padding: 0;
margin: 0;
}
/* cms-pagination */
.cms-pagination {
width: 100%;
overflow: inherit;
margin-top: 40px;
font-size: 3.2vw;
}
.cms-pagination ul {
position: relative;
left: 50%;
display: flex;
justify-content: center;
}
.cms-pagination ul li {
position: relative;
float: left;
left: -50%;
width: 7vw;
height: 10vw;
display: table;
margin: 0 2px;
display: none;
font-weight: bold;
font-size: 1.6rem;
a {
color: $color-primary;
}
}
.cms-pagination ul li .pstv {
display: none;
}
.cms-pagination ul li.pagination-no-num {
width: 9vw;
height: 9vw;
display: table;
}
.cms-pagination ul li.pagination-no-num span {
color: #ccc;
}
.cms-pagination ul li.pagination-sp {
display: table;
}
.cms-pagination ul li.pagination-index {
display: table;
position: relative;
margin: 0 20px;
&::before {
content: "";
width: 55px;
height: 55px;
border-radius: 54% 43% 56% 44% / 50% 50% 50% 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.cms-pagination ul li a,
.cms-pagination ul li span {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
position: relative;
}
.cms-pagination ul li span {
color: $color-primary;
}
.pagination-txt {
display: none;
}
.pagination-txt span {
color: #999;
}
@media print, screen and (min-width: 795px) {
.cms-pagination {
width: 100%;
overflow: inherit;
margin-top: 40px;
font-size: 1.2em;
}
.cms-pagination ul li {
font-size: 2.8rem;
width: 40px;
height: 40px;
margin: 0 8px;
display: table; // border: 1px solid $color-primary; } .cms-pagination ul li a { -webkit-transition: 0.1s ease;
-moz-transition: 0.1s ease;
transition: 0.1s ease;
// background-color: #fff;
}
.cms-pagination ul li a:hover {
color: $color-primary;
-webkit-transition: 0.1s ease;
-moz-transition: 0.1s ease;
transition: 0.1s ease;
}
.cms-pagination ul li.pagination-no-num {
width: 40px;
height: 40px;
}
.pagination-txt {
display: none;
}
}
<div class="page"> <?php
if ($wp_query->max_num_pages > 1):// ここからページャー
?> <div style="clear: both"></div> <?php get_responsive_pagination(7, 3); ?> <?php endif;?>
<?php wp_reset_query(); ?>
</div>