ページネーション機能を作成する前に一つのページに表示する件数を決めよう

初めはWP_Queryでposts_per_pageを指定して一つのページに表示する件数を決めようとしたのですが、paginate_links関数で作成したページネーション機能が上手く動作しなかったのでアクションフックのpre_get_postsにて一つのページに表示する件数を決めました。編集するファイルはfunctions.phpです。

function le_pagination_posts_per_page($query)
{
    if (is_admin() || !$query->is_main_query()) {
        return;
    }

    $query->set('posts_per_page', 5);
    return;

}
add_action('pre_get_posts', 'le_pagination_posts_per_page', 1);

管理画面とメインクエリを除いて、その他のクエリの時に一つのページに5個ずつ表示するように指定しています。

ページネーション機能を作成

paginate_links関数でページネーションを作成します。編集するファイルはfunctions.phpです。ショートコードとして作成をしています。

add_shortcode('le_pagination', 'le_pagination_short_code');
function le_pagination_short_code()
{
    global $wp_query;
    $big = 999999999;
    $pages = paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages,
        'end_size' => 1,
        'mid_size' => 3,
        'prev_text' => '＜ 前へ',
        'next_text' => '次へ ＞',
        'type' => 'array'
    ));

    if (is_array($pages)) {
        echo '<div class="pull-right"><ul class="pagination">';
        foreach ($pages as $page) {
            echo "<li>$page</li>";
        }
        echo '</ul></div>';
    }
}

paginate_links関数で配列で作成をして、その後HTMLを作成しています。Bootstrap3を使用しているので、<ul>のクラス名をpaginationにして見栄えを整えています。現在のページに付与されるクラス名がBootstrap3のactiveではなくデフォルトではcurrentで出力させるので、その辺りを調整して完了です。後は呼び出したい箇所に下記を追加するだけです。

<?php do_shortcode('[le_pagination]') ?>