Simplicity のページネーションを使いやすくするカスタマイズ

ページネーションをカスタマイズ

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

使いやすいサイトは、使いやすいページネーションが設置されています。

Google のページネーションも、 Amazon のページネーションも非常に使いやすい。

使いやすいページネーションとは、おおまかに以下の要素を満たしています。

  • 前のページと次のページへのリンクが明確になっている
  • 現在のページ数がすぐに分かる
  • ページリンクの数が抑えられている
  • 最後のページへのリンクはない
  • モバイルでの操作性がいい

このすべての要素を満たすために、 Simplicity のページネーションをカスタマイズする方法をご紹介します。

完成図は以下のとおり。

パソコンでの 1 ページ目。前のページはないため、「前へ」は表示されません。

パソコンでの1ページ目のページネーション

パソコンでの 2 ページ目。これ以降は「前へ」が表示されます。また、 2 つ先の 4 ページ目まで表示されます。

パソコンでの2ページ目のページネーション

パソコンでの 3 ページ目。 1つ先の 4 ページ目までしか表示されません。これは 4 ページ目以降の布石です。

パソコンでの3ページ目のページネーション

パソコンでの 4 ページ目以降。前後のページリンクと 1 ページ目へのリンクが表示されます。

パソコンでの4ページ目以降のページネーション

パソコンでの最後のページ。次のページはないため、「次へ」は表示されません。

パソコンでの最後のページのページネーション

モバイルでの 1 ページ目。モバイルではページリンクは表示されません。また、パソコンの時よりボタンを大きくしています。

モバイルでの1ページ目のページネーション

モバイルでの 2 ページ目。

モバイルでの2ページ目のページネーション

モバイルでの 3 ページ目以降。これ以降は 1 ページ目へのリンクが表示されます。

モバイルでの3ページ目以降のページネーション

モバイルでの最後のページ。

モバイルでの最後のページのページネーション

「次のページに行きやすくなった。」というのが、カスタマイズ後に私自身が使用した際の感想です。

このページネーションのカスタマイズは、たったの 3 ステップかつ 100% コピペで行なえます。

ページネーションのテーマ設定

Simplicity には、 2 つのページネーションタイプが用意されています。

今回のカスタマイズで使用するのは、「レスポンシブ(デフォルト)」です。

WordPress 管理画面 → 外観 → カスタマイズ → レイアウト(全体・リスト)より、「ページネーションタイプ」を「レスポンシブ(デフォルト)」にします。

すでに「レスポンシブ(デフォルト)」にしている場合には、次のステップに移動します。

コードを変更

Simplicity のレスポンシブページネーションは、「WordPressにレスポンシブのページネーションを設置するカスタマイズ方法」でわいひらさんがご紹介されているものとほぼ同じです。

子テーマの functions.php に以下のコードを追加すると、 Simplicity のレスポンシブページネーションを変更できます。

// レスポンシブなページネーションを作成する
function responsive_pagination( $pages = '', $range = 2 ) {
    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" role="menubar" aria-label="Pagination">';
        
        // 前のページへ
        if( $paged > 1 ) echo '<li class="previous"><a href="' . get_pagenum_link( $paged - 1 ) . '"><span>前へ</span></a></li>';
        
        // 先頭へ 3ページ目のみ
        if( $paged > 2 && $paged < 4 ) echo '<li class="first-three-page"><a href="' . get_pagenum_link( 1 ) . '"><span>1</span></a></li>';
        
        // 先頭へ 4ページ目以降
        if( $paged > 3 ) echo '<li class="first"><a href="' . get_pagenum_link( 1 ) . '"><span>1</span></a><span>...</span></li>';
        
        // 番号つきページ送りボタン
        for( $i=1; $i <= $pages; $i++ ) {
            if( 1 != $pages && $paged < 3 && ( !( $i >= $paged+$range+1 || $i <= $paged-$range ) ) ) {
                echo ( $paged == $i )? '<li class="current"><a>' . $i . '</a></li>':'<li class="no-present"><a href="' . get_pagenum_link( $i ) . '" class="inactive" >' . $i . '</a></li>';
            } elseif( 1 != $pages && $paged > 2 && ( !( $i >= $paged+$range || $i <= $paged-$range ) ) ) {
                echo ( $paged == $i )? '<li class="current"><a>' . $i . '</a></li>':'<li class="no-present"><a href="' . get_pagenum_link( $i ) . '" class="inactive" >' . $i . '</a></li>';
            }
        }
        
        // 次のページへ
        if( $paged < $pages ) echo '<li class="next"><a href="' . get_pagenum_link( $paged + 1 ) . '"><span>次へ</span></a></li>';
        echo '</ul>';
    }
}

CSS で調整

最後に親テーマの CSS を上書きしつつ、スタイルを調整します。

子テーマの style.css に、以下の CSS を追加します。

.pagination a {
  border-radius: 2px;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.pagination > li:first-child > a,
.pagination > li:last-child > a {
  border-radius: 2px;
}

.pagination > li:first-child > a:hover,
.pagination > li:last-child > a:hover {
  color: #333;
}

.pagination > .previous > a,
.pagination > .next > a {
  background: #666;
  color: #fff;
  width: 80px;
}

.previous > a > span {
  margin-left: 8px;
}

.next > a > span {
  margin-right: 8px;
}

.pagination > .first {
  display: inline-flex;
}

.first > a:before {
  margin-right: 4px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
  position: static;
}

@media screen and (min-width: 740px) {
  .first > span {
    padding-top: 2px;
  }
}

@media screen and (max-width: 740px) {
  .pagination > .no-present {
    display: none;
  }
  .pagination .first-three-page {
    display: inline-flex;
  }
  .first-three-page:after {
    content: '...';
    margin-right: 4px;
    padding-top: 7px;
  }
  .pagination > .first-three-page > a:before {
    content: '\f100';
    display: inline-block;
    font-family: Fontawesome;
    margin-right: 4px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .pagination a {
    height: 48px;
    line-height: 48px;
    width: 48px;
  }
  .first > span {
    margin-right: 4px;
    padding-top: 7px;
  }
}

@media screen and (max-width: 500px) {
  .pagination li.first,
  .pagination li.last {
    position: static;
  }
}

これで完成です。


Simplicity のレスポンシブページネーションの変更は、親テーマのテンプレートに手を加える必要はありません。

子テーマだけでカスタマイズできるため、気軽に変更できます。

サイト訪問者がどう感じるかを第一に考え、使いやすいページネーションにされてはいかがでしょうか。

モバイルで誤タップせず使えるかも、大事なポイントです。

今回のカスタマイズを行うことで、少なくともモバイルで誤タップする確率は抑えられるはず。