テーマカスタマイズ

レスポンシブでスマホに対応したページネーションをプラグインを使わずに実装する

2017.09.18

2018.01.05

ページがめくれる

レスポンシブで使いやすいと思えるページネーションをWordPressに実装した時のお話です。PCで使いやすいページネーションはある程度確立されているので、スマホの時でも!ってのを重視しています。ちなみにプラグインは使いません。

スマホで使いやすいページネーションとは?

スマホで使いやすいページネーションを実装するには、まずどんなページネーションが使いやすいのか検証する必要があるのですが・・・・・

とりあえずGoogleやYahooのスマホサイトにならう事にします。だって両者がそんな検証してないわけないじゃないですか!(妄信)

Googleのページネーション

Googleのページネーション

Googleは現在のページと、次へのリンクと前へのリンク、そして一番最初のページへのリンクがあります。デザインはシンプルでリンクはアイコンのみとなっています。

Yahooのページネーション

Yahooのページネーション

Yahooは何件あって何ページ目なのか明示されており、リンクは前へ、次へだけのシンプル構造です。

スマホのページネーションはすっきりがベターと判断

実装するページネーション

今回は上記のようなページネーションを実装してみようと思います。もちろん用途にもよるのでしょうがスマホ時のページネーションはシンプルな方が使いやすい印象ですね。

ページネーションの実装

ページネーションの仕組み

ページネーションの仕組みをfunctions.phpに記述します。

function pagination($pages = '', $range = 1){
     $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">';
        echo '<p class="inner">';
        echo '<span class="page-of">Page'.$paged."/".$pages.'</span>';
         if($paged > 2 && $paged > $range+1 && $showitems < $pages){
            echo '<a class="m-prev" href="'.get_pagenum_link(1).'"><<</a>';
        }
        if($paged > 1){
            echo '<a class="pn-prev" href="'.get_pagenum_link($paged - 1).'">< 前へ</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="pn-numbers">'.$i.'</a>';
             }
         }
        if($paged < $pages){
            echo '<a class="pn-next" href="'.get_pagenum_link($paged + 1).'">次へ ></a>';
        }
        if($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages){
            echo '<a class="m-next" href="'.get_pagenum_link($pages).'">>></a>';
        }
        echo '</p></div>'."\n";
    }
}

ページネーションを呼び出すページに以下を記述します。

<?php
if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
}
?>

仕組み部分は以上です。

ページネーションの見た目

参考までに今回制作したページネーションのCSSです。PCで数字のナビゲーションをCSSで非表示に、並び順はフレックスボックスのオーダーで変更しています。

/* 共通 */
.pagination {
    text-align: center;
    width: 100%;
    display: block
}
.pagination a {
    background: #f6f6f6;
    color: #000;
    text-decoration: none
}
/* スマホ */
@media only screen and (max-width: 667px) {
    .pagination .inner {
        width: 90%;
        margin: 0 5%;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        height: 46px
    }
    .pagination .page-of {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
        position: absolute;
        left: 37%;
        width: 26%;
        font-weight: bold;
        color: #fff;
        background: #2C2D2F;
        height: 46px;
        line-height: 46px;
        font-size: 1.3rem
    }
    .pagination .m-prev {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: 0;
        -webkit-order: 0;
        order: 0;
        width: 15%;
        position: absolute;
        left: 0%
    }
    .pagination .pn-prev {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
        width: 22%;
        position: absolute;
        left: 15%
    }
    .pagination .pn-next {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
        width: 22%;
        position: absolute;
        left: 63%
    }
    .pagination .m-next {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 4;
        -webkit-order: 4;
        order: 4;
        width: 15%;
        position: absolute;
        left: 85%
    }
    .pagination .current, .pagination .pn-numbers {
        display: none
    }
    .pagination a {
        line-height: 46px;
        height: 46px;
        font-weight: bold;
        font-size: 1.3rem
    }
}
/* PC */
@media only screen and (min-width: 668px) {
    .pagination .page-of {
        display: block;
        width: 100%;
        font-size: 108%;
        color: #000;
        text-align: center;
        margin-bottom: 2em
    }
    .pagination a, .pagination .current {
        display: inline-block;
        padding: 0 1.5em;
        font-size: 116%;
        font-weight: bold;
        line-height: 50px;
        height: 50px
    }
    .pagination .current {
        background: #2C2D2F;
        color: #fff
    }
    .pagination a:hover {
        background: #2C2D2F;
        color: #fff
    }
  }

今回紹介したページネーションは当サイトにも実装されております。この記事公開時点ではすべての記事一覧ぐらいしか出てないと思われます。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する