TwentyTwelveにプラグイン無しでページネーションを追加する

WordPress のテーマ TwentyTwelve にページネーションを追加する方法を書きます。

今回も WordPress プラグインは使わずにカスタマイズしますが、TwentyTwelve は標準のページナビゲーションを無効にしたほうが作業しやすくなるので合わせて作業します。

ページネーションの完成イメージは下記を予定しています。

ページネーション完成イメージ

ページネーション追加は以下の順で説明していきます。

TwentyTwelveのページナビゲーションを無効化
TwentyTwelveの個別ページナビゲーションを削除
TwentyTwelveにページネーションを実装

目次 [非表示]

1 TwentyTwelveのページナビゲーションを無効化する
2 TwentyTwelveの個別ページナビゲーションを削除する
3 TwentyTwelveにページネーションを実装

TwentyTwelveのページナビゲーションを無効化する

カスタマイズが捗るように TwentyTwelve のページナビゲーションを無効にしておきます。

具体的には下記の場所が該当します。

TwentyTwelveのページナビゲーション

ページナビゲーションは TwentyTwelve 親テーマ の functions.php から下記の関数を呼び出して表示しています。

twentytwelve_content_nav( 'nav-above' );

functions.php だけは “子テーマ → 親テーマ” の順で実行されるので、扱いが他のファイルと変わってきます。とりあえず各ページに記述された関数を削除しようと思いファイルを調べてみました。

twentytwelve_content_nav( ‘nav-above’ ) を利用しているファイル一覧

# cd wp-content/themes/twentytwelve/
# grep -ir "twentytwelve_content_nav" * | grep -v functions.php
 
archive.php:                    twentytwelve_content_nav( 'nav-below' );
author.php:                     <?php twentytwelve_content_nav( 'nav-above' ); ?>
author.php:                     <?php twentytwelve_content_nav( 'nav-below' ); ?>
category.php:                   twentytwelve_content_nav( 'nav-below' );
index.php:                      <?php twentytwelve_content_nav( 'nav-below' ); ?>
search.php:                     <?php twentytwelve_content_nav( 'nav-above' ); ?>
search.php:                     <?php twentytwelve_content_nav( 'nav-below' ); ?>
tag.php:                        twentytwelve_content_nav( 'nav-below' );

functions.php 以外は子テーマで上書きできるのでと思いましたが、 6 ファイルもあるので消すだけのためにこれを弄るのは面倒です。

親テーマの functions.php を覗いて関数を確認すると、幸いなことにこの関数は子テーマで打ち消せるようになってました。

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
 * Displays navigation to next/previous pages when applicable.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_content_nav( $html_id ) {

237 行目で “if (! function_exists” とあるので、先に子テーマの functions.php で同名の関数を定義してしまえばいい訳です。

早速、子テーマ内の functions.php に下記コードを追加します。内容は見ての通り何も実行しないダミー用の関数です。

function twentytwelve_content_nav() {}

これで TwentyTwelve のページナビゲーション無効化は完了です。

TwentyTwelveの個別ページナビゲーションを削除する

ページネーションのカスタマイズには関係しませんが、ついでなので個別ページ末尾に表示されるナビゲーションも削除しました。

個別ページに表示されるナビゲーション

こちらは single.php の下記コードで表示されていますのでゴッソリ削除してしまいます。

TwentyTwelve 子テーマ内の single.php を編集して 19 – 23 行目を削除します。

<nav class="nav-single">
    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;    ', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;'    , 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
</nav><!-- .nav-single -->

削除するとこのように表示されます。

個別ページのナビゲーション除去後

これで個別ページのナビゲーション削除は完了です。

TwentyTwelveにページネーションを実装

いよいよ本題の ページネーション を TwentyTwelve に実装します。

子テーマ内の functions.php にページネーション表示用の下記コードを追加します。

function pagination($pages = '', $range = 2) { 
    $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 "<div class='pagination'>";
 
        if ($paged > 2 && $paged > $range+1 && $showitems < $pages) {
            echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         }
 
        if ($paged > 1 && $showitems < $pages) {
            echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";
        }
        for ($i=1; $i <= $pages; $i++) {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
                echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
            }
        }
 
        if ($paged < $pages && $showitems < $pages) {
            echo "<a href='".get_pagenum_link($paged + 1) ."'>&rsaquo;</a>";
        }
 
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) {
            echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
        }
 
        echo "</div>\n";
        echo "<div style='clear:both;'></div>\n";
 
    }
}

※ 2013/10/23 追記
float 解除のため 37 行目に “clear: both;” を追加しました。

次にスタイルシートで表示の調整を行います。

.pagination {
    clear: both;
    padding: 20px 0;
    padding: 1.428571428571429rem 0;
    position: relative;
    font-size: 14px;
    font-size: 1rem;
    line-height: 14px;
    line-height: 1rem;
}
.pagination span,
.pagination a {
    margin: 2px 2px 2px 0;
    margin: 0.1428571428571429rem 0.1428571428571429rem 0.1428571428571429rem 0;
    padding: 6px 9px 5px 9px;
    padding: 0.4285714285714286rem 0.6428571428571429rem 0.3571428571428571rem 0.6428571428571429rem;
    display: block;
    float: left;
    text-decoration: none;
    width: auto;
    color: #ffffff;
    background: #464646;
}
.pagination a:hover{
    color: #ffffff;
    background: #b0c4de;
}
.pagination .current{
    padding: 6px 9px 5px 9px;
    padding: 0.4285714285714286rem 0.6428571428571429rem 0.3571428571428571rem 0.6428571428571429rem;
    color: #ffffff;
    background: #21759b;
}

最後にページネーションを表示したい場所に下記コードを挿入します。

<?php pagination($additional_loop->max_num_pages); ?>

当初は footer.php にでもと考えましたが、 TwentyTwelve は PC・スマートフォン・タブレットを問わない レスポンシブWebデザイン なので、これだと閲覧するデバイスによっては思う位置に表示されません。

※ footer.php に追加するとスマートフォン等で表示した際に、ウィジェットエリアの一番下に表示されます。

というわけで、上記で無効化した “twentytwelve_content_nav()” 関数を使う事にしました。

下記のように twentytwelve_content_nav() → pagination($additional_loop->max_num_pages) でページネーションを呼び出すようにします。

function twentytwelve_content_nav($args) {
    if ( preg_match("/^nav-below/", $args) ) {
        pagination($additional_loop->max_num_pages);
    }
}

2013/05/14 追記

twentytwelve_content_nav(nav-above) が呼ばれた場合、ページ上部にもページネーションが表示されてしまうことがわかりました。

そのため、引数判定を追加し twentytwelve_content_nav(nav-below) の場合のみページネーションを表示するように修正しました。

twentytwelve_content_nav() 関数は削除していなければ記述されているので他のファイルを弄る必要はありません。

下記のように表示されたら OK です。

ページネーションの表示例

参考にしたページ

WordPressにプラグイン無しでページネーションを設置する方法