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

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

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

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

主な手順

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

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

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

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

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">

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

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

functions.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>';
  }
}

//レスポンシブなページネーションを作成する

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).'">First</a></li>';

//1つ戻る

echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'">Previous</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).'">Next</a></li>';

//最後尾へ

echo '<li class="last"><a href="'.get_pagenum_link($pages).'">Last</a></li>';

echo '</ul>';

}

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

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

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

次に、レスポンシブ動作向けに書かれたスタイルシートを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;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

/************************************

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

************************************/

.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);
} ?>

<?php if (function_exists('responsive_pagination')) {

responsive_pagination($additional_loop->max_num_pages);

} ?>

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

動作確認

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

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

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

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

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

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

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

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

まとめ

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

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

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

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