【WordPress】ページネーションの作成

WordPress
※ 今回は個人的に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>';
}
?>