プラグインなしでページネーション

wordpress
  1. 概要・まとめ
  2. PHPでページネーションの実装
    1. オプション説明
    2. その他のオプション:
    3. コードの挿入箇所
  3. CSS例
  4. 注意事項

概要・まとめ

WordPressサイトにおいて、PHPのthe_posts_pagination()関数で、ページネーション機能を実装できる．
the_posts_pagination()関数のオプション活用やCSSでスタイルをあてることで、色々なページネーションが作れる．コードの変更は、サイトの動作自体に影響を与える可能性があるため、必ずバックアップを取ってから行いたい．
ただし，コードの変更はサイトの動作自体に影響を与える可能性があるため、必ずバックアップを取ってから行いたい．

PHPでページネーションの実装

WordPressにおいて，PHPを書き換えてページネーションを表示するには，the_posts_pagination()関数を用いる．

the_posts_pagination(
    array(
        'prev_text' => '',
        'next_text' => '',
        'end_size' => 1,
        'mid_size' => 2,
    )
);

スタイルを何も適用していないときの出力．

オプション説明

  • prev_text: 前のページへのリンクのテキストを指定
  • next_text: 次のページへのリンクのテキストを指定
  • end_size: 最初と最後のページ番号の表示数を指定
  • mid_size: 現在のページの前後にあるページ番号の表示数を指定

その他のオプション:

  • total: 全体のページ数を手動で指定
  • current: 現在のページ番号を手動で指定
  • type: ページネーションのタイプを指定（array、listなど）
  • before_page_numbers: ページ番号の前に表示するテキスト
  • after_page_numbers: ページ番号の後に表示するテキスト
  • screen_reader_text: スクリーンリーダー用のテキスト
  • add_args: URLに付加するクエリ文字列
  • add_fragment: URLのフラグメント

コードの挿入箇所

the_posts_pagination()関数は、通常はindex.phpなどのテンプレートファイル内のメインループ後に挿入する．

<?php
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        // 記事の内容
    endwhile;

    the_posts_pagination(
    array(
        'prev_text' => '',
        'next_text' => '',
        'end_size' => 1,
        'mid_size' => 2,
    )
);
endif;

CSS例

例として，本サイトで使用しているスタイル（下記コードはscss）を示す．

.pagination {
    text-align: center;
    padding: 2em;

    .prev.page-numbers,
    .next.page-numbers {
        display: none;
    }
    .page-numbers.dots {
        background-color: transparent;
        color: $color__secondary;
    }

    .page-numbers {
        display: inline-block;
        background-color: $color__accent2;
        transition: transform 0.2s;

        width: 2em;
        height: 2em;
        border-radius: 50%;
        margin: 0 0.25em;

        vertical-align: middle;
        line-height: 2em;

        font-size: large;
        text-decoration: none;
        color: $color__primary;
    }

    .page-numbers:hover{
        transform: translateY(-10%);
    }
    .page-numbers.dots:hover{
        transform: none;
    }
}

注意事項

上記のコードは一例であり、実際のサイトに適用する際には、テーマの構造やカスタマイズの目的に合わせて適宜修正する必要がある．
コードの変更は、サイトの動作自体に影響を与える可能性があるため、必ずバックアップを取ってから行ってください．