>  >  >  > 

カラーミーショップにページネーション(ページング)を実装する方法

カラーミーショップにページネーション(ページング)を実装する方法

こんにちは、ウラカワです。

今回はカラーミーにページネーション(ページング)を実装する方法を紹介します。

カラーミーを利用している方はご存知かと思いますが、残念ながらページネーションを出力するタグは用意されていません。

用意されているのは、前後のページに移動するリンクを出力するタグのみです。

商品数が少ない場合は前後のリンクのみで十分かと思いますが、多くなってくると必然とページ数も増えますので、やはりページネーションが必要になってきます。

ページネーション自体の仕様も、全ページ分表示させたり、前後が省略されたりと色々ありますが、Googleでもお馴染みの前後を省略する仕様で作ってみました。

ソースコード

使い方

使い方は簡単です。

以下の2項目の数値を変更するだけでOKです。

1ページに表示する商品数

管理画面のデザイン設定にある「表示商品数」で設定した件数を指定してください。

ページネーションの表示範囲

ページネーションの表示範囲を指定してください。

現在のページから ±X ページまで表示かつ、最大表示数が X x 2 + 1 となります。

最初と最後のページのように前後ページが無い場合も最大表示数分は表示するようにしています。

言葉で説明するとややこしいので、以下の例を参照してください。

◆最初のページを表示している場合
[1] [2] [3] [4] [5] [6] [7] … [次へ]

◆途中のページを表示している場合
[前へ] … [5] [6] [7] [8] [9] [10] [11] … [次へ]

◆最後のページを表示している場合
[前へ] … [44] [45] [46] [47] [48] [49] [50]

◆総ページ数が少ない場合
[前へ] [1] [2] [3] [4] [次へ]

という感じで、最大表示数より総ページ数が少ない場合を除き表示数は維持します。

最後に

PC版テンプレートの方で動作確認済みですが、ご利用は自己責任にて。

ちなみに、有料のテンプレートにはページネーションが組み込んであったりするようです。

購入したことがないのでどういう仕様になっているのかは不明です・・・

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング