カスタマイズしやすくコピペでもOKなレスポンシブ対応ページ送り【WordPress】

CSSで柔軟にデザイン変更することを想定した使い勝手のよいページネーションを制作しました。特徴としては、「レスポンシブで文字サイズの影響が無く、シンプルHTMLでカスタマイズしやすい」といったところを目標としています!

WP_Query 対応修正版はこちら – 2021.12.14追記
このページで紹介しているページ送りはアーカイブテンプレート用のため、new WP_Queryでのページ送りには対応していません。固定ページでWP_Queryを使用した投稿一覧に対応した修正版は下記の記事を参考にしてください。

特徴

  • 表示名を変更可能な「最初へ・前へ・次へ・最後へ」ボタン。
  • 「現在ページ番号 / 全ページ数」を表示。
  • ページ番号リンクの表示数を変更可能。
  • 上記項目の表示を切り替えてレスポンシブ対応。
  • サンプルをコピペするだけでも使える。
  • BEMによる命名規則に則ったクラス名を出力。

CSSが適用されていない状態では「ページ番号・現在ページ数・移動ボタン(最初へ・前へ・次へ・最後へ)」の全てが表示されますが、CSSメディアクエリを利用して要素の表示/非表示やレイアウトを調整する形になります。

ページ送りの設置

設置方法

functions.phpに用意した関数をテンプレートファイルから呼び出す形になります。

functions.phpで関数を定義

必要があれば2行目の$settingsの中身だけ設定してください。
大まかな処理内容は次のようになります。

10行目:グローバル変数を使うため宣言します。
11行目:設定値を元に表示数のベースとなる数値を用意します。
12行目:最大ページ数(最終ページ番号)を取得します。
13行目:分割ページが無い場合のページ数を1とします。
14行目:最大ページ数が1でない(分割ページが存在する)場合はループ開始。
17行目:最大ページの数ほど繰り返し処理します。
18行目:左右の表示数に該当するページのみ処理します。
20行目:現在ページの場合の要素を出力します。
21行目:現在ページでない場合はget_pagenum_link()で他ページへのリンク要素を出力します。

function my_paginate() {
  $settings = array(
    'side_range' => 3,          // 現在ページの左右の表示数.
    'txt_prev'   => '< 前へ',     // 一つ戻るテキスト.
    'txt_next'   => '次へ >',     // 一つ進むテキスト.
    'txt_first'  => '<< 最初へ', // 最初へ移動テキスト.
    'txt_last'   => '最後へ >>',  // 最後へ移動テキスト.
  );

  global $paged, $wp_query;
  $showitems = ( $settings['side_range'] * 2 ) + 1;
  $pages = $wp_query->max_num_pages;
  if ( empty( $paged ) ) { $paged = 1; }
  if ( 1 != $pages ) {
    echo "<div class=\"pagination\">\n";
    echo "  <ul class=\"pagination__list\">\n";
    for ( $i = 1; $i <= $pages; $i++ ) {
      if ( 1 != $pages && ( ! ( $i >= $paged + $settings['side_range'] + 1 || $i <= $paged - $settings['side_range'] - 1 ) || $pages <= $showitems ) ) {
        echo ( $paged == $i ) ?
        '    <li class="pagination__item--current">' . esc_html( $i ) . "</li>\n" :
        '    <li class="pagination__item"><a href="' . esc_url( get_pagenum_link( $i ) ) . '">' . esc_html( $i ) . "</a></li>\n";
      }
    }
    echo "  </ul>\n";
    echo '  <p class="pagination__pos">Page ' . esc_html( $paged ) . '/' . esc_html( $pages ) . "</p>\n";
    if ( $paged > 2 && $paged > $settings['side_range'] + 1 && $showitems < $pages )
      echo '  <a class="pagination__btn--first" href="' . esc_url( get_pagenum_link( 1 ) ) . '">' . esc_html( $settings['txt_first'] ) . "</a>\n";
    if ( $paged > 1 )
      echo '  <a class="pagination__btn--prev" href="' . esc_url( get_pagenum_link( $paged - 1 ) ) . '">' . esc_html( $settings['txt_prev'] ) . "</a>\n";
    if ( $paged < $pages )
      echo '  <a class="pagination__btn--next" href="' . esc_url( get_pagenum_link( $paged + 1 ) ) . '">' . esc_html( $settings['txt_next'] ) . "</a>\n";
    if ( $paged < $pages - 1 &&  $paged + $settings['side_range'] - 1 < $pages && $showitems < $pages )
      echo '  <a class="pagination__btn--last" href="' . esc_url( get_pagenum_link( $pages ) ) . '">' . esc_html( $settings['txt_last'] ) . "</a>\n";
    echo "</div>\n";
  }
}

25行目:ページ位置(現在ページ / 最大ページ)を書き出します。
26~33行目:条件を指定して要素を表示。esc_html()で出力時のエスケープを行います。

テンプレートファイルから関数を呼び出し

ページネーションを表示するテンプレートファイルから関数を呼び出します。

<?php my_paginate(); ?>

ここまでの作業で装飾されていない状態のページ送りが完成です。
※もし関数名のバッティングによるエラーが出た場合は関数名を変更してください。

参考リンク
WorePress Codex – get_pagenum_link()
WordPress Codex – esc_html()

CSSでデザインカスタマイズ

見栄えの変更は全てCSSで行い、メディアクエリを使ってレスポンシブに対応します。ブラウザの幅を変更してレスポンシブ対応しているのを確認してみてください。border以外は相対的に指定していますのでフォントサイズを変えてもレイアウトが崩れないようになっています。

CODEPENによるサンプルでは「HTML・CSS」ボタンでソースを表示できます。
右上の「FORK ON CODEPEN」をクリックすると大きい画面で動作確認ができます。

レイアウトが切り替わるブレイクポイントは520px、960pxに設定しています。
ブラウザの幅を調整すると指定の画面幅で表示が切り替わることを確認できます。

HTMLは静的なサンプルですのでリンク等は機能しません。CSSの参考にご利用ください。

基本の状態

必要最低限のスタイルです。私はこれを元にカスタマイズしたものを使うことが多いです。

See the Pen pagination by web-souko (@web-souko) on CodePen.

四角-青

よく見かけるタイプになります。サイトに合わせて色を変更するだけで使えそうです。

See the Pen pagination 1.1 by web-souko (@web-souko) on CodePen.

丸-紫

丸型と色で遊び心のあるイメージです。border-radiusを調整して角丸にしても使えます。

See the Pen pagination 1.2 by web-souko (@web-souko) on CodePen.

フラット

クリック可能なエリアを広く取りやすいので操作しやすい印象です。

See the Pen pagination 1.3 by web-souko (@web-souko) on CodePen.

その他のデザインサンプル(22.02.24追記)

次のページにもCSSによるデザインサンプルを掲載しています。
こちらもコピペで利用できるので参考にしてみてください。

タイトルとURLをコピーしました