WordPress:ページネーションを実装する
WordPresspagenationって？
index.phpを簡単に描いただけでは1ページに表示する最大投稿数以降を表示する手段がありません
下記このような機能を実装しましょう
実装
function.phpとstyle.cssに下記のように追記します
function pagenation($pages = '', $range = 2){
$showitems = ($range * 1)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == ''){
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
}
if(1 != $pages){
echo '<div class="pagenation">';
echo '<ul>' . "\n";
/* [...] 表示 */
if( $paged > 3 ){
echo '<li class="page-numbers"><a href="' . get_pagenum_link(1) . '">TOP</a></li>';
echo '<li class="page-numbers">...</li>';
}
/* 「前へ」を表示 */
if($paged > 1){
echo '<li class="page-numbers"><a href="' . get_pagenum_link($paged - 1) . '">前</a></li>';
}
for ( $i = 1 ; $i <= $pages ; $i++ ){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? '<li class="page-numbers">' . $i . '</li>':
'<li class="page-numbers"><a href="' . get_pagenum_link($i) . '">' . $i . '</a></li>';
}
}
/* 「次へ」を表示 */
if($paged < $pages){
echo '<li class="page-numbers"><a href="' . get_pagenum_link($paged + 1) . '">次</a></li>';
}
/* [...] 表示 */
if($pages > ($paged + 2 ) ){
echo '<li class="page-numbers">...</li>';
echo '<li class="page-numbers"><a href="' . get_pagenum_link($pages) . '">' . $pages . '</a></li>';
}
echo '</ul>' . "\n";
echo '</div>' . "\n";
}
}
.pagenation ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
width: 100%;
}
.page-numbers {
margin: 5px;
padding: 5px 10px;
border: 1px solid;
background: var(--main-color);
text-align: center;
text-decoration: none;
transition: all 0.5s ease;
}
.page-numbers a:link{
color: white;
}
.page-numbers a:visited{
color: white;
}
呼び出し元
こちらをどうぞ
wordpress：テーマを初めて自作した時に知っておきたかったこと — 異風堂々