WordPressにレスポンシブのページネーションを設置するカスタマイズ方法

WordPress向けのレスポンシブページネーション(ページャー)を作成してみました。

WordPressのテーマ向けカスタマイズで、通常のページネーションなら検索すると結構見つかりました。けれど、レスポンシブのものは、僕の適当な検索では見つからなかったので手軽に実装できるようにコードを書いてみました。

今回のカスタマイズを行うと、以下のようなページ送りボタンをWordpressに設置することができます。

レスポンシブページネーション

スポンサーリンク
レクタングル(大)広告

主な手順

WordPressテーマにページネーションを作成する主な手順は以下です。

  1. Font Awesome呼び出しタグを貼り付ける
  2. functions.phpにコードを貼り付ける
  3. ページネーション用のスタイルシートを貼り付ける
  4. ページネーション表示箇所にコードを貼り付ける

多くて4回、少なくて3回コードをコピペすれば実装できる簡単な作業です。

古いAndroidブラウザでは対応していないかもしれません。

Font Awesome呼び出しタグを貼り付ける

Font Awesome

まず、今回のページネーションの「≪ 先頭」「< 1つ戻る」「1つ進む >」「最後尾 ≫」を表すアイコンはFont Awesomeを利用します。

Font Awesomeに対応していないテーマに今回のページネーションを設置するには以下のタグを<head></head>内などで呼び出して、利用できるようにする必要があります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

既に、Font Awesomeを利用しているテーマの場合は、この項目は飛ばしてください。

functions.phpにコードを貼り付ける

PHP

次に、テーマ内のfunctions.phpに以下のコードを貼り付けます。

//レスポンシブなページネーションを作成する
function responsive_pagination($pages = '', $range = 4){
  $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 '<ul class="pagination" role="menubar" aria-label="Pagination">';
    //先頭へ
    echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
    //1つ戻る
    echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
    //番号つきページ送りボタン
    for ($i=1; $i <= $pages; $i++)     {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))       {
        echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
      }
    }
    //1つ進む
    echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
    //最後尾へ
    echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
    echo '</ul>';
  }
}

上記動作部分のコードは、以下の記事を参考にさせていただきました。

参考 WordPressにプラグイン無しでページネーションを設置する方法 | コリス

ページネーション用のスタイルシートを貼り付ける

CSS3

次に、レスポンシブ動作向けに書かれたスタイルシートをstyle.cssなどに貼り付けます。

/************************************
** レスポンシブページネーション
************************************/
.pagination{
  list-style-type: none;
  padding-left: 0;
  margin: 30px 0;
}

.pagination,
.pagination li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.pagination a {
  font-weight: 300;
  padding-top: 1px;
  text-decoration:none;
  border: 1px solid #ddd;
  border-left-width: 0;
  min-width:36px;
  min-height:36px;
  color: #333;
}

.pagination li:not([class*="current"]) a:hover {
  background-color: #eee;
}

.pagination li:first-of-type a {
  border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
  display: inline-block;
  font-family: Fontawesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }

.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }

.pagination li.current a {
 background-color: #ddd;
 cursor: default;
 pointer-events: none;
}

.pagination > li:first-child > a {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

@media only screen and ( max-width: 680px ) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a { border-left-width: 1px; }
}

@media only screen and ( max-width: 500px ) {
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.current,
  .pagination li.first,
  .pagination li.last,
  .pagination li.previous,
  .pagination li.next{
    position: initial;
    top: initial;
    left: initial;
  }

  .pagination li.previous a { border-left-width: 0; }
}

@media only screen and ( max-width: 400px ) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a { border-left-width: 1px; }
}

@media only screen and ( max-width: 240px ) { /* For watches? */
  .pagination li { width: 50%;}

  .pagination li.current {
    order: 2;
    width: 100%;
    border-left-width: 1px;
  }
}

スタイルは、サイトに合わせて変更してください。

上記のCSSは、以下のコードを参考にさせていただきました。(※上記のコードは、直感的にわかりやすくなるようにかなり書き換えたので、詳しくは以下を参照。)

参考 番号付きのページネーションのボタンのレスポンシブなアイディア | 9ineBB

ページネーション表示箇所にコードを貼り付ける

最後に、以下のコードを、ページネーションを表示させたい場所に貼り付けてください。

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

    これで、カスタマイズは完了です。

    動作確認

    上記のカスタマイズを行うと、以下のようなページネーションが表示されます。

    完成したレスポンシブページネーション

    画面幅が狭くなると1段階目として、以下のような表示になります。

    画面が狭くなった1段階目のレスポンシブページネーション

    もう1段階画面が狭くなると以下のような表示になります。

    画面が狭くなった2段階目のレスポンシブページネーション

    もう一段階画面が狭くなると以下のように表示されます。

    画面が狭くなった3段階目のレスポンシブページネーション

    画面が最も狭い状態で、以下のような表示になります。(画面幅いっぱいの大きさになる)

    画面が最も狭い状態のレスポンシブページネーション

    ちなみに、先頭ページに行っても「≪ 先頭」「< 1つ戻る」は消えません。

    先頭のレスポンシブページネーション

    最後尾に行っても、「1つ進む >」「最後尾 ≫」は表示されたままです。

    最後尾のレスポンシブページネーション

    これは、こういった仕様なので、気になる場合は、それぞれで変更してください。

    まとめ

    これまでの普通のページネーションだと、画面の狭いモバイル端末などで2列に表示されたりすることもありました。

    僕の場合はこれまで、Wordpressのwp_is_mobile()系の関数を用いて、ページボタンの表示数を変更することで2列に表示されないように対応していました。

    けれども、レスポンシブにすると、特にPHP等で処理もする必要がなく、どのような端末でも、かなりすっきりと表示されるようになりました。

    というわけで、「Wordpressページネーションのレスポンシブ化に悩んでいる」という方は、コピペでペタペタ貼り付けるだけでできる簡単なカスタマイズなので、よろしかったら選択肢のひとつにでも。

    『WordPressにレスポンシブのページネーションを設置するカスタマイズ方法』へのコメント

    1. 名前:いずみさわ 投稿日:2017/01/16(月) 09:15:18 ID:918ed6e44

      WordPressにレスポンシブのページネーションを設置するカスタマイズ方法
      に関する質問です。

      カテゴリー一覧のページネーションが効かないのですが、
      パーマリンク設定のカスタム構造を下記のようにしてしまうと効かないのでしょうか?
      /%category%/%post_id%/

      ご教授の方よろしくお願い致します。

    2. アバター画像 名前:わいひら 投稿日:2017/01/16(月) 20:06:32 ID:4b87b324f

      パーマリンク設定のカスタム構造を下記のようにしてしまうと効かないのでしょうか?
      /%category%/%post_id%/

      実際の不具合を見ていないので確かなことはわからないのですが、違う設定にすると通常表示されるのであれば、そうかもしれません。

    3. 名前:いずみさわ 投稿日:2017/01/17(火) 14:23:06 ID:ed7d4a9e2

      ありがとうございます。