[WordPress] ページネーション（ページ送り）をプラグインなしで設置したい

公開日:2018/08/24 更新日:2020/06/16

アーカイブやインデックスページを作っていると、ページ送り用のページネーションが必要になります
ボタンのデザインも自前で整えたい場合、プラグインで作成したページネーションではデフォルトのスタイルが邪魔になってしまいます
そこで、プラグインを使用することなく、最低限必要な機能をもったページネーションの実装方法をまとめてみました

サンプルコード

PHP

<nav class="pagination">
    <?php
        global $wp_query;
        echo paginate_links(array(
            'format' => '/page/%#%' ,
            'current' => max(1, get_query_var('paged')),
            'total' => $wp_query->max_num_pages,
            'prev_text' => '',
            'next_text' => '',
            'type' => 'list'
        ));
    ?>
</nav>

ページネーションの出力は、WordPress側で用意されている「paginate_links」関数を使用しています
色々な引数が用意されていますがすべて設定する必要はなく、最低限サンプルで設定している以下の6個の引数があればOKです

format

ページ番号をどのようなURL形式にするかを設定します
指定しない場合、デフォルトの「?page=%#%」が設定され、URLは「https://migi.me/category/css/?page=2」という形式になります
サンプルでは「/page/%#%」という設定をしており、こうするとURLは「https://migi.me/category/css/page/2/」
どちらでも大差はないと思いますが、私は「?=xxx」パラメーターを他の目的で使用したとき、結合によってパラメーター部分が複雑になってしまうのが嫌だったため、サンプルのような形にしています

current

現在のページ番号を設定します
基本的にはどのようなページでも「max(1, get_query_var('paged'))」でよいです
クエリから取得したページ番号と「1」で大きい方が設定されます

total

総ページ数を設定します
こちらも「$wp_query->max_num_pages」でクエリ情報を取得する形でよいです

prev_text

「前のページに戻る」のリンクに表記する文字列を指定します
今回はリンクを「<」で表記しますので、文字列を空にするため「""」としています

next_text

「次のページに進む」のリンクに表記する文字列を指定します
戻るリンクと同様に「""」としています

type

ページネーションの出力方式を指定します
リスト形式で出力した方がCSSを当てはめやすいため、サンプルでは「list」としています

サンプルコードはテンプレート化しておいて「get_template_part」関数で呼び出せるようにすると、あちこちで使い回せて便利です

CSS

.pagination {
    margin: 60px 0px 0px;
}

.pagination > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    list-style: none;
}

.pagination > ul > li {
    margin: 0px 0.5em;
    width: 2em;
    height: 2em;
}

.pagination > ul > li > a,
.pagination > ul > li > span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #3388dd;
    box-sizing: border-box;
}

.pagination > ul > li > a {
    border: 1px solid currentColor;
    text-decoration: none;
}

.pagination > ul > li > .current {
    border: 1px solid #3388dd;
    background-color: #3388dd;
    color: #fff;
}

.pagination > ul > li > .prev,
.pagination > ul > li > .next {
    position: relative;
    border: none;
}
.pagination > ul > li > .prev::before,
.pagination > ul > li > .next::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.75em;
    height: 0.75em;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
.pagination > ul > li > .prev::before {
    transform: translateX(-50%) translateY(-50%) rotate(225deg);
}
.pagination > ul > li > .next::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。