WordPressでTwitter Bootstrap3のpaginationを実現する方法

Pocket

こちらを参考にした
http://freebloggingtricks.com/twitter-bootstrap-pagination-tutorial/
が、v2だったのでv3に対応させ、微調整。
functions.phpに

function bootstrap_pagination()
{
    global $wp_query;
    $paged = $wp_query->get( 'paged' );
    $posts_per_page = get_option('posts_per_page');
    if ( ( ! $paged || $paged < 2 ) && $wp_query->found_posts < $posts_per_page )
        return;
    $range = 5;
    $showitems = ($range * 2)+1;
    global $paged;
    if(empty($paged)) $paged = 1;
    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }
    if(1 != $pages)
    {
        echo '<ul class="pagination">';
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo;</a></li>";
        if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a></li>";
        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<li class='active'><span class='current'>".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></li>";
            }
        }
        if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a></li>";
        if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>&raquo;</a></li>";
        echo "</ul>\n";
    }
}

と定義する。$range は、前後何ページ分を表示するか。5だったら、
bootstrap-pagination
みたいになる。

使い方

paginationを入れたいところに

<?php bootstrap_pagination(); ?>

と入れる。たいていはloopの後なので、

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <?php // do stuff ?>
        <?php endwhile; ?>
        <?php bootstrap_pagination(); ?>
        <?php else : ?>
            <?php // do stuff ?>
        <?php endif; ?>

Comments on this post

No comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL