WordPress:ページネーションを実装する

wordpress

pagenationって?

index.phpを簡単に描いただけでは1ページに表示する最大投稿数以降を表示する手段がありません
下記このような機能を実装しましょう
theme_example4.png

実装

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:テーマを初めて自作した時に知っておきたかったこと — 異風堂々

参考にさせていただいたサイト様

WordPressでページネーションをつくる方法と仕組みの解説 | 福岡のホームページ制作会社 シンス株式会社