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">
既に、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>'; } }
上記動作部分のコードは、以下の記事を参考にさせていただきました。
参考 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; } }
スタイルは、サイトに合わせて変更してください。
上記のCSSは、以下のコードを参考にさせていただきました。(※上記のコードは、直感的にわかりやすくなるようにかなり書き換えたので、詳しくは以下を参照。)
参考 番号付きのページネーションのボタンのレスポンシブなアイディア | 9ineBB
ページネーション表示箇所にコードを貼り付ける
最後に、以下のコードを、ページネーションを表示させたい場所に貼り付けてください。
<!--ページネーション--> <?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ページネーションのレスポンシブ化に悩んでいる」という方は、コピペでペタペタ貼り付けるだけでできる簡単なカスタマイズなので、よろしかったら選択肢のひとつにでも。
WordPressにレスポンシブのページネーションを設置するカスタマイズ方法
に関する質問です。
カテゴリー一覧のページネーションが効かないのですが、
パーマリンク設定のカスタム構造を下記のようにしてしまうと効かないのでしょうか?
/%category%/%post_id%/
ご教授の方よろしくお願い致します。