今回は WordPress のページネーションについてのエントリーです。プラグインを使わない方法については Google で簡単に検索できますが、いざ自分用に改造しようとするとどうするのか分からない！、といった方向けです。

参考元のサイト

sparklette
http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/

英語サイトですが、このエントリーは日本語のサイトでも多く取り上げられてます。

０：必要なもの

WordPress を導入したサーバー、もしくはローカルの環境は当たり前ですが必要です。

１：functions.phpファイルを新規作成する

次に、 WordPress をインストールしたディレクトリ内で、テーマが入っているパスに移動します。現在適応しているテーマです。私の場合は以下のパスになります。

/home/□□□/www/□□□/wp-content/themes/testcording

□□□の箇所は、プロジェクトやテーマ名によって変わります。このディレクトリには「 index.php 」が入っているはずです。この「 index.php 」のあるディレクトリに「 functions.php 」を作成します。このファイル内にページネーションの処理を書いていきます。既に「 functinos.php 」がある方は処理を追加していきます。

２：functions.phpを作る

元のエントリーのソースを見てみます。

非常にシンプルにまとまっていますが、改造しようとするとコメントが無いためざっと見ても何をしているのか分かりません。コメントを付け足し、冗長な if の条件の改善、変数名の変更したのが以下になります。

<?php

/*
 * pagination
 *
 * @param $_all_page_num 前ページ数
 * @param $_show_item_range 表示するページネーション数
 *
 * <<first <prev 5 6 ⑦ 8 9 Next> Last>>
 * このようなページネーションだった場合、5 6 もしくは 8 9 の部分が
 * $_show_item_range数となる
 *
 */
function pagination($_all_page_num = '', $_show_item_range = 4) {
    // $_show_item_range数から何ページ分ページネーションを作成するか計算する
    $showitems = ($_show_item_range * 2) + 1;

    // 現在のページ数(変数名変更不可)
    global $paged;

    // 現在のページ数がなければ1ページ目とする
    if (empty($paged)) {
        $paged = 1;
    }

    // ページ数の指定が無かった場合
    if ($_all_page_num == '') {
        global $wp_query;

        // 記事数を取得する
        $_all_page_num = $wp_query->max_num_pages;

        // 記事数が取得できなかった場合
        if (!$_all_page_num) {
            // 総ページ数は1とする
            $_all_page_num = 1;
        }
    }

    // ページ数が2ページ以上の場合にページネーションを作成する
    if ($_all_page_num > 1) {
        // Page X of Y の表示
        echo "<div class=\"pagination\"><span>Page ".$paged." of ".$_all_page_num."</span>";

        // 先頭記事に戻るボタン
        if ($paged     > 2
        &&  $paged     > $_show_item_range + 1
        &&  $showitems < $_all_page_num) {
            echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
        }

        // 一つ前に戻るボタン
        if ($paged     > 1
        &&  $showitems < $_all_page_num) {
            echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
        }

        // 現在のページと、左右$_show_item_range分のボタン
        for ($i = 1; $i <= $_all_page_num; $i++)
        {
            if (!($i >= $paged + $_show_item_range + 1 || $i <= $paged - $_show_item_range - 1)
            ||  $_all_page_num <= $showitems) {
                // 現在のページ(クリックできない)
                if ($paged == $i) {
                    echo "<span class=\"current\">".$i."</span>";
                }
                // 左右$_show_item_range分のボタン
                else {
                    echo "<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
                }
            }
        }

        // 一つ進むボタン
        if ($paged     < $_all_page_num
        &&  $showitems < $_all_page_num) {
            echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
        }

        // 最後尾に進むボタン
        if ($paged                     < $_all_page_num-1
        &&  $paged+$_show_item_range-1 < $_all_page_num
        &&  $showitems                 < $_all_page_num) {
            echo "<a href='".get_pagenum_link($_all_page_num)."'>Last &raquo;</a>";
        }

        echo "</div>\n";
    }
}

?>

これで取り敢えず何をしているのかは分かるようになったかと思います。これを「 functions.php 」に記述してください。

３：index.phpからページネーションを呼び出す

次は、「 functions.php 」で作成したページネーションを行う関数を呼び出します。呼び出す箇所はどこでも構いません。私の場合は記事を表示しているメインコンテンツ部分の上部で呼び出すようにしています。

<!-- ページネーション -->
<?php
if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
}
?>

これでページネーションは呼び出され、ページネーションが表示されます。まだデザインはしていませんが、動作しますので確認してみてください。

４：Page X of Y の表示を消す

以下のソースを見てください。

    // ページ数が2ページ以上の場合にページネーションを作成する
    if ($_all_page_num > 1) {
        // Page X of Y の表示
        echo "<div class=\"pagination\"><span>Page ".$paged." of ".$_all_page_num."</span>";

        // 先頭記事に戻るボタン
        if ($paged     > 2
        &&  $paged     > $_show_item_range + 1
        &&  $showitems < $_all_page_num) {
            echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
        }

43 秒目の部分を以下に変更します。

    // ページ数が2ページ以上の場合にページネーションを作成する
    if ($_all_page_num > 1) {
        // Page X of Y の表示
        echo "<div class=\"pagination\">";

        // 先頭記事に戻るボタン
        if ($paged     > 2
        &&  $paged     > $_show_item_range + 1
        &&  $showitems < $_all_page_num) {
            echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
        }

このように、条件分岐や処理内容が分かれば、出力しているのは HTML + CSS なわけなので微調整や修正は簡単にできます。

５：ページが無くても戻る、進むボタンを表示する

実際に動かしてみるとわかりますが、一つ前のページに戻るボタンは一つ前のページが存在していなければ表示されません。表示自体を無くすのではなくて、灰色で表示させてクリックできないようにしたい！といったこともあると思います。そんな時は以下のように改造してみてください。

        // 一つ前に戻るボタン
        if ($paged     > 1
        &&  $showitems < $_all_page_num) {
            echo "<a class='click_pre_page' href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
        }
        // 押せない場合も表示する
        else {
            echo "<div class='non_click_pre_page'></div>";
        }

現在の処理では、「前のページが存在していたら」表示するという条件になっています。そんな時は「 else 」の出番ですね。「前のページが存在していた場合以外」の処理を書き足すことができます。押させるボタンでないため、 div タグで class を指定してデザインしたら表示することができます。他のボタンも同じ手法で改造することができます。
　
　
こんな感じで改造できれば、後はデザインだけです。プラグインを入れても改造しづらかったりするので、ページネーションは自分で作った方が後々ためになるかと思います。是非参考にしてみてください。