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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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>内などで呼び出して、利用できるようにする必要があります。

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

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

PHP

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

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

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

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

CSS3

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

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

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

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

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

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

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

動作確認

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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