Studio
Happyvalley

ページャーを
複数設置。

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

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

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のページャーが止まってしまうんですね。
まあ、リロードすれば動きますけど、Bのページャーが使えないことには変わりません。
wordpressのページャープラグインが詳細ページ専用とは以上のようなことです。
詳細ページにはページャーは一つで十分ですから。

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

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

プラグインではなく、aJaxを使って動的にページャーを構築

『ページャーを複数設置。』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition