Studio
Happyvalley

ページャーを
複数設置。

詳細ページじゃなくて
ワードプレスの
カテゴリ一覧用だよ。

image: ページャーを複数設置。

Wordpress用に複数設置できるページャーを開発したよ。

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/pager_fig_0.png

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

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

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

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/pager_fig_1.png

不具合の内容は、例えば、Aのリストが100個、Bのリストが50個とした場合。 Aのリストで51個目を選択するとBの最大値50を超えてしまうためBのページャーが止まってしまうんですね。 まあ、リロードすれば動きますけど、スマートじゃないですね。

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

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

ページ遷移なしにページーを設置したいので、やはりjavascriptを使うのは前提です。ただしDBからカテゴリー一覧を取得するためにはPHPにリクエストする必要があるためaJaxは必須です。で、実はwordpressにはデフォルトでDBの出力をJSONで書き出すしくみがあるんですね。以前仕事で使った経験があるので再度使うことに。

多分、仕組みとしてはDBの対象カテゴリをいったんメモリに保存してそれを必要な箇所だけ抜き出すって感じです。そのため記事数の多いカテゴリの場合は書き出すのに多少ラグがあります。そのため先に10行ほど書き出すようにしています。なので見た目は記事が既定の数(例えば10行とか)書き出されてしばらくしてからページャーのパーツが表示される感じになります。でデザインもせっかくなので自由にあんまりないタイプにしました。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/pager_fig_3.png

こちらのサイトでもページ数が増えてきたら採用しようと思います。