jQueryライブラリpaginathing.jsのコピペでできるページネイションのスニペット

7分

SHARE

ページネイションは、ページ内の文字やコンテンツが多い場合に使われる「ページ送り」等呼ばれるもので、ページを複数のページに分割します。

文字が主体のブログでよく見かけますが、そんなページネイションを簡単に実装できるjQueryライブラリ「paginathing.js」が非常に便利です。

困ってしまった人
困ってしまった人

文字が多いので、ページネイションを使いたいけど簡単なのってある？？

こんなお悩みの方は、ぜひ最後までご覧ください。

実装のサンプル

早速、実装のサンプルで、全15件の <dl> 説明リストを、5件毎の全3ページに分割したページネーション付きのブロックです。

2021年10月08日
トップページを更新しました。
2021年10月02日
フォトギャラリーを更新しました。
2021年9月26日
今週の新商品を追加しました。
2021年9月24日
お客様の声を更新しました。
2021年9月20日
お客様の声を更新しました。
2021年9月16日
ウインターセール開催のお知らせ
2021年9月12日
イベント開催のお知らせ
2021年9月8日
フォトギャラリーを更新しました。
2021年9月2日
今週の新商品を追加しました。
2021年9月1日
HPをリニューアルしました。
2021年8月28日
ウインターセール開催のお知らせ
2021年8月24日
イベント開催のお知らせ
2021年8月8日
フォトギャラリーを更新しました。
2021年8月2日
今週の新商品を追加しました。
2021年7月20日
HPをリニューアルしました。

それぞれに分けられたページは、別途URLが別になったりせずに生成されるので、cannonical でURLの適正化もする必要がありません。

かかかず
かかかず

こんなページネイションが簡単にできる便利なライブラリです。

paginathing.jsでできること

paginathing.jsは、件数ごとに区切るのはライブラリ自体がやってくれるので、HTMLを簡単に記述するだけでOKです。

以下のことができます。

  • 1ページあたりの表示件数を指定
  • 次へ・前へや、最初へ・最後へ
  • ボタンのテキストも任意で設定可能

後述しますが、この辺のことがパラメータをつけるだけでできてしまいます。

かかかず
かかかず

簡単にできてしまうので、WordPressのループと一緒に使ったり、LPのような静的ページなど、いろんな用途でも使えます。

実装の手順

実装の手順です。

以下4つの手順で実装できるので、順に解説していきます。

jQuery本体の読み込み

ライブラリの使用には、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

ライブラリをダウンロード

次に、ライブラリのpaginathing.jsをダウンロードして <head>〜</head> の中の、jQuery本体の後に読み込みます。

HTML 

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' id='jquery-js'></script>
<script src="js/paginathing.min.js"></script>

かかかず
かかかず

ライブラリは、以下のGitHubからダウンロードできます。

外部リンク paginathing.js

ページネイションを追加したい要素にHTMLを記述

ページネーションを追加したい要素に、例えば、<div class="pagenation_block">〜〜〜</div> のようにして、任意のclassを追加した枠で囲みます。

HTML 

<div class="pagenation_block">
	<dl>
		<dt>2021年10月08日</dt>
		<dd>トップページを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年10月02日</dt>
		<dd>フォトギャラリーを更新しました。</dd>
	</dl>
<!-- 省略 -->
	<dl>
		<dt>2021年7月20日</dt>
		<dd>HPをリニューアルしました。</dd>
	</dl>
</div>

jQueryを記述

最後に、jQueryを <body>〜</body> のクロージングタグの前に記述します。

jQuery 

$(function() {
  $('.pagenation_block').paginathing({//親要素のclassを記述
   perPage: 5,//1ページあたりの表示件数
   prevText:'<i class="fas fa-angle-left"></i>',//1つ前のページへ移動するボタンのテキスト
   nextText:'<i class="fas fa-angle-right"></i>',//1つ次のページへ移動するボタンのテキスト
   activeClass: 'navi-active',//現在のページ番号に任意のclassを付与できます
   firstText: '<i class="fas fa-angle-double-left"></i>', // "最初ページ"に移動するボタンのテキスト
   lastText: '<i class="fas fa-angle-double-right"></i>', // "最後のページ"に移動するボタンのテキスト

  })
});

上記は見本ですが、出力する「前へ・次へ」のボタンにfontawesomeも使えます。

かかかず
かかかず

これで完了です。見た目はCSSで整えましょう。

コピペ用コード一式

実装サンプルのHTML等のコード一式です。

どれもコピペすれば使えますが、見た目はCSSで調整できるので色や形状は好みに応じて変更して使ってください。

コードを表示する

HTML 

<div class="pagenation_block">
	<dl>
		<dt>2021年10月08日</dt>
		<dd>トップページを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年10月02日</dt>
		<dd>フォトギャラリーを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年9月26日</dt>
		<dd>今週の新商品を追加しました。</dd>
	</dl>
	<dl>
		<dt>2021年9月24日</dt>
		<dd>お客様の声を更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年9月20日</dt>
		<dd>お客様の声を更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年9月16日</dt>
		<dd>ウインターセール開催のお知らせ</dd>
	</dl>
	<dl>
		<dt>2021年9月12日</dt>
		<dd>イベント開催のお知らせ</dd>
	</dl>
	<dl>
		<dt>2021年9月8日</dt>
		<dd>フォトギャラリーを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年9月2日</dt>
		<dd>今週の新商品を追加しました。</dd>
	</dl>
	<dl>
		<dt>2021年9月1日</dt>
		<dd>HPをリニューアルしました。</dd>
	</dl>
	<dl>
		<dt>2021年8月28日</dt>
		<dd>ウインターセール開催のお知らせ</dd>
	</dl>
	<dl>
		<dt>2021年8月24日</dt>
		<dd>イベント開催のお知らせ</dd>
	</dl>
	<dl>
		<dt>2021年8月8日</dt>
		<dd>フォトギャラリーを更新しました。</dd>
	</dl>
	<dl>
		<dt>2021年8月2日</dt>
		<dd>今週の新商品を追加しました。</dd>
	</dl>
	<dl>
		<dt>2021年7月20日</dt>
		<dd>HPをリニューアルしました。</dd>
	</dl>
</div>

CSS 

nav.pagination-container ul {
    border: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    filter: drop-shadow(0px 1px 3px #ccc);
    transition: 0.3s;
    border-radius: 0px;
    overflow: hidden;
}
.pagination li {
    margin: 0;
}
nav.pagination-container ul li a {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    padding: 15px 18px 13px;
    background: #FFF;
    line-height: 1;
    border-right: solid 1px #eee;
}
li.first {
    border-radius: 5px 0 0 5px;
}
li.last {
    border-radius: 0 5px 5px 0;
}
li.page.navi-active a {
    background: #ebfcfe;
    transform: scale(1.2);
}
.pagenation_block dl {
    border-bottom: solid 1px #ddd;
}

jQuery 

$(function() {
  $('.pagenation_block').paginathing({//親要素のclassを記述
   perPage: 5,//1ページあたりの表示件数
   prevText:'<i class="fas fa-angle-left"></i>',//1つ前のページへ移動するボタンのテキスト
   nextText:'<i class="fas fa-angle-right"></i>',//1つ次のページへ移動するボタンのテキスト
   activeClass: 'navi-active',//現在のページ番号に任意のclassを付与できます
   firstText: '<i class="fas fa-angle-double-left"></i>', // "最初ページ"に移動するボタンのテキスト
   lastText: '<i class="fas fa-angle-double-right"></i>', // "最後のページ"に移動するボタンのテキスト

  })
});

ざっくりとしたコードの解説

jQuery：paginathing.jsのパラメータ

paginathing.jsには、パラメータがあります。

パラメータは、<body>〜</body> に記述するjQueryのコードと一緒に記述すればOKで、以下のパラメータは個人的によく使うパラメータです。

  • perPage … 1ページあたりの表示件数 例：perPage: 5,
  • prevText … 1つ前のページへ移動するボタンのテキスト 例：prevText:'前へ',
  • nextText … 1つ次のページへ移動するボタンのテキスト 例：nextText:'次へ',
  • activeClass … 選択中のページに任意のclassを付与 例：activeClass: 'page-active',
  • firstText … 最初のページに移動するボタンのテキスト 例：firstText: '最初のページへ',
  • lastText … 最後のページに移動するボタンのテキスト 例：lastText: '最後のページへ',

その他のオプションは、paginathing.jsの下部から確認可能なので、チェックしてみてください。

外部リンク paginathing.js

前の記事

RESTAPIのイラスト
WP REST APIでACFのカスタムフィールドを表示させる…

次の記事

自作したWordPressプラグインのバージョンアップの方法と…

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら