【ページ遷移がないページネーション】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・テーマ設定
【javascriptライブラリW3.JS】ボタン・onclickで特定クラスを表示/非表示する、絞り込みボタンを作る方法
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも
【WordPress・REST-API&vue.js】静的htmlファイル上で記事json取得し表示する方法
【javascriptライブラリ】W3.JS Sortで、リストになっているボックスの要素を、ボタンで並び替えする方法
コーポレートに良くあるフェードイン(サイト全体・要素スライド)を、簡単コードで実装【javascript&jquery・WPサイトに】
【セキュリティ学習】WordPress関数get_search_queryに細工して、フォームからjavascriptを実行する方法
ワードプレスホームページ制作『ブログ記事投稿ページ・固定ページ』使い分け
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
【WordPressフィールド画像取得】array_push&foreachループ、代替テキストをクラス出力、表示/非表示を切り替える方法
【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok