WordPressでBootstrapのPager/Paginationに対応させる

21 January, 2013 kioi

WordPressのインデックスやアーカイブでページ移動するときのリンクをBootstrapのpagerで表示させるための関数です。ついでにPaginationにも対応できるようにしました。どっちがついでなのかと小一時間(ry

Usage

<?php tkb_posts_nav_link( $items, $before, $after, $nextpagelink, $previouspagelink, $bothend ); ?>

Parameters

$items (integer): 現在のページを中心に数字を前後にいくつ表示するか指定します。
‘0’ を指定すると現在のページも含めて数字は表示しません。デフォルトは 0 です。
$before / $after (string): 全体を囲む文字列です。デフォルトは<ul>と</ul>です。
中身は<li>を使って表示するので、必ず<ul>を含ませてください。
$nextpagelink / $previouspagelink (string): 次ページ/前ページへのリンクの文字列を指定することができます。デフォルトはNewerとOlderです。
$bothend ( 0 / 1 / 2 ): 数字表示の際に、両端（1ページと最終ページ）を常に表示させることができます。
0 … 両端ページは表示されません。デフォルト値
1 … 両端のページを常に表示させます。
2 … 両端のページを常に表示させ、間にページがある場合「…」マスを表示させます。

Examples

パラメータ無しでも動きますがNewerとOlderがリスト表示される（縦に並ぶ）だけです。
BootstrapのPager用に記述をするには下記のように書きます。

<?php tkb_posts_nav_link('0', '<ul class="pager">', '</ul>'); ?>

<ul class="pager">
<li class="next disabled"><span>Newer</span></li>
<li class="previous"><a href="#">Older</a></li>
</ul>

BootstrapのPagination用であれば下記のように書きます。

<?php tkb_posts_nav_link(
'2', '<div class="pagination"><ul>', '</ul></div>', '&laquo;', '&raquo;', '2'); ?>

<div><ul>
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><span>…</span></li></li>
<li><a href="#">14</a></li>
<li><a href="#">&raquo;</a></li>
</ul></div>

Description

ソースをfunctions.phpに貼り付けてご利用ください。
今回は各リンクを<li>で固定している完全に手抜き関数です。もうBootstrap専用として（笑
$itemsを指定すると、その数字の * 2（前後）+ 1（現在のページ）だけ表示します。
TopやEndに近い場合、現在のページは端に寄っていき、上記の表示数は確保されます。
さらに$bothend=’2’を設定するとけっこう長くなりますのでご注意ください。
Bootstarp用の.previous/.nextと.activeと.disabledを<li>に付与します。。
Next/Prevを表示させないオプションは未実装です。

Source

function tkb_posts_nav_link(
    $items = '0',
    $before = '<ul>',
    $after = '</ul>',
    $nextpagelink = 'Newer',
    $previouspagelink = 'Older',
    $bothend = '0'
) {
    global $wp_query;
    global $paged; if(empty($paged)) $paged = 1;
    $pages = $wp_query->max_num_pages;
    $output = '';

    if ( $pages > 1 ) {
        if ( $paged > $items ) { $s_page = $paged - $items; } else { $s_page = '1'; }
        $e_page = $s_page + ( $items * 2 );
        if ( $e_page > $pages ) { $e_page = $pages; $s_page = $e_page - ( $items * 2 ); if ( $s_page < 1) { $s_page = '1'; } }

        if ($items) {
            for ($i = $s_page; $i <= $e_page; $i++) {
                if ( $i != $paged ) { $output .= '<li><a href="'.get_pagenum_link($i).'">'.$i.'</a></li>'; }
                else { $output .= '<li class="active"><span>'.$i.'</span></li>'; }
            }
            if ($bothend) {
                if ( $bothend == 2 ) {
                if ( $s_page > 2 ) { $output = '<li class="disabled"><span>…</span></li>'.$output; }
                if ( $e_page < ($pages-1) ) { $output .= '<li class="disabled"><span>…</span></li>'; }
                }
                if ( $s_page > 1 ) { $output = '<li class="disabled"><a href="'.get_pagenum_link(1).'">1</a></li>'.$output; }
                if ( $e_page < $pages ) { $output .= '<li class="disabled"><a href="'.get_pagenum_link($pages).'">'.$pages.'</a></li>'; }
            }
        }

        if ( $paged != 1 ) { $output = '<li class="next"><a href="'.get_pagenum_link($paged - 1).'">'.$nextpagelink.'</a></li>'.$output; }
        else { $output = '<li class="next disabled"><span>'.$nextpagelink.'</span></li>'.$output; }

        if ( $paged != $pages ) { $output .= '<li class="previous"><a href="'.get_pagenum_link($paged + 1).'">'.$previouspagelink.'</a></li>'; }
        else { $output .= '<li class="previous disabled"><span>'.$previouspagelink.'</span></li>'; }

    $output = $before.$output.$after."\n";
    echo $output;
    }
}

Notes

またコメント行を書かなかったorz
もっと汎用的にしたいけどソースが長くなるのが難点ですね。
変更が必要な時は直接コードを書き換えればいいかなって。
それにしても記事に貼り付けるとき、一部のクラスが消えてしまうのはどうにかならないものか…。

Related Links – I’m really grateful for everything.

Bootstrap | Twitter: Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Function Reference / posts nav link | WordPress Codex: Displays links for next and previous pages.
テンプレートタグ / posts nav link | WordPress Codex 日本語版: インデックスやアーカイブページが複数ページにわたる場合、その前後ページへのリンクを出力。

kioi @ blog on WordPress