CMS:パジネーションバーを追加・設定する

読了時間:3分
重要:
この要素は、現在 Editor X と Wix Studio エディタではご利用いただけません。
パジネーションバーは、訪問者がコレクション内のアイテムページ間を移動したり、特定のページに移動するときに便利です。パジネーションバーには、訪問者が現在閲覧しているページのページ番号が常に表示される他、「戻る」ボタンと「次へ」ボタンもあります。パジネーションバーは設定パネルで設定できます。

ページの計算方法については、以下を参照してください。

パジネーションバーは、標準ページと動的リストページに配置できます。動的アイテムページに読み込まれるアイテムは一度に 1つなので、ページ送り操作は必要ありません。
始める前に:
この要素を使用するには、サイトに CMS を追加して、結果を格納するコレクションを設定する必要があります。
下記をご確認ください:

ステップ 1 | パジネーションバーを追加・設定する

  1. エディタ左側で「追加 をクリックします。
  2. インタラクティブ」をクリックします。
  3. 選択したパジネーションバーをクリックしてドラッグします。
  4. レイアウトを変更」をクリックします。
  5. 下記のいずれかを選択します:
    • クリック
    • 入力
    • 矢印
  6. データの最初のページと最後のページに移動するボタンを表示または非表示にするには、「最初のボタンと最後のボタンを表示」トグルをクリックします。
  7. 最初のページ番号と最後のページ番号の表示と非表示を切り換えるには、「最初のページと最後のページを表示」トグルをクリックします。最初のページを閲覧しているときは最後のページ番号が表示され、最後のページを閲覧しているときは最初のページ番号が表示されます。
  8. 配置」下でオプションを選択します:
    • 左揃え
    • 中央揃え
    • 右揃え
    • 均等割付
  9. ナビゲーションボタンを選択」でオプションを選択します:
    • 矢印
    • テキスト
      • テキストをカスタマイズします。
  10. ページの表示方向」でオプションを選択します:
    • 左から右
    • 右から左

ステップ 2 | パジネーションバーを接続する

  1. サイトでパジネーションバーをクリックします。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを接続 」をクリックし、ドロップダウンリストからデータセットを選択します。
パジネーションバーがデータセットに接続されると、パジネーションバーはデータセットからページの総数を自動的に読み取り、現在、表示されているのが、データのどのページであるかを制御します。
ヒント:
  • ページに複数のパジネーションバーを配置できます。たとえば、1つはページの上部に、もう 1つをページの下部に配置できます。両方のパジネーションバーが同じデータセットに接続されている限り、どちらも機能します。
  • 一度に 1つのアイテムを表示する標準ページを作成するには、表示するアイテムの数を「1」に設定します。このとき、訪問者はパジネーションバーでアイテム間を移動できます。

ページ数の計算方法

データセット設定パネルで、ページに表示するアイテムの数を指定します。使用可能なページ数は、現在データセット内にあるアイテムの数を 1ページ当たりのアイテム数で割って計算します。たとえば、表示するアイテムの数を 4 に設定し、データセットに 20アイテムがある場合、パジネーションバーには 5ページ(20/4 = 5)が表示されます。

データセットには、現在ライブコレクションにあるすべてのアイテムが含まれていない可能性があることに留意してください。たとえば、データセットにフィルターを適用すると、データセットのアイテムがコレクションにあるアイテムよりも少なくなることがあります。訪問者がコンテンツをフィルタリングできるようにページを設定すると、そのフィルター設定に応じて使用可能なページの数が変わることがあります。

お役に立ちましたか?

|