【ページ遷移がないページネーション】jquery・paginathing.js実装方法と、便利/微妙なポイント

      2022/05/31   1912文字

今回は、jqueryでさっくりページネーションを作れることがわかったので、実装方法をご紹介します。技術的には『wp-queryで全件取ったものを、フロントjqueryで成形・ページ遷移がない』という感じになります。さっそく方法を見ていきましょう。

解決したい問題~カスタム検索のページで、特定条件でページがやたら長い


今回、ページネーションを検討した理由がこちらです。管理人運営の著作権フリー曲サイトSSFで、以前『カスタム検索機能』を作ったんですけど、条件によっては『取得件数が多い時など、ページがやたら長い』というのがありました。
こういうのは、だいたいページネーションで分割してやることになります。

WordPressのページネーションは当サイトやお仕事で結構使ったので、ほかの方法もやってみましょうか。

jquery・paginathing.jsの設置方法や表示例

で、探してきて見つけたのが『jquery・paginathing.js』。他のサイトでも『設置は割と簡単』と言われています。jqueryに慣れている方なら、数分程度でできるかも。ここでは設置や表示例を確認していきます。

paginathing.js下準備(ダウンロードしてサーバーアップ)


まずは、github.comからファイルをゲットしてきます。paginathing.js、またはpaginathing.min.jsを。(paginathing.min.jsというのは圧縮版です。)
管理人はWPテーマのアセットフォルダjsに入れましたが、構築データ上わかりやすいところに入れておきましょう。

そのほか、必要ファイルとして『jquery本体』があります。お使いの環境でjquery本体が読み込まれているかもご確認ください。

paginathing.jsパラメータ等設定例

フロントのプログラムは、こんな感じになります。


解説するとこんな感じ。『$(function() {}) ではなくJquery』という表記になっているのは、どこかで干渉が発生して、ファンクションとして読み込みがされなかったからです(デベロッパーツールで確認)

このページでは<li></li>の中にタイトルやリンクがループで出る・親が<ul>なんですけど、この親要素にsearch-resultクラスをつけて、設定しました。親要素の設定は必須です。
パラメーターは『perpageで件数』『prev/nextの文字指定』を行いました。

paginathing.js 表示例


ページネーションはこんな感じになります。大量に子要素があると、ページネーション項目が増えすぎるので、ちょっとしたコンテンツ一覧に向いていそうです。

jquery・paginathing.jsの便利/微妙なポイント

ページ遷移がないので、一度読み込んでしまえばサクサク動作

件数によっては重くなる可能性がありますが(子要素100個くらいでは、あまり気にならなかった)、ページ遷移がないというのはポイントです。

微妙なポイントは、件数が多い時は上へのスクロールが大変かも


微妙なポイントとしては、『表示件数が多い時は、(基本ページネーションが下に出るので)上にスクロールするのが大変』でしょうか。件数が多い時は上がみえないので、スクロールさせてやるのは結構面倒です。

管理人は現在『コールバックで要素トップ』みたいなのを検討しています。

あとがき・まとめ

  • jquery・paginathing.jsを使って、サックリとページネーションを実装できる
  • $(function() {})と書いてファンクションを読まない場合は、Jqueryと書き換える
  • 指定ポイントは、親要素や件数・文字などがメインか
  • ページ遷移がないのはポイントだが、件数が多い時は上へのスクロールが大変

まとめると、こんなところでしょうか。『件数がそんなに多くない・文字メインで縦が短い』などの場合は、かなり使えるかと思います。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - javascript/jQuery、その他, webサイト制作関連
【タグ】 -

  関連記事

baserCMS(ベーサーシーエムエス)でサイト制作してみる1~インストールやSSL・テーマ設定
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法
【javascriptライブラリ】W3.JS Sortで、リストになっているボックスの要素を、ボタンで並び替えする方法
ワードプレスサイトを独自ドメインで公開するまでの流れや注意点
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法
【ページ遷移がないページネーション】jquery・paginathing.js実装方法と、便利/微妙なポイント
【悲報】アメブロがヤバい(特に無料プラン・スマホレイアウト)書いても書いても売れないのは何故?
【セキュリティ学習】WordPress関数get_search_queryに細工して、フォームからjavascriptを実行する方法
【WordPress更新情報表示】php/wp組み込みファンクション(fetch_feed)で取得と、プラグインで表示どちらが良い?