ページャーを複数設置。

Pager of Wordpress

Wordpressにページャーを複数設置したい。

| 2021/01/10

Wordpressの複数のリスト一覧用にページャーが必要に

クライアントのWordpressサイトにカテゴリー一覧のリストが複数あります。それぞれ結構な数なので最初はjavascriptで自作したページャーを設置していました。仕組みとしては最初にすべてリストをwordpressで出力しそのあと不要な範囲を非表示にするという設定です。が、その一覧の数が100を超え始めると非表示にする無駄が気になってきました。とにかくソースを見ると非表示のタグがだらだらと続いてスマートとはいえないコードです。

さすがにこれはいかん、ということでwordpress自体の出力を制御するためにプラグインを探すことにしました。

Wordpressのプラグインに複数設置できるページャーはない

最初によく詳細ページで使う「wp-pagenavi」を設置。ところがこれ2か所に設置すると不具合を起こして動作しなくなります。そもそもwordpressのページャーは詳細ページ用で、複数設置を考慮してないのです。また、知らなかったのですが、「wp-pagenavi」は区分けした番号をそれぞれ固定ページにして管理しているんですね。

不具合の内容は、例えば、Aのリストが100個、Bのリストが50個とした場合。
Aのリストで51個目を選択するとBの最大値50を超えてしまうためBのページャーが止まってしまうんですね。
まあ、リロードすれば動きますけど、Bのページャーが使えないことには変わりません。
そもそもURLが変わってしまいます。
ページ番号を進めたいだけなのにページ全体をリロードするなんて、まったく効率悪すぎです。
wordpressのページャープラグインが詳細ページ専用とは以上のようなことです。

Wordpress用の複数設置できるページャーを自作

プラグインにないなら作ってしまおう！ということで、自作することに。

基本の考え方として、ページ振り分け番号をクリックしてもそのページに移動しないようにします。ページ遷移はしないでページ番号が切り替わっていく感じです。
ページ遷移しないので、javascriptを使うのが前提です。ただしDBからカテゴリー一覧を取得するためにはPHPにリクエストする必要があるためaJaxは必須です。で、実はwordpressにはデフォルトでDBの出力をJSONで書き出すしくみがあるんですね。以前仕事で使った経験があるので再度使うことに。

仕組みとしては通常通り出力範囲をDBへリクエストし、出力をJSON形式でメモリへ展開。それをJSでHTMLへ変換し書きだすという流れ。そのため記事数の多いカテゴリの場合は書き出すのに多少ラグがあります。そのラグを回避するためにPHPで10行ほど書き出すようにしています。なので見た目は記事が既定の数(例えば10行とか)書き出されてしばらくしてからページャーのパーツが表示される感じになります。でデザインもせっかくなので自由にあんまりないタイプにしました。