デフォルトのページネーションは、次のページと前のページへのボタンがあるだけなので、最後のページに行きたいとか、ページ数が増えてくると、使いにくい。

そこで、ページネーションが必要になるのだが、プラグインで検索したりすると、他の機能とセットになっていたりして、ちょっと扱いに困ったりする。

それなら自作となるのだが、function.php に直接書いたりするので、それはそれで少し困る。プラグインの気軽さがほしい。

で、ちょこちょこと作ってみた。
参考ページの記述内容ほぼそのまま。
で、スタイルシートもセットにした。これがプラグインのいいところ。

使い方は、メインループの外側に以下のタグを記入するだけ。

たとえば、archive.phpなら、こんな感じ。

archive.php

<?php get_header(); ?>

<section class="container">
        <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8">
            <header class="page-header">
                <h1 class="page-title"><?php single_cat_title(); ?></h1>
            </header>
            <div class="posts">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : ?>
                        <?php
                        the_post();
                        get_template_part('content', 'archive');
                        ?>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div><!-- posts -->
            <?php billies_pagenation(); ?>           <=== ここに記述
        </div><!-- col-xs-12 col-sm-12 col-md-8 -->
        <?php get_sidebar(); ?>
        </div><!-- .row -->
</section>

<?php  get_footer(); ?>

非常にシンプル。

billies-pagenation.php

<?php
/*
 * @wordpress-plugin
 * Plugin Name: Billies Pagenation Plugin
 * Description: This is Pagenation for archive page etc. Insert this -> <?php billies_pagenation(); ?>
 * Version: 1.0
 * Author: Seiichi Nukayama
 * URL: http://www.billies-works.com/
 */

function billies_pagenation_add_files() {
    wp_enqueue_style('css-billies-pagenation', plugins_url('billies-pagenation.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'billies_pagenation_add_files');

function billies_pagenation() {
    global $wp_query;
    $big = 999999999;

    if ($wp_query->max_num_pages <= 1) return;

    echo '<nav class="billies-pagenation">';

    echo 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,  // 最大ページ番号
        'prev_text' => '<',  // '←',
        'next_text' => '>',  // '→',
        'type' => 'list',
        'end_size' => 2,
        'mid_size' => 1
    ));
    echo '</nav>';
}

billies-pagenation.css

.billies-pagenation .page-numbers {
    list-style-type: none;
    padding-left: 0;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
}

.billies-pagenation li {
	border: solid 1px #ddd;
	padding: 0 10px;
}
.billies-pagenation a {
	display: block;
}

.billies-pagenation .current {
	display: block;
	font-weight: bold;
	font-size: 1.2em;
}

参考

関数リファレンス/paginate links

コピペでOK！WordPressでページネーションを実装する【WordPressカスタマイズ】

Tweet