WordPressでレスポンシブ対応のページネーションを作る

WordPressでレスポンシブ対応のページネーションを作る

先日このブログのテーマをレスポンシブにしたのですが、それまで別々のテーマでページネーションを書き分けていたので、1つのコードでやるにはどうしたらいいのかなとごねごねした結果をメモります!


構想

スマホではこんな感じに見えて、

ブラウザ幅が600px以上になったらこうなる感じ。最後のページ数はもちろん可変ですし(当たり前だ)、現在地から前後何ページ分出力するかも変えられます。そのへんはNaoyaさんのコードがすばらしいからです!

参考サイト

こちらのコードを元に作らせていただきました。Naoyaさんいつもありがとうございます!!

出力コード

実際にはこのようなつくりになっていて、クラスをつけてブラウザの大きさによって表示したり非表示したりしてます。

HTML

なので、HTMLはこんな感じ。

実装コード

上記のHTMLを出力するべく、こんな関数を作りました。

functions.php

1行目の$range = 4の数値を変えると、PCレイアウトで現在地から前後何ページ表示するかを変更できます。

2~9行目は、下準備です。何ページ分出力するかとか、最後のページが何かとか。

10行目からページネーションを出力していますが、総ページ数が1ページを超えているのが条件です。

11~13行目で、開始タグ、1ページ目のリンク、モバイル用の「Previous」の出力をしています。「Previous」は現在地が2ページより後の場合にしか出てきません。

14~20行目が主にPC用の中身の部分。2ページから最終-1ページまでをループして、範囲に入っていればリンクを、範囲外で2ページもしくは最終-1ページの場合は「…」を出力したりしています。

21~23行目では、モバイル用の「Next」、最終ページのリンク、閉じタグの出力をしています。「Next」は現在地が最終-1より前の場合にしか出てきません。

index.phpなど

ページネーションを呼び出すコード。ここはNaoyaさんのコードそのままです! すみません!! ありがとうございます!!

style.css

後はCSSで、メディアクエリを使ってブラウザの大きさで表示と非表示を切り替えます(ハイライト部)。

その他の見え方はお好みでって感じなので、例として現在のこのブログのコードです。実際はWebフォントとかも使ってるんですが、細かい部分は割愛してます。

公開日:2018/04/05

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

当サイトはスパム対策のため Akismet プラグインを利用しています。コメントデータの処理方法はこちらをご参照ください。

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)